ion-fab-button
浮动操作按钮（FAB）表示应用中的主要操作。默认情况下，它们具有圆形形状。按下时，按钮可能会打开更多相关操作。
顾名思义，FAB 通常以固定位置浮动在内容之上。这是通过将 fab 按钮包裹在 fab 组件中实现的。如果按钮没有用 fab 包裹，它将随内容滚动。
使用示例请参阅 fab 文档。
属性
activated
| 说明 | If true, the fab button will be show a close icon. |
| 属性 | activated |
| 类型 | boolean |
| 默认值 | false |
closeIcon
| 说明 | 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. |
| 属性 | close-icon |
| 类型 | string |
| 默认值 | close |
color
| 说明 | 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. |
| 属性 | color |
| 类型 | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| 默认值 | undefined |
disabled
| 说明 | If true, the user cannot interact with the fab button. |
| 属性 | disabled |
| 类型 | boolean |
| 默认值 | false |
download
| 说明 | 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). |
| 属性 | download |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
form
| 说明 | The HTML form element or form element id. Used to submit a form when the button is not a child of the form. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。 |
| 属性 | form |
| 类型 | HTMLFormElement ｜ string ｜ undefined |
| 默认值 | undefined |
href
| 说明 | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. |
| 属性 | href |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
mode
| 说明 | The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。 |
| 属性 | mode |
| 类型 | "ios" ｜ "md" |
| 默认值 | undefined |
rel
| 说明 | Specifies the relationship of the target object to the link object. The value is a space-separated list of link types. |
| 属性 | rel |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
routerAnimation
| 说明 | When using a router, it specifies the transition animation when navigating to another page using href. |
| 属性 | undefined |
| 类型 | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| 默认值 | undefined |
routerDirection
| 说明 | When using a router, it specifies the transition direction when navigating to another page using href. |
| 属性 | router-direction |
| 类型 | "back" ｜ "forward" ｜ "root" |
| 默认值 | 'forward' |
show
| 说明 | If true, the fab button will show when in a fab-list. |
| 属性 | show |
| 类型 | boolean |
| 默认值 | false |
size
| 说明 | The size of the button. Set this to small in order to have a mini fab button. |
| 属性 | size |
| 类型 | "small" ｜ undefined |
| 默认值 | undefined |
target
| 说明 | Specifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top". |
| 属性 | target |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
translucent
| 说明 | If true, the fab button will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter. |
| 属性 | translucent |
| 类型 | boolean |
| 默认值 | false |
type
| 说明 | The type of the button. |
| 属性 | type |
| 类型 | "button" ｜ "reset" ｜ "submit" |
| 默认值 | 'button' |
事件
| Name | 说明 | 冒泡 |
|---|---|---|
ionBlur | Emitted when the button loses focus. | true |
ionFocus | Emitted when the button has focus. | true |
方法
该组件没有可用的公共方法。
CSS Shadow Parts
| Name | 说明 |
|---|---|
close-icon | The close icon that is displayed when a fab list opens (uses ion-icon). |
native | The native HTML button or anchor element that wraps all child elements. |
CSS 自定义属性
- iOS
- MD
| Name | 说明 |
|---|---|
--background | Background of the button |
--background-activated | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. |
--background-activated-opacity | Opacity of the button background when pressed |
--background-focused | Background of the button when focused with the tab key |
--background-focused-opacity | Opacity of the button background when focused with the tab key |
--background-hover | Background of the button on hover |
--background-hover-opacity | Opacity of the button background on hover |
--border-color | Border color of the button |
--border-radius | Border radius of the button |
--border-style | Border style of the button |
--border-width | Border width of the button |
--box-shadow | Box shadow of the button |
--close-icon-font-size | Font size of the close icon |
--color | Text color of the button |
--color-activated | Text color of the button when pressed |
--color-focused | Text color of the button when focused with the tab key |
--color-hover | Text color of the button on hover |
--padding-bottom | Bottom padding of the button |
--padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
--padding-top | Top padding of the button |
--ripple-color | Color of the button ripple effect |
--transition | Transition of the button |
| Name | 说明 |
|---|---|
--background | Background of the button |
--background-activated | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. |
--background-activated-opacity | Opacity of the button background when pressed |
--background-focused | Background of the button when focused with the tab key |
--background-focused-opacity | Opacity of the button background when focused with the tab key |
--background-hover | Background of the button on hover |
--background-hover-opacity | Opacity of the button background on hover |
--border-color | Border color of the button |
--border-radius | Border radius of the button |
--border-style | Border style of the button |
--border-width | Border width of the button |
--box-shadow | Box shadow of the button |
--close-icon-font-size | Font size of the close icon |
--color | Text color of the button |
--color-activated | Text color of the button when pressed |
--color-focused | Text color of the button when focused with the tab key |
--color-hover | Text color of the button on hover |
--padding-bottom | Bottom padding of the button |
--padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
--padding-top | Top padding of the button |
--ripple-color | Color of the button ripple effect |
--transition | Transition of the button |
插槽
该组件没有可用的插槽。