FabList
ion-fab-list
ion-fab-list是多个FAB按钮的容器。 它们是ion-fab的组件，可让您对按钮的位置，左，右，顶部和底部进行具体说明。
使用
<ion-fab bottom right >
<button ion-fab>Share</button>
<ion-fab-list side="top">
<button ion-fab>Facebook</button>
<button ion-fab>Twitter</button>
<button ion-fab>Youtube</button>
</ion-fab-list>
<ion-fab-list side="left">
<button ion-fab>Vimeo</button>
</ion-fab-list>
</ion-fab>
效果：
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 组件文档