ionic中文詳解CSS元件（2）

接着上一篇ionic中文詳解CSS元件(1)，我這裡将一些相關元件的介紹合在一起，給出綜合例子和顯示效果，友善自己查閱。另外官網的JS API介紹文檔有問題，國内通路不能跳轉，請參考我的另一篇ionic中文javascript API.

range範圍選擇

range元件用于在某個範圍内選擇值。

<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樣式。

<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元件

1. tabs是水準排列的button或link，用于切換視圖。是一種很常用的導航方法。

   <div class="tabs"> <a class="tab-item"> Home </a> <a class="tab-item"> Favorites </a> <a class="tab-item"> Settings </a> </div>

皓眸大前端

1. 僅有圖示的tabs

   <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>

皓眸大前端

1. icon在上，下有文字的tabs，注意tabs-icon-top樣式

   <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>

皓眸大前端

1. icon在左的tabs，注意tabs-icon-left标簽

   <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樣式指定列。

1. 平均分的grid

   <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>

皓眸大前端

1. 指定列寬的grid

   <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>

皓眸大前端

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

   <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>

皓眸大前端

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

   <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>

皓眸大前端

1. 響應式grid

   <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>

皓眸大前端

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。你也可以修改，通過如下的樣式

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