ionic 教程
ionic 头部和底部
ion-header-bar
这个是固定在屏幕顶部的一个头部标题栏。如果给它加上'bar-subheader' 这个样式，它就是副标题。
&ion-header-bar align-title="left" class="bar-positive"&
&div class="buttons"&
&button class="button" ng-click="doSomething()"&Left Button&/button&
&h1 class="title"&Title!&/h1&
&div class="buttons"&
&button class="button"&Right Button&/button&
&/ion-header-bar&
&ion-content&
Some content!
&/ion-content&
align-title
(optional)
这个是对齐 title 的。如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。
no-tap-scroll
(optional)
默认情况下，头部标题栏在点击屏幕时内容会滚动到头部，可以将 no-tap-scroll 设置为 true 来禁止该动作。。它的值是布尔值（true/false）。
ion-footer-bar
知道了 ion-header-bar ，理解ion-footer-bar就轻松多啦！只是 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&
&h1 class="title"&Title!&/h1&
&div class="buttons" ng-click="doSomething()"&
&button class="button"&Right Button&/button&
&/ion-footer-bar&
与 ion-header-bar 不同的是，ion-footer-bar 只有 align-title 这个 API。
align-title
(optional)
这个是对齐 title 的。如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。
记住登录状态
重复输入密码ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
作者：Seven_Cld
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法，本文介绍的非常详细，具有参考借鉴价值,需要的朋友可以参考下
这是一个小bug,解决方法有两种：根据做的东西不同选择不同的
&ion-nav-bar class="bar-positive"&
&ion-nav-back-button class="button-icon ion-arrow-left-c"&
&/ion-nav-back-button&
&h2&helloafds&/h2&
&/ion-nav-bar&
&ion-header-bar class="bar-subheader"&
&h1&hello&/h1&
&/ion-header-bar&
上面一种是使用比如有后退，导航的，下面是真正的一个header,一个subheader
&ion-header-bar align-title="left" class="bar-positive"&
&div class="buttons"&
&button class="button" ng-click="doSomething()"&Left Button&/button&
&h1 class="title"&Header&/h1&
&div class="buttons"&
&button class="button"&Right Button&/button&
&/ion-header-bar&
&ion-header-bar align-title="left" class="bar-subheader bar-positive"&
&h1 class="title"&Sub Header!&/h1&
&/ion-header-bar&
其他的说在content上加has-header="true"和has-subheader="true"是不行的。
以上所述是小编给大家介绍的ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具ionicCSS01_头部、底部和按钮
头部导入ionic.min.css
1.ionic 头部与底部
1.1 header头部
1）Header是固定在屏幕顶部的,可以包如标题和左右的功能按钮
2）头部样式通过用class属性名引入，
3）bar和bar-header为必须选项，
4）bar-light表示标题栏背景颜色，不选择默认白底，也可以换成其他属性名bar-stable，bar-positive，bar-calm，bar-balanced，bar-energized，bar-assertive，bar-royal，bar-dark等
5）p和h1标签可以换成其他的块级标签
6）可以在头部标题栏添加按钮
&p class=&bar bar-header bar-dark&&
&button class=&button icon ion-navicon&&&/button&
&h1 class=&title&&Header&/h1&
1.2 sub header副标题
1)Sub Header同样是固定在顶部,位于headr下面，即使没有Header，它的样式举例顶部也有一段距离
2）bar bar-subheader必选，其他样式同header
&p class=&bar bar-subheader bar-calm&&
&h2 class=&title&&Sub Header&/h2&
1.3 Footer(底部)
1）Footer是在屏幕的最下方，可以包含多种内容类型。
2）Footer同上面的Header，只是把样式名bar-header换做bar-footer
&p class=&bar bar-footer bar-balanced&&
&p class=&title&&Footer&/p&
2.ionic按钮
1）button是必选
2）颜色样式属性：button-light，button-stable，button-positive，button-calm，button-balanced，button-energized，button-assertive，button-royal，button-dark
3）添加button-block到按钮使按钮以display: block方式显示.一个block的按钮会100%集成他的父元素的宽度.在下面这个例子当中,按钮包含的内容同时也应用了padding,所以在按钮和显示屏边框之间会有一定的空隙.
4）添加 button-full到按钮不仅将应用display: block到按钮,同时还将移除按钮的左右边距,任何边框圆角也可能被应用.当按钮需要撑满整个屏幕的时候,这种样式将非常有用.另外,按钮的父元素不会 有 padding被应用
5）添加 button-large到按钮会让按钮变大,添加button-small让它变小.
6）添加 button-outline到按钮以应用空白背景,只有边框按钮的风格.按钮文字和边框颜色会使用按钮的颜色样式,就是说button-positive会使文字和边框变成蓝色,背景却是透明的.
7）添加 button-clear会移除按钮的边框.按钮文字和边框颜色会使用按钮的颜色样式,就是说button-positive会使文字的颜色变成蓝色,蓝色背景也将会被无边框取代.
8）添加按钮图标
图标可以使用第三方图标或ionic自带图标（/）图标能可以子元素的形式被放在按钮内部（比如span）,不过,直接把图标分配给按钮将减少DOM的数量.
使用icon-left或icon-right或icon定位图标在按钮的左边或右侧或中间，后面再添加图标的样式
使用button-icon添加仅含有图标的按钮
使用ion-navicon和button-balanced在按钮上添加选项标签图标
&p class=&content has-header has-subheader padding&&
&button class=&button button-positive&&
&i class=&icon ion-loading-c&&&/i&子元素图标
&button class=&button button-positive icon-left ion-home&&直接分配图标&/button&
&button class=&button button-block icon-left ion-star button-positive&&左侧&/button&
&a class=&button button-block icon-right ion-chevron-right button-calm&&右侧&/a&
&button class=&button button-block icon ion-gear-a&&中间&/button&
&a class=&button button-icon icon ion-settings&&&/a&
&a class=&button button-block button-outline icon-right ion-navicon button-balanced&&Reorder&/a&
&button class=&button button-block button-positive&&
Block Button
&button class=&button button-full button-positive&&
Full Width Block Button
注意：由于这里使用的是p布局而不是ionic规定的标签，所以在使用content属性时，p的内部末尾有一部分的内容显示不出来，比如最后一个按钮不显示或者只显示一部分，若要查看效果，可将html文件中的&DOCTYPE html&声明去掉然后在谷歌或safari中打开查看，或者给content加一个高度亦可以。