ionic API 之 Headers/Footers

最新推荐文章于 2021-01-13 15:34:34 发布

pdw2009

最新推荐文章于 2021-01-13 15:34:34 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ionic

本文链接：https://blog.youkuaiyun.com/pdw2009/article/details/47178059

Ionic 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何在Ionic框架中使用ion-header-bar和ion-footer-bar组件来创建页面的固定头部栏和底部栏，包括设置布局、添加按钮和标题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ion-header-bar作用是在内容上加一个固定的头部栏，也可以加一个子头部栏，只要在Class里面加’bar-subheade'
用法：

<ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>
<ion-content>
  Some content!
</ion-content>

相关属性
align-title 可选属性为 ‘left’, ‘right’, or ‘center’.
no-tap-scroll 可选属性为 true ,false

ion-footer-bar 例子

<ion-content>
  Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
  <div class="buttons">
    <button class="button">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons" ng-click="doSomething()">
    <button class="button">Right Button</button>
  </div>
</ion-footer-bar>