ionic2 + cordova 应用-头部标题（样式自定）

最新推荐文章于 2024-02-11 07:00:00 发布

pre绿野仙踪fix

最新推荐文章于 2024-02-11 07:00:00 发布

阅读量440

点赞数

CC 4.0 BY-SA版权

分类专栏： ionic2 + cordva混合开发文章标签： ionic2 cordova angular 中文教程

本文链接：https://blog.youkuaiyun.com/alreadyfor/article/details/84902315

ionic2 + cordva混合开发专栏收录该内容

11 篇文章

订阅专栏

8.1 标题栏使用（欢迎加入Q群一起学习讨论657185219）

<ion-header>
  <ion-navbar>
    <ion-title>
      <ion-searchbar></ion-searchbar>
    </ion-title>
    <!--begin左侧；end结尾右侧-->
    <ion-buttons bigin>
      <button ion-button>
        南京
        <ion-icon name="ios-arrow-down" style="margin:2px 0px 0px 4px"></ion-icon>
      </button>
    </ion-buttons>

  </ion-navbar>
</ion-header>

<ion-title> 标题可以直接是一句话，这里用了searchbar

8.2 样式自定义

官网样式变量（去找不同标签对应的颜色变量）

官网所有icon (找到自己想用的图标)

这里我对ion-navbar 整个底部颜色进行了自定义

8.3 添加回退按钮

<!--在toolbar下添加选择城市按钮-->
<ion-buttons bigin>
      <button ion-button>
        南京
        <ion-icon name="ios-arrow-down" style="margin:2px 0px 0px 4px"></ion-icon>
      </button>
    </ion-buttons>