我把ionic官网的API都翻译了,只是渣渣英语水平,也大概自己能看懂,就不全发出来了。目前,ionic3的资料很少,去国外的网站又难找。所以,官网是最好的学习资料。
以下内容最好对照着官网一起看。
1.FabButton:<button ion-fab>Button</button>
FAB(悬浮按钮:Floating Action Buttons)是标准的material design组件。它们被塑造成一个凸起的圆圈。按下时,可能会显示更多的相关操作。FAB如它的名字一样,建议悬浮在content的固定位置上。这不是专门用<button ion-fab>Button</button>
来实现的,而是必须包含在<ion-fab>
组件中,如下所示:
<ion-content>
<ion-fab>
<button ion-fab>Button</button>
</ion-fab>
<button ion-fab>Button</button>
</ion-content>
如果 FAB 不放置在
<ion-fab>
,则
fab
按钮将按照普通按钮的形式展示,且随着内容滚动。
请参阅[ion-fab]了解有关如何定位fab按钮的更多信息。
用法
<!-- 颜色 -->
<ion-fab>
<button ion-fab color="primary">Button</button>
</ion-fab>
<!--小-->
<ion-fab>
<button ion-fab mini>Small</button>
</ion-fab>
属性
属性(Attribute) | 描述 |
mini | 使fab button 为小按钮 |
2.FabContainer:<ion-fab>
<ion-fab>
它本身不是一个FAB按钮,而是一个FAB按钮的容器,可以帮助fab按钮(<button ion-fab>
)允许它被放置在不随内容滚动的固定位置。它也用于实现“(material design 快速列表样式)”。即:FAB按钮在单击时显示相关操作的小列表。(像苹果的悬浮按钮差不多)
用法
<!-- 将容器放到content的右上 -->
<ion-content>
<ion-fab top right>
<button ion-fab>Button</button>
</ion-fab>
<!-- 中间 -->
<ion-fab center middle>
<button ion-fab>Button</button>
</ion-fab>
</ion-content>
Ionic的FAB还支持“md的快速列表(materialdesign's fab speed dial)”。它是一个正常的fab按钮,显示点击时相关操作的列表。
相同的ion-fab
容器可以包含多个ion-fab-list
从而具有不同的side值:top
,bottom
,left
和right
。例如,如果要在主按钮顶部有一个按钮列表,应该使用side="top"
等等。默认情况下,如果side被忽略,side="bottom"
。
<ion-content>
<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>
</ion-content>
FAB快速列表也可以程序关闭。
<ion-content>
<ion-fab bottom right #fab>
<buttonion-fab>Share</button>
<ion-fab-list side="top">
<button ion-fab (click)="share('facebook', fab)">Facebook</button>
<button ion-fab (click)="share('twitter', fab)">Twitter</button>
</ion-fab-list>
</ion-fab>
</ion-content>
share(socialNet: string, fab: FabContainer) {
fab.close();
console.log("Sharing in", socialNet);
}
属性
属性 | 描述 |
top | 将容器放在内容的顶部 |
bottom | 将容器放在内容的底部 |
left | 将容器放在内容的左边 |
right | 将容器放在内容的右边 |
middle | 将容器放在垂直线的中心 |
center | 将容器放在水平线的中心 |
edge | 用于将容器放在content和header之间,或在content和footer之间 |
实例成员
close()
关闭FAB列表容器
3.FabList
ion-fab-list
是多个FAB按钮的容器。它们是ion-fab
组件的子组件,并允许您对按钮位置,如左,右,顶部和底部进行细化。
用法
<ion-fab bottom right>
//主按钮,点击主按钮后显示的按钮放置在<ion-fab-list>中,一个list为一个方向
<buttonion-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>
总结:
<ion-fab></ion-fab> 是<button ion-fab>Button</button>的容器,是它的父组件。<ion-fab-list>也是<ion-fab></ion-fab>的子组件,可以用来放FabButton。
<button ion-fab>Button</button>也是<ion-fab-list>的子组件,应有一个<button ion-fab>放置在<ion-fab-list>外,作为<ion-fab>未点击时要显示的。
而放置在<ion-fab-list>中的按钮,点击主按钮后显示的,并且一个list为一个方向。
如有错误,请多指教,感激不尽。完!