FabButton
[ion-fab]
FAB（浮动动作按钮）是标准的材料设计组件。 它们被塑造成一个代表一个被提升的动作的圆圈。 按下时，可能会包含更多的相关操作。 FABs的名字建议在固定位置上漂浮在内容上。 这不是仅通过<button ion-fab>按钮</ button>实现，而是必须用<ion-fab>组件包装，如下所示：
<ion-content>
<!-- Real floating action button, fixed. It will not scroll with the content -->
<ion-fab>
<button ion-fab>Button</button>
</ion-fab>
<!-- Button shaped as a circle that just like a normal button scrolls with the content -->
<button ion-fab>Button</button>
</ion-content>
如果按钮不是用<ion-fab>包装，那么fab按钮的行为就像普通按钮一样，滚动内容。
请参阅[ion-fab]了解有关如何定位fab按钮的更多信息。
使用
<!-- Colors -->
<ion-fab>
<button ion-fab color="primary">Button</button>
</ion-fab>
<!-- Mini -->
<ion-fab>
<button ion-fab mini>Small</button>
</ion-fab>
效果：
属性:
| Attribute | Description |
|---|---|
| mini | Makes a fab button with a reduced size. |
Sass 变量
All
| Property | Default | Description |
|---|---|---|
$fab-size |
56px |
Width and height of the FAB button |
$fab-mini-size |
40px |
Width and height of the FAB button mini |
$fab-content-margin |
10px |
Margin of the FAB Container |
$fab-list-margin |
10px |
Margin of the FAB List |
$fab-list-button-background-color |
#f4f4f4 |
Background color of the button in a list |
iOS
| Property | Default | Description |
|---|---|---|
$fab-ios-background-color |
color($colors-ios, primary) |
Background color of the button |
$fab-ios-text-color |
color-contrast($colors-ios, $fab-ios-background-color) |
Text color of the button |
$fab-ios-background-color-activated |
color-shade($fab-ios-background-color) |
Background color of the activated button |
$fab-ios-list-button-background-color |
$fab-list-button-background-color |
Background color of the button in a list |
$fab-ios-list-button-text-color |
color-contrast($colors-ios, $fab-ios-list-button-background-color) |
Text color of the button in a list |
$fab-ios-list-button-background-color-activated |
color-shade($fab-ios-list-button-background-color) |
Background color of the activated button in a list |
$fab-ios-list-button-transition-duration |
200ms |
Transition duration of the transform and opacity of the button in a list |
$fab-ios-list-button-transition-timing-function |
ease |
Speed curve of the transition of the transform and opacity of the button in a list |
$fab-ios-list-button-transition-delay |
10ms |
Transition delay of the transform and opacity of the button in a list |
Material Design
| Property | Default | Description |
|---|---|---|
$fab-md-box-shadow |
0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) |
Box shadow of the FAB button |
$fab-md-box-shadow-activated |
0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) |
Box shadow of the activated FAB button |
$fab-md-background-color |
color($colors-md, primary) |
Background color of the button |
$fab-md-text-color |
color-contrast($colors-md, $fab-md-background-color) |
Text color of the button |
$fab-md-background-color-activated |
color-shade($fab-md-background-color) |
Background color of the activated button |
$fab-md-list-button-background-color |
$fab-list-button-background-color |
Background color of the button in a list |
$fab-md-list-button-text-color |
color-contrast($colors-md, $fab-md-list-button-background-color) |
Text color of the button in a list |
$fab-md-list-button-background-color-activated |
color-shade($fab-md-list-button-background-color) |
Background color of the activated button in a list |
$fab-md-list-button-transition-duration |
200ms |
Transition duration of the transform and opacity of the button in a list |
$fab-md-list-button-transition-timing-function |
ease |
Speed curve of the transition of the transform and opacity of the button in a list |
$fab-md-list-button-transition-delay |
10ms |
Transition delay of the transform and opacity of the button in a list |
Windows Platform
| Property | Default | Description |
|---|---|---|
$fab-wp-background-color |
color($colors-wp, primary) |
Background color of the button |
$fab-wp-text-color |
color-contrast($colors-wp, $fab-wp-background-color) |
Text color of the button |
$fab-wp-background-color-activated |
color-shade($fab-wp-background-color) |
Background color of the activated button |
$fab-wp-list-button-background-color |
$fab-list-button-background-color |
Background color of the button in a list |
$fab-wp-list-button-text-color |
color-contrast($colors-wp, $fab-wp-list-button-background-color) |
Text color of the button in a list |
$fab-wp-list-button-background-color-activated |
color-shade($fab-wp-list-button-background-color) |
Background color of the activated button in a list |
$fab-wp-list-button-transition-duration |
200ms |
Transition duration of the transform and opacity of the button in a list |
$fab-wp-list-button-transition-timing-function |
ease |
Speed curve of the transition of the transform and opacity of the button in a list |
$fab-wp-list-button-transition-delay |
10ms |
Transition delay of the transform and opacity of the button in a list |
相关
FAB 组件文档