接着上一篇ionic中文详解CSS组件(1),我这里将一些相关组件的介绍合在一起,给出综合例子和显示效果,方便自己查阅。另外官网的JS API介绍文档有问题,国内访问不能跳转,请参考我的另一篇ionic中文javascript API.
range范围选择
range组件用于在某个范围内选择值。
1
| <div class="range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
<div class="list">
<div class="item range range-positive">
<i class="icon ion-ios7-sunny-outline"></i>
<input type="range" name="volume" min="0" max="100" value="33">
<i class="icon ion-ios7-sunny"></i>
</div>
</div>
|
皓眸大前端
select下拉选框
下拉框用于在多个候选项中选择一个值,不同的浏览器表现形式不一样。注意item-select样式。
1
| <div class="list">
<label class="item item-input item-select">
<div class="input-label">
Lightsaber
</div>
<select>
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
</label>
</div>
|
皓眸大前端
tabs组件
- tabs是水平排列的button或link,用于切换视图。是一种很常用的导航方法。
1
<div class="tabs"> <a class="tab-item"> Home </a> <a class="tab-item"> Favorites </a> <a class="tab-item"> Settings </a> </div>
皓眸大前端
- 仅有图标的tabs
1
<div class="tabs tabs-icon-only"> <a class="tab-item"> <i class="icon ion-home"></i> </a> <a class="tab-item"> <i class="icon ion-star"></i> </a> <a class="tab-item"> <i class="icon ion-gear-a"></i> </a> </div>
皓眸大前端
- icon在上,下有文字的tabs,注意tabs-icon-top样式
1
<div class="tabs tabs-icon-top"> <a class="tab-item"> <i class="icon ion-home"></i> Home </a> <a class="tab-item"> <i class="icon ion-star"></i> Favorites </a> <a class="tab-item"> <i class="icon ion-gear-a"></i> Settings </a> </div>
皓眸大前端
- icon在左的tabs,注意tabs-icon-left标签
1
<div class="tabs tabs-icon-left"> <a class="tab-item"> <i class="icon ion-home"></i> Home </a> <a class="tab-item"> <i class="icon ion-star"></i> Favorites </a> <a class="tab-item"> <i class="icon ion-gear-a"></i> Settings </a> </div>
皓眸大前端
grid系统
ionic的网格系统采用的是 CSS Flexible Box Layout Module标准,所有支持ionic的设备都支持flexbox。可以用row样式指定行,用col样式指定列。
- 平均分的grid
1
<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>
皓眸大前端
- 指定列宽的grid
1
<div class="row"> <div class="col col-50">.col.col-50</div> <div class="col">.col</div> <div class="col">.col</div> </div> <div class="row"> <div class="col col-75">.col.col-75</div> <div class="col">.col</div> </div> <div class="row"> <div class="col">.col</div> <div class="col col-75">.col.col-75</div> </div> <div class="row"> <div class="col">.col</div> <div class="col">.col</div> </div>
皓眸大前端
1
| Explicit Column Percentage Classnames
.col-10 10%
.col-20 20%
.col-25 25%
.col-33 33.3333%
.col-50 50%
.col-67 66.6666%
.col-75 75%
.col-80 80%
.col-90 90%
|
- 有偏移量的grid
1
<div class="row"> <div class="col col-33 col-offset-33">.col</div> <div class="col">.col</div> </div> <div class="row"> <div class="col col-33">.col</div> <div class="col col-33 col-offset-33">.col</div> </div> <div class="row"> <div class="col col-33 col-offset-67">.col</div> </div>
皓眸大前端
1
| Offset Column Percentage Classnames
.col-offset-10 10%
.col-offset-20 20%
.col-offset-25 25%
.col-offset-33 33.3333%
.col-offset-50 50%
.col-offset-67 66.6666%
.col-offset-75 75%
.col-offset-80 80%
.col-offset-90 90%
|
- 纵向对其的grid
1
<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row"> <div class="col col-top">.col</div> <div class="col col-center">.col</div> <div class="col col-bottom">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-top"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-center"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-bottom"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div>
皓眸大前端
- 响应式grid
1
<div class="row responsive-sm"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>
皓眸大前端
1
| Responsive Class Break when roughly
.responsive-sm Smaller than landscape phone
.responsive-md Smaller than portrait tablet
.responsive-lg Smaller than landscape tablet
|
color定制
ionic提供的各种配色如下:
皓眸大前端
你也可以修改ionic.css,由于使用的sass,可以修改_variables.scss文件来扩展或修改配色。
padding
ionic中许多组建都有默认的padding。你也可以修改,通过如下的样式
- padding, Adds padding around every side.
- padding-vertical, Adds padding to the top and bottom.
- padding-horizontal, Adds padding to the left and right.
- padding-top, Adds padding to the top.
- padding-right, Adds padding to the right.
- padding-bottom, Adds padding to the bottom.
- padding-left, Adds padding to the left.
动画样式
fade-in
nav-title-slide-ios7
no-animation
reverse
slide-in-left
slide-in-right
slide-in-up
slide-left-right-ios7
slide-left-right
slide-out-left
slide-out-right
slide-right-left-ios7
slide-right-left