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>

上述代码将在屏幕上产生以下内容 −