mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00

Files

Cam Wiegert 018fb9876f test(all): use test() instead of it() where appropriate (#16129 )

This replaces uses of Jest's it() function in end-to-end tests with the alias test() where it makes sense semantically.

2018-10-29 12:40:06 -05:00

test

test(all): use test() instead of it() where appropriate (#16129 )

2018-10-29 12:40:06 -05:00

usage

fix(fab-button): use correct background in list and update the md icon color (#16092 )

2018-10-25 21:42:19 -05:00

fab.scss

fix(all): safe margins for fab, item-header, tabbar

2018-09-26 20:56:09 +02:00

fab.tsx

fix(all): docs for all missing props

2018-10-11 16:24:08 -05:00

fab.vars.scss

chore(stylelint): remove sass-lint/scss-lint in favor of stylelint

2018-07-19 15:10:30 -05:00

readme.md

chore(): update stencil

2018-10-12 11:44:43 -05:00

readme.md

ion-fab

Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fab should have one main fab-button. Fabs can also contain fab-lists which contain related buttons that show when the main fab button is clicked. The same fab container can contain several fab-list elements with different side values.

Properties

Property	Attribute	Description	Type
`activated`	`activated`	If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.	`boolean`
`edge`	`edge`	If `true`, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot.	`boolean`
`horizontal`	`horizontal`	Where to align the fab horizontally in the viewport. Possible values are: `"center"`, `"start"`, `"end"`.	`"center" \| "end" \| "start" \| undefined`
`vertical`	`vertical`	Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`.	`"bottom" \| "center" \| "top" \| undefined`

Methods

`close() => void`

Close an active FAB list container

Returns

Type: void

Built with StencilJS