Ionic页脚


Ionic页脚 放置在应用程序屏幕的底部。使用页脚与使用页眉几乎相同。

添加页脚

Ionic页脚的主要类是 bar (与标题相同)。如果要在屏幕上添加页脚,则需要在主 栏类之后将 bar-footer 类添加到元素中。由于我们想在应用程序的每个屏幕上使用我们的页脚,我们会将其添加到 index.html 文件的主体中。我们还将为页脚添加标题。

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

上面的代码将生成以下屏幕

Ionic页脚

页脚颜色

如果要为页脚设置样式,只需要为其添加适当的颜色类。在为元素设置样式时,需要将主要元素类添加为颜色类的前缀。由于我们正在设置页脚栏的样式,因此前缀类将是一个栏 ,我们要在此示例中使用的颜色类是断言的(红色)。

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

上面的代码将生成以下屏幕

Ionic页脚颜色

您可以使用以下九个类中的任何一个为您的应用页脚提供您选择的颜色 -

颜色类 描述 结果
bar-light 用于白色  
bar-stable 用于浅灰色  
bar-positive 用于蓝色  
bar-calm 用于浅蓝色  
bar-balanced 用于绿色  
bar-energized 用于黄色  
bar-assertive 用于红色  
bar-royal 用于紫罗兰色  
bar-dark 用于黑色  

页脚元素

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

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

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

上面的代码将生成以下屏幕

Ionic页脚图标

如果要将按钮向右移动,可以添加 右拉 类。

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

上面的代码将生成以下屏幕

Ionic页脚图标