ion-fab

shadow

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. Fabs should have one main fab button. Fabs can also contain one or more fab lists which contain related buttons that show when the main fab button is clicked.

Basic Usage

List Side

The side property of the fab list component controls where it appears relative to the main fab button. A single fab can have multiple fab lists as long as they all have different values for side.

Positioning

In order to place the fab in a fixed position, it should be assigned to the fixed slot of the outer content component. Use the vertical and horizontal props to control the alignment of the fab in the viewport. The edge prop will cause the fab button to overlap with the app's header or footer.

Button Sizing

Setting the size property of the main fab button to "small" will render it at a mini size. Note that this property will not have an effect when used with the inner fab buttons.

Theming

Colors

CSS Custom Properties

CSS Shadow Parts

Properties

activated

Description	もし true ならば、ion-fab 内の ion-fab-button とすべての ion-fab-list の両方がアクティブになる。つまり、ion-fab-buttonはcloseアイコンになり、ion-fab-listは可視化される。
Attribute	activated
Type	boolean
Default	false

edge

Description	trueの場合、verticalが"top"の場合はヘッダーの端に、"bottom"の場合はフッターの端にファブを表示します。 fixed slotと一緒に使用する必要があります。
Attribute	edge
Type	boolean
Default	false

horizontal

Description	ビューポートでファブを水平に揃える場所。
Attribute	horizontal
Type	"center" ｜ "end" ｜ "start" ｜ undefined
Default	undefined

vertical

Description	ビューポートでファブを縦に並べる場所。
Attribute	vertical
Type	"bottom" ｜ "center" ｜ "top" ｜ undefined
Default	undefined

Events

No events available for this component.

Methods

close

Description	アクティブなFABリストコンテナを閉じる。
Signature	close() => Promise<void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

No slots available for this component.