> 博客详情
摘要: ionic tab项目 对头部导航栏的全局定义 局部定义根据不同情况 酌情思虑使用什么标签
一，在入口程序 index.html中
&body&ng-app="myApp"&
&&&&&ion-nav-bar&class="bar-dark"&
&&&&&&&&&ion-nav-back-button&
&&&&&&&&&/ion-nav-back-button&
&&&&&/ion-nav-bar&
&&&&&ion-nav-view&&/ion-nav-view&
二，在tabs.html中
&ion-tabs&class="tabs-light&&tabs-icon-top&tabs-color-active-positive"&ng-class="{'tabs-item-hide':globalData.hideTabs}"&
&&&&&ion-tab&title="首页"&icon-off="ion-ios-pulse"&icon-on="ion-ios-pulse-strong"&href="#/tab/home"&ng-click="action.selectTabWithIndex(0)"&
&&&&&&&&&ion-nav-view&name="tab-home"&&/ion-nav-view&
&&&&&/ion-tab&
&&&&&ion-tab&title="验证"&icon-off="ion-ios-chatboxes-outline"&icon-on="ion-ios-chatboxes"&href="#/tab/verify"&ng-click="action.selectTabWithIndex(1)"&
&&&&&&&&&ion-nav-view&name="tab-verify"&&/ion-nav-view&
&&&&&/ion-tab&
&&&&&ion-tab&title="发现"&icon-off="ion-ios-gear-outline"&icon-on="ion-ios-gear"&href="#/tab/find"&ng-click="action.selectTabWithIndex(2)"&
&&&&&&&&&ion-nav-view&name="tab-find"&&/ion-nav-view&
&&&&&/ion-tab&
&&&&&ion-tab&title="我的"&icon-off="ion-ios-gear-outline"&icon-on="ion-ios-person-outline"&href="#/tab/my"&ng-click="action.selectTabWithIndex(3)"&
&&&&&&&&&ion-nav-view&name="tab-my"&&/ion-nav-view&
&&&&&/ion-tab&
&/ion-tabs&
三，子模板页面对头部导航栏的定义（局部定义）--具体需要使用的标签
（1）在头部导航栏 无自定义按钮（view-title）
&ion-view&view-title="关于我们"&hide-tabs="true"&
&&&&&!--------------------&内容&-----------------------&
&&&&&ion-content&&/ion-content&
&/ion-view&
（2）在头部导航栏&有自定义按钮
1.左右按钮(ion-nav-buttons)自定义，标题（view-title）仅为展示功能
&!--------------------&我的页面&-----------------------&
&ion-view&view-title="我的"&id="page_my"&
&&&&&!--------------------&顶部&-----------------------&
&&&&&ion-nav-buttons&side="left"&
&&&&&&&&&div&class="buttons"&ng-click="action.toMessageListPage()"&
&&&&&&&&&&&&&button&class="button&button-icon&button-clear"&
&&&&&&&&&&&&&&&&&i&class="fa&fa-commenting-o"&
&&&&&&&&&&&&&&&&&&&&&span&class="badge&badge-assertive"&ng-if="true"&9&/span&
&&&&&&&&&&&&&&&&&/i&
&&&&&&&&&&&&&/button&
&&&&&&&&&/div&
&&&&&/ion-nav-buttons&
&&&&&ion-nav-buttons&side="right"&
&&&&&&&&&div&class="buttons"&ng-click="action.toMyHelpCenterPage()"&
&&&&&&&&&&&&&button&class="button&font_16_14"&
&&&&&&&&&&&&&&&&更多
&&&&&&&&&&&&&/button&
&&&&&&&&&/div&
&&&&&/ion-nav-buttons&
&&&&&!--------------------&内容&-----------------------&
&&&&&ion-content&&/ion-content&
&/ion-view&
2.标题有一些功能（ion-nav-title）
&ion-view&id="page_home"&
&&&&&!--------------------&顶部&-----------------------&
&&&&&ion-nav-title&
&&&&&&&&&h1&class="title"&ng-click="openPopover($event)"&
&&&&&&&&&&&&&button&class="button&button-clear&dropdown_btn"&ng-click="openPopover($event)"&
&&&&&&&&&&&&&&&&标题&i&class="ion-ios-arrow-down"&&/i&
&&&&&&&&&&&&&/button&
&&&&&&&&&/h1&
&&&&&/ion-nav-title&
&&&&&!--------------------&内容&-----------------------&
&&&&&ion-content&&/ion-content&
&/ion-view&
（3）带副标题bar-subheader（ion-header-bar）
&ion-view&view-title="关于我们"&hide-tabs="true"&
&&&&&!--------------------&副标题&-----------------------&
&&&&&ion-header-bar&class="bar&bar-subheader&scroll_nav&"&
&&&&&&&&&//副标题内容
&&&&&/ion-header-bar&
&&&&&!--------------------&内容&-----------------------&
&&&&&ion-content&class="has-subheader"&&/ion-content&
&/ion-view&
ion-nav-buttons最终会渲染进index.html中的ion-nav-bar 这个“坑”。
而ion-view则是 1.先渲染进tabs.html中的ion-tab的ion-nav-view这个“坑”（具体对应哪个ion-tab:由路由控制，路由的views值对应ion-nav-view的name值）; 2.最终再渲染进index.html中的ion-nav-view这个“坑”。
所以ion-nav-buttons是在全局下的，控制样式时，在子标签中加类写样式
??而ion-header-bar 会渲染在ion-view中，所以样式是局部的?
自定义子模板页面的头部导航栏 也可用ion-header-bar 和hide-nav-bar结合使用实现，但是会出现页面类似重新刷新一样的页面抖动，效果不好
&ion-view&id="page_my"&hide-nav-bar="true"&
&&&&&!--------------------&顶部&-----------------------&
&&&&&ion-header-bar&align-title="center"&class="bar&bar-header&bar-dark"&
&&&&&&&&//左边按钮
&&&&&&&&&div&class="buttons"&
&&&&&&&&&&&&&button&class="button&button-icon"&ng-click="action.toMyHelpCenterPage()"&
&&&&&&&&&&&&&&&&&i&class="ion-chevron-left"&&/i&
&&&&&&&&&&&&&/button&
&&&&&&&&&/div&
&&&&&&&&//标题
&&&&&&&&&h1&class="title"&ng-bind="inParams.title"&&/h1&
&&&&&&&&//右边按钮
&&&&&&&&&div&class="buttons"&ng-click="action.toMyHelpCenterPage()"&
&&&&&&&&&&&&&button&class="button&font_16_14"&
&&&&&&&&&&&&&&&&更多
&&&&&&&&&&&&&/button&
&&&&&&&&&/div&
&&&&&/ion-header-bar&&&&&
&&&&&!--------------------&内容&-----------------------&
&&&&&ion-content&&/ion-content&
&/ion-view&
人打赏支持
码字总数 2826
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥ionic 头部指令ion-header-bar标题没有居中对齐 - 黄彪学习笔记 - ITeye博客
博客分类：
代码如下，
&ion-header-bar class="bg_fdd000"&
在PC浏览器中 标题居中对齐，但是在手机浏览器中打开，标题没有居中对齐？
解决办法：需要强制指明指令的align-title对齐方式，这个与API中描述的方法不太一致。
&ion-header-bar class="bg_fdd000" align-title="center"&
&ion-header-bar class="bg_fdd000" align-title="center"&
&div class="buttons"&
&a class="button button-clear" ui-sref="setting_edit_address"&
&span class="icon ion-ios-arrow-left"&&/span&
&h1 class="title"&创建收货地址&/h1&
&div class="buttons"&
&button class="button button-clear button-dark" ng-click="saveAddr()"&
&/ion-header-bar&
浏览: 2056850 次
来自: 长沙
debug版本的apk没有问题，签名以后的apk 就不跳转链接 ...
直接用缓存啊 干嘛用map
不错。不知道你知不知道，缓存写磁盘，再恢复的问题
下载439次，就没一个说谢谢。ps：谢谢博主的分享。ionic css布局介绍(一)
时间： 15:49:47
&&&& 阅读：4499
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ionic css 布局介绍1. 基本布局2. 色彩、图标和边距3. 界面组件列表4. 界面组件按钮5. 界面组件 表单输入6. 界面组件选项卡7. 定制布局 栅格系统------------------------------------------------1． 基本布局1.布局模式基本布局： 标题/header、内容/content 和页脚/footer。标题区总是位于屏幕顶部，页脚区总是位于屏幕底部，而内容区占据剩余的空间。 ionic 使用以下 CSS 类声明对应区域: .bar.bar-header - 声明元素为标题区 .bar.bar-footer - 声明元素为底部 .content . scroll-content- 声明元素为内容区2. .bar 位置以及颜详解样式.bar 将元素声明为屏幕上绝对定位的块状区域，具有 固定的高度（ 44px）：使用方式：1. &any class="bar"&...&/any&3. .bar : 位置ionic 使用以下样式定义条块的位置： .bar-header - 置顶 .bar-subheader - header 之下置顶 .bar-footer - 置底 .bar-subfooter - footer 之上置底下面例子，使用了三个条块：标题、副标题、页脚：4. .bar : 嵌入子元素在 ionic 中，有三种.bar 子元素的样式是预定义的： 标题文字 - 对包含标题文字的元素应用.title 样式，通常使用 h1 元素：&any class="bar"&&any class="title"&...&/any&&/any& 按钮 - 对用作按钮的元素，应用.button 样式，通常使用 button 或 a 元素作为按钮。注意按钮将使用.bar 的配色方案：&any class="bar"&&any class="button"&...&/any&&/any& 工具栏 - 工具栏包含一组按钮。对用作工具栏的元素，应用.button-bar 样式，通常 使用 div元素作为工具栏：&any class="bar"&&any class="button-bar"&...&/any&&/any&5. bar : 嵌入 input一种常见的 UI 模式是在标题栏中嵌入搜索栏，比如美团：在.bar 元素中嵌入 input 元素，需要注意两点：1. 在条块元素上应用.item-input-inset 样式2. 将 input 包裹在应用.item-input-wrapper 样式的元素内这是因为，在 ionic 的实现中， .bar 中的.input 样式定义如下：.bar.item-input-inset{.item-input-wrapper{.input{...}}}6. 内容： .content 和.scroll-contentionic 预定义了两个内容容器样式： .content – 相对定位 .scroll-content - 绝对定位，内容元素占满整个屏幕 这两种样式都可以使用以下样式进一步确定位置及范围：2． Ionic 色彩、图标和边距1.ionic 定义了九种前景/背景/边框的色彩样式2.ionic 中的图标ionic 使用 ionicons 图标样式库。 ionicons 采用了 TrueType 字体实现图标样式，有超过500 个图标可供选择。使用图标很简单，在元素上声明以下两个 CSS 类即可： .icon - 将元素声明为图标 .ion-{icon-name} - 声明要使用的具体图标通常使用 i 元素定义图标，例如下面声明了元素显示 ion-home 图标：&i class="icon ion-home"&&/i&要了解有哪些图标及具体名称，需要访问 。 点击某个图标即可查看其 CSS 类名称。可以在任何元素中插入图标，使用元素的 font-size 样式指定图标的大小：&any style="font-size:100"&&i class="icon ion-search"&&/i&&/any&3.Ionic 内边距ionic 定义了常用的内边距样式：样式名很直白，边距统一为 10px。可以在任何元素上应用这些样式。3． ionic 界面组件列表1. 列表 : .list列表非常适合于手机屏幕上的信息的显示。使用.list 定义列表容器， 使用.item 定义列表成员：&any class="list"&&any class="item"&...&/any&&any class="item"&...&/any&&any class="item"&...&/any&&any class="item"&...&/any&&/any&对列表外观的定制化主要集中在.item 元素上， .list 元素仅有 少数的几个样式定义：2. 成员容器 : .item 列表的样式定制主要发生在.item 元素上。在.item 元素内， 可以插入文本、徽章、图标、图像（头像、缩略图或大图）、按钮等各种 样式的元素：3. .item : 嵌入文本列表成员中经常需要显示不同规格的文本，比如新闻列表：.item 元素可以使用 h1~h6/p 标签插入不同规格的文本。4. .item : 嵌入图标列表成员的内容中插入图标，比单纯的文字更加生动：要插入图标，需要满足两个条件：1. 在.item 元素上声明图标位置。图标可以位于列表的左侧或右侧， 分别使用.item-icon-left 和.item-icon-right 声明2. 在.item 元素内插入图标 list-inset。5. .item : 嵌入头像很多社交 App 中，一个相当固定的 UI 模式是包含用户头像的信息列表：在 ionic 中，头像被设置为 40x40 固定大小。和插入图标类似，向.item 中插入头像需要满足两个条件：1. 在.item 元素上声明头像位置。头像可以位于列表的左侧或右侧， 分别使用.item-avatar-left 和.item-avatar-right 声明2. 在.item 元素内使用 img 标签插入头像。6. .item : 嵌入缩略图回到今日头条的新闻列表，我们给它加上两张新闻图片：在 ionic中，缩略图被定义为 80px大小，比头像大，适合新闻图片。 和插入头像类似，向.item中插入缩略图需要满足两个条件：1. 在.item 元素上声明缩略图位置。缩略图可以位于列表的左侧或右侧， 分别使用.item-thumbnail-left 和.item-thumbnail-right 声明2. 在.item 元素内使用 img 标签插入头像。注意：将 img 标签放到.item 内容的开头！7. .item : 嵌入大图 item-image8. .item card要插入图标，需要满足两个条件：1. . card 可以让 list 和左右有一些边距2. 在. item-divider 元素定义 list 的头和尾&div class="list card"&&/div&&div class="card"&&div class="item item-divider"&I‘m a Header in a Card!&/div&&div class="item item-text-wrap"&This is a basic Card with some text.&/div&&div class="item item-divider"&I‘m a Footer in a Card!&/div&&/div&4． ionic 界面组件按钮1. 按钮 : .buttonionic 使用.button 样式定义按钮元素：&any class="button"&...&/any&一旦元素应用了.button 样式，就可以继续选用两类预定义样式来进一步 声明元素及其内容的外观：1. 同级样式 - 同级样式与.button 应用在同一元素上，声明元素的位置、配色等。2. 下级样式 - 下级样式只能应用在.button 的子元素上，声明子元素的大小等特征。2. .button : 嵌入图标使用内置的 Ionicons 样式，图标可以很容易地加入到.button 中：&a class="button"&&i class="icon ion-home"&&/i&Home&/a&但是更简洁的办法是：直接在.button 上设置样式，这样可以有效减少元素的数目：&a class="button icon-left ion-home"&...&/a& .icon-left - 将图标置于按钮左侧 .icon-right - 将图标置于按钮右侧3. 在列表中使用按钮和插入图标类似，向.item 中插入按钮需要满足两个条件：1. 在.item 元素上声明按钮位置。按钮可以位于列表的左侧或右侧， 分别使用.item-button-left 和.item-button-right 声明2. 在.item 元素内插入按钮。4. button-blockbutton 显示成块元素&button class="button button-calm button-block"&button-light&/button&本文出自 “” 博客，请务必保留此出处标签：
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！ionic 教程
ionic 头部与底部
Header(头部)
Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。
ionic 默认提供了许多种颜色样式，你可以调用不同的样式名，当然也可以自定义一个。
&div class="bar bar-header bar-light"&
&h1 class="title"&bar-light&/h1&
bar-stable
&div class="bar bar-header bar-stable"&
&h1 class="title"&bar-stable&/h1&
bar-positive
&div class="bar bar-header bar-positive"&
&h1 class="title"&bar-positive&/h1&
&div class="bar bar-header bar-calm"&
&h1 class="title"&bar-calm&/h1&
bar-balanced
&div class="bar bar-header bar-balanced"&
&h1 class="title"&bar-balanced&/h1&
bar-energized
&div class="bar bar-header bar-energized"&
&h1 class="title"&bar-energized&/h1&
bar-assertive
&div class="bar bar-header bar-assertive"&
&h1 class="title"&bar-assertive&/h1&
&div class="bar bar-header bar-royal"&
&h1 class="title"&bar-royal&/h1&
&div class="bar bar-header bar-dark"&
&h1 class="title"&bar-dark&/h1&
Sub Header（副标题）
Sub Header同样是固定在顶部，只是是在Header的下面，就算没有写Header这个，Sub Header这个样式也会距离顶部有一个Header的距离。颜色样式同 Header 。
&div class="bar bar-header"&
&h1 class="title"&Header&/h1&
&div class="bar bar-subheader"&
&h2 class="title"&Sub Header&/h2&
Footer(底部)
Footer 是在屏幕的最下方，可以包含多种内容类型。
&div class="bar bar-footer bar-balanced"&
&div class="title"&Footer&/div&
Footer 同上面的 Header，只是把样式名 bar-header 换做 bar-footer 。
&div class="bar bar-footer"&
&button class="button button-clear"&Left&/button&
&div class="title"&Title&/div&
&button class="button button-clear"&Right&/button&
此外，如果底部没有标题，但是又需要右边的按钮，你需要在右侧按钮添加 pull-right如:
&div class="bar bar-footer"&
&button class="button button-clear pull-right"&Right&/button&
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码