ionic中文详解CSS组件(2)


ionic组件

接着上一篇ionic中文详解CSS组件(1),我这里将一些相关组件的介绍合在一起,给出综合例子和显示效果,方便自己查阅。另外官网的JS API介绍文档有问题,国内访问不能跳转,请参考我的另一篇ionic中文javascript API.

教程索引:(持续更新)
ionic中文教程

教程逐步迁移到github,欢迎点星星哦!

ionic中文详解CSS组件(2)
转载请注明出处:http://www.fed123.com/2014/10/09/2014_ionic_api_css1/

ionic中文详解CSS组件1

参看ionic中文详解CSS组件(1)
http://www.fed123.com/2014/08/09/2014_ionic_api_css/

range范围选择

range组件用于在某个范围内选择值。

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

ionic中文详解CSS组件(2)

select下拉选框

下拉框用于在多个候选项中选择一个值,不同的浏览器表现形式不一样。注意item-select样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

ionic中文详解CSS组件(2)

tabs组件

  1. tabs是水平排列的button或link,用于切换视图。是一种很常用的导航方法。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="tabs">
    <a class="tab-item">
    Home
    </a>
    <a class="tab-item">
    Favorites
    </a>
    <a class="tab-item">
    Settings
    </a>
    </div>

ionic中文详解CSS组件(2)

  1. 仅有图标的tabs
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <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>

ionic中文详解CSS组件(2)

  1. icon在上,下有文字的tabs,注意tabs-icon-top样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <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>

ionic中文详解CSS组件(2)

  1. icon在左的tabs,注意tabs-icon-left标签
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <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>

ionic中文详解CSS组件(2)

grid系统

ionic的网格系统采用的是 CSS Flexible Box Layout Module标准,所有支持ionic的设备都支持flexbox。可以用row样式指定行,用col样式指定列。

  1. 平均分的grid
    1
    2
    3
    4
    5
    6
    7
    <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>

ionic中文详解CSS组件(2)

  1. 指定列宽的grid
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <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>

ionic中文详解CSS组件(2)

1
2
3
4
5
6
7
8
9
10
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%
  1. 有偏移量的grid
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <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>

ionic中文详解CSS组件(2)

1
2
3
4
5
6
7
8
9
10
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%
  1. 纵向对其的grid
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <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>

ionic中文详解CSS组件(2)

  1. 响应式grid
    1
    2
    3
    4
    5
    6
    <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>

ionic中文详解CSS组件(2)

1
2
3
4
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组件(2)
你也可以修改ionic.css,由于使用的sass,可以修改_variables.scss文件来扩展或修改配色。

padding

ionic中许多组建都有默认的padding。你也可以修改,通过如下的样式

  1. padding, Adds padding around every side.
  2. padding-vertical, Adds padding to the top and bottom.
  3. padding-horizontal, Adds padding to the left and right.
  4. padding-top, Adds padding to the top.
  5. padding-right, Adds padding to the right.
  6. padding-bottom, Adds padding to the bottom.
  7. 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

谢谢!

转载请注明出处:http://www.fed123.com/2014/10/09/2014_ionic_api_css1/

欢迎关注皓眸学问公众号(扫描左侧二维码),每天好文、新技术!任何学习疑问或者工作问题都可以给我留言、互动。T_T 皓眸大前端开发学习 T_T

未经允许不得转载:皓眸大前端 » ionic中文详解CSS组件(2)

赞 (1)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址