ionic 学习笔记之 头部与底部
2018-01-08 本文已影响52人
邪人君子
简介
没啥好说的，直接撸代码，参考官方文档
Header
Header是固定在屏幕顶部的组件,ionic 默认提供了许多种颜色样式，你可以调用不同的样式名，先举个完整例子，后面的只给部分代码
<html ng-app="test">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
</head>
<body>
<div class="bar bar-header bar-positive">
<h1 class="title">bar-positive</h1>
</div>
</body>
</html>
效果图
<div class="bar bar-header bar-light">
<h1 class="title">bar-light</h1>
</div>
<div class="bar bar-header bar-stable">
<h1 class="title">bar-stable</h1>
</div>
<div class="bar bar-header bar-positive">
<h1 class="title">bar-positive</h1>
</div>
<div class="bar bar-header bar-calm">
<h1 class="title">bar-calm</h1>
</div>
<div class="bar bar-header bar-balanced">
<h1 class="title">bar-balanced</h1>
</div>
<div class="bar bar-header bar-energized">
<h1 class="title">bar-energized</h1>
</div>
<div class="bar bar-header bar-assertive">
<h1 class="title">bar-assertive</h1>
</div>
<div class="bar bar-header bar-royal">
<h1 class="title">bar-royal</h1>
</div>
<div class="bar bar-header bar-dark">
<h1 class="title">bar-dark</h1>
</div>
默认样式只有以上这些，很明显是不够用的，没关系，下面介绍下怎么使用自定义的颜色样式，我们找到样式设置的地方，照着他的格式写一个我们想要的颜色样式，比如说
比如说我们随便设置一个样式如下
.bar.bar-li {
border-color: #987456;
background-color: #e896f4;
background-image: linear-gradient(0deg, #975314, #684235 50%, transparent 50%);
color: #951753; }
.bar.bar-li .title {
color: #153684; }
.bar.bar-li.bar-footer {
background-image: linear-gradient(180deg, #ab5edf, #a7e586 50%, transparent 50%); }
运行出来的效果是这样的
Sub Header
Sub Header同样是固定在顶部，只是是在Header的下面，就算没有写Header这个，Sub Header这个样式也会距离顶部有一个Header的距离。颜色样式同 Header 。
<div class="bar bar-header bar-li">
<h1 class="title">bar-li</h1>
</div>
<div class="bar bar-subheader bar-royal">
<h2 class="title">Sub Header</h2>
</div>
当然了，如果还想再要一个标题栏放在Sub Header的下面也是可以的，比如说我们自定义一个Sub Header1，看一下效果。同样的，仿照Sub Header的写法写Sub Header1的样式，这里是我写的可以作为参考
.bar-subheader1 {
top: 88px;
height: 44px; }
.bar-subheader1 .title {
height: 43px;
line-height: 66px; }
然后运行一下看看效果
<div class="bar bar-header bar-li">
<h1 class="title">bar-li</h1>
</div>
<div class="bar bar-subheader bar-royal">
<h2 class="title">Sub Header</h2>
</div>
<div class="bar bar-subheader1 bar-energized">
<h2 class="title">Sub Header1</h2>
</div>
妥妥的
Footer
页脚与标题具有相同的颜色选项，只是用来bar-footer代替bar-header。所以这方面不做介绍，我们来看看别的，比如说常用的按钮
<div class="bar bar-footer">
<button class="button button-clear pull-left" style="color:#8866ff">Left</button>
<button class="button button-clear pull-right" style="color:#aee968">Right</button>
</div>
关于按钮的用法，请看下篇
