离子 - 页脚

离子页脚位于应用程序屏幕的底部。使用页脚几乎与使用页眉相同。

添加页脚

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

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

上面的代码将产生以下屏幕 -

离子页脚

页脚颜色

如果您想设计页脚样式，只需添加适当的颜色类即可。当您设计元素的样式时，您需要将主元素类添加为颜色类的前缀。由于我们正在设计页脚栏的样式，因此前缀类将是一个栏，并且我们要在本示例中使用的颜色类是自信的（红色）。

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

上面的代码将产生以下屏幕 -

离子页脚图标