shadowFloating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions.
As the name suggests, FABs generally float over the content in a fixed position. This is achieved by wrapping the fab button in a fab component. If the button is not wrapped with a fab, it will scroll with the content.
For usage examples, see the fab documentation.
| Description | trueの場合、ファブボタンにクローズアイコンを表示します。 |
| Attribute | activated |
| Type | boolean |
| Default | false |
| Description | The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list. |
| Attribute | close-icon |
| Type | string |
| Default | close |
| Description | The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined |
| Default | undefined |
| Description | trueの場合、ユーザーはファブボタンを操作することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). |
| Attribute | download |
| Type | string ｜ undefined |
| Default | undefined |
| Description | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. |
| Attribute | href |
| Type | string ｜ undefined |
| Default | undefined |
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | Specifies the relationship of the target object to the link object. The value is a space-separated list of link types. |
| Attribute | rel |
| Type | string ｜ undefined |
| Default | undefined |
| Description | When using a router, it specifies the transition animation when navigating to another page using href. |
| Attribute | undefined |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
| Description | When using a router, it specifies the transition direction when navigating to another page using href. |
| Attribute | router-direction |
| Type | "back" ｜ "forward" ｜ "root" |
| Default | 'forward' |
| Description | trueの場合、fabボタンがfab-listにあるときに表示されます。 |
| Attribute | show |
| Type | boolean |
| Default | false |
| Description | ボタンの大きさを指定します。ミニファブボタンを作るには、smallに設定します。 |
| Attribute | size |
| Type | "small" ｜ undefined |
| Default | undefined |
| Description | Specifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top". |
| Attribute | target |
| Type | string ｜ undefined |
| Default | undefined |
| Description | If true, the fab button will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter. |
| Attribute | translucent |
| Type | boolean |
| Default | false |
| Description | ボタンの種類です。 |
| Attribute | type |
| Type | "button" ｜ "reset" ｜ "submit" |
| Default | 'button' |
| Name | Description |
|---|
ionBlur | ボタンのフォーカスが外れたときに発行されます。 |
ionFocus | ボタンにフォーカスが当たっているときに発行されます。 |
No public methods available for this component.
| Name | Description |
|---|
close-icon | ファブリストを開いたときに表示されるクローズアイコン（ion-iconを使用します）。 |
native | すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。 |
| Name | Description |
|---|
--background | ボタンの背景 |
--background-activated | ボタンが押されたときの背景。注意：これを設定すると、Material Designの波紋に干渉します。 |
--background-activated-opacity | 押されたときのボタンの背景の不透明度 |
--background-focused | タブキーでフォーカスしたときのボタンの背景 |
--background-focused-opacity | タブキーでフォーカスしたときのボタンの背景の不透明度 |
--background-hover | ホバー時のボタンの背景 |
--background-hover-opacity | ホバー時のボタン背景の不透明度 |
--border-color | ボタンのボーダーカラー |
--border-radius | ボタンの境界半径 |
--border-style | ボタンのボーダースタイル |
--border-width | ボタンのボーダー幅 |
--box-shadow | ボタンのボックスシャドウ |
--close-icon-font-size | クローズアイコンのFont Size |
--color | ボタンの文字色 |
--color-activated | ボタンが押されたときの文字色 |
--color-focused | タブキーでフォーカスしたときのボタンの文字色 |
--color-hover | ホバー時のボタンの文字色 |
--padding-bottom | ボタンのBottom Padding |
--padding-end | ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。 |
--padding-start | ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。 |
--padding-top | ボタンのTop Padding |
--ripple-color | ボタンリプルエフェクトの色 |
--transition | ボタンの遷移 |
No slots available for this component.