ionic3中文文档：悬浮按钮FabButton

其实我把ionic官网的API都翻译了，只是渣渣英语水平，也大概自己能看懂，就不全发出来了。目前，ionic3的资料很少，去国外的网站又难找。所以，官网是最好的学习资料。

以下内容最好对照着官网一起看。

1.FabButton

[ion-fab]

FAB（浮动动作按钮：Floating Action Buttons）是标准的md组件。它们被塑造成一个代表一个被提升的动作的圆圈。按下时，可能会包含更多的相关操作。FABs如它的名字一样，建议悬浮在content的固定位置上。这不是专门用<button ion-fab>Button</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>

如果FABs不放置在<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）

描述

mini

使fab button 为小按钮

2.FabContainer

<ion-fab>它本身不是一个FAB按钮，而是一个FAB按钮的容器，可以帮助fab按钮（<button ion-fab>）允许它被放置在不随内容滚动的固定位置。它也用于实现“（material design speed dial）”。即：FAB按钮在单击时显示相关操作的小列表。

用法

<!-- this fab is placed at top right -->

<ion-content>

<ion-fab top right>

   <buttonion-fab>Button</button>

</ion-fab>

<!-- this fab is placed at the center of the content viewport -->

<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>

<!-- this fab is placed at bottom right -->

<ion-fabbottomright >

   <buttonion-fab>Share</button>

   <ion-fab-listside="top">

     <buttonion-fab>Facebook</button>

     <buttonion-fab>Twitter</button>

     <buttonion-fab>Youtube</button>

   </ion-fab-list>

   <ion-fab-listside="left">

     <buttonion-fab>Vimeo</button>

   </ion-fab-list>

</ion-fab>

</ion-content>

FAB快速拨号也可以编程关闭。

<ion-content>

<ion-fabbottomright #fab>

   <buttonion-fab>Share</button>

   <ion-fab-listside="top">

     <buttonion-fab (click)="share('facebook', fab)">Facebook</button>

     <buttonion-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> 是FabButton的容器，是它的父组件。

<button ion-fab>Button</button>是<ion-fab></ion-fab>的子组件，应有一个<button ion-fab>放置在<ion-fab-list>外，作为<ion-fab>未点击时要显示的。
而放置在<ion-fab-list>中的按钮，点击主按钮后显示的，并且一个list为一个方向。
完！