Ionic - 页脚

Ionic 页脚位于应用屏幕底部。页脚的使用方式与页眉几乎相同。

添加页脚

Ionic 页脚的主要类是bar（与页眉相同）。当您想在屏幕中添加页脚时，需要在主bar类之后，为您的元素添加bar-footer类。由于我们希望在应用的每个屏幕上使用页脚，因此我们将其添加到index.html文件的body中。我们还将为页脚添加标题。

<div class = "bar bar-footer">
   <h1 class = "title">Footer</h1>
</div>

以上代码将生成以下屏幕：

页脚颜色

如果要设置页脚样式，只需向其添加相应的颜色类即可。设置元素样式时，需要将主元素类作为前缀添加到颜色类中。由于我们正在设置页脚栏的样式，因此前缀类将是bar，在本例中我们要使用的颜色类是assertive（红色）。

<div class = "bar bar-footer bar-assertive">
   <h1 class = "title">Footer</h1>
</div>

以上代码将生成以下屏幕：

您可以使用以下九个类中的任何一个，为您的应用页脚指定您选择的颜色：

页脚元素

页脚可以包含其中的元素。大多数情况下，您需要在页脚中添加带有图标的按钮。

添加的第一个按钮始终位于左角。最后一个按钮将放置在右侧。中间的按钮将分组在页脚左侧的第一个按钮旁边。在下面的示例中，您还可以注意到我们使用icon类在按钮顶部添加图标。

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon"></button>
   <button class = "button icon ion-home"></button>
   <button class = "button icon ion-star"></button>
   <button class = "button icon ion-checkmark-round"></button>
</div>

以上代码将生成以下屏幕：

如果要将按钮移到右侧，可以添加pull-right类。

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon pull-right"></button>
</div>

以上代码将生成以下屏幕：