ionic3中文翻译：FabButton

我把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为一个方向。

如有错误，请多指教，感激不尽。完！