Ionic Css樣式詳解

Header是固定在屏幕頂部的組件。可以包含如標題和左右的功能按鈕。Sub Header同樣是固定在頂部，只是是在Header的下面，就算沒有寫Header這個，Sub Header這個樣式也會距離頂部有一個Header的距離。

如：

1

<ion-view> <ion-content class="no-header"> <div class="bar bar-header bar-royal"> <a href="#/app/capture" class="button button-icon icon ion-gear-a"></a> <h1 class="title">Header</h1> <a href="#/app/playlists" class="button button-icon icon ion-heart"></a> </div> <div class="bar bar-subheader"> <h2 class="title">Sub Header</h2> <a href="#/app/playlists" class="button button-icon icon ion-ios7-undo-outline"></a> <a href="#/app/capture" class="button button-icon icon ion-ios7-redo-outline"></a> </div> </ion-content> </ion-view>

仔細的讀者可能發現，我在header和subheader里面各自放了兩個按鈕，我並沒有定位，ionic會自動將兩個分開在兩邊。經測試，ionic會自動把header或subheader里面的最后一個圖標靠右，其他的靠左依次擺開。

Footer

footer是顯示在屏幕底部的邊欄，你可以用這個做導航欄或者添加一些菜單操作，示例如下：

1	<div class="bar bar-footer bar-balanced"> <button class="button button-clear">Left</button> <div class="title"> <button ng-click="captureVideo();" class="button button-clear button-icon icon ion-ios7-videocam-outline"></button></div> <button class="button button-clear">Right</button> </div>

值得注意的是，在bar-footer和bar-header里面一樣，class=title的元素都會被自動居中。如果沒有的話，會自動向左排列。可以使用如下pull-right方式讓其靠右排列：（header里面也一樣）

1	<div class="bar bar-footer"> <button class="button button-clear pull-right">Right</button> </div>

button

1. button的默認情況是按照display: inline-block來顯示，寬度是隨其內部文字長度增長的。
   有許多不同的顯示樣式。

   1

   <button class="button"> Default </button> <button class="button button-light"> button-light </button> <button class="button button-stable"> button-stable </button> <button class="button button-positive"> button-positive </button> <button class="button button-calm"> button-calm </button> <button class="button button-balanced"> button-balanced </button> <button class="button button-energized"> button-energized </button> <button class="button button-assertive"> button-assertive </button> <button class="button button-royal"> button-royal </button> <button class="button button-dark"> button-dark </button>

1. 如果想讓button占滿父元素寬度，父元素沒有padding的話，就是屏幕寬度，需要加上 button-block 樣式

   1	<button class="button button-full button-positive"> Full Width Block Button </button>

1. 當然還有可以控制button大小的默認樣式，button-small，button-large

   1	<button class="button button-small button-assertive"> Small Button </button> <button class="button button-large button-positive"> Large Button </button>

1. 還有只顯示框線的button，樣式button-outline

   1	<button class="button button-outline button-positive"> Outlined Button </button>

1. 還有不顯示框的button，樣式button-clear

   1	<button class="button button-clear button-positive"> Clear Button </button>

1. 帶icon的button，可以控制icon的位置，直接看代碼

   1

   <button class="button"> <i class="icon ion-loading-c"></i> Loading... </button> <button class="button icon-left ion-home">Home</button> <button class="button icon-left ion-star button-positive">Favorites</button> <a class="button icon-right ion-chevron-right button-calm">Learn More</a> <a class="button icon-left ion-chevron-left button-clear button-dark">Back</a> <button class="button icon ion-gear-a"></button> <a class="button button-icon icon ion-settings"></a> <a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>

1. 放在header的button，注意button-icon樣式和button-clear樣式

   1

   <div class="bar bar-header"> <button class="button icon ion-navicon"></button> <h1 class="title">Header Buttons</h1> <button class="button">Edit</button> </div> <div class="bar bar-header"> <button class="button button-icon icon ion-navicon"></button> <div class="h1 title">Header Buttons</div> <button class="button button-clear button-positive">Edit</button> </div>

1. 一組button，注意button-bar樣式，可以與其他的icon組合

   1	<div class="button-bar"> <a class="button">First</a> <a class="button">Second</a> <a class="button">Third</a> </div>

List

1. list列表是一個比較常用的組件，list views支持很多的交互操作，比如編輯，划屏幕編輯，拖拽排序，下拉刷新等等。可以參看javascript API中的list介紹，這里給個綜合的例子：

   1

   <ion-list ng-controller="MyCtrl" show-delete="shouldShowDelete" show-reorder="shouldShowReorder" can-swipe="listCanSwipe"> <ion-item ng-repeat="item in items" class="item-thumbnail-left"> <img ng-src="{{item.img}}"> <h2>{{item.title}}</h2> <p>{{item.description}}</p> <ion-option-button class="button-positive" ng-click="share(item)"> Share </ion-option-button> <ion-option-button class="button-info" ng-click="edit(item)"> Edit </ion-option-button> <ion-delete-button class="ion-minus-circled" ng-click="items.splice($index, 1)"> </ion-delete-button> <ion-reorder-button class="ion-navicon" on-reorder="reorderItem(item, $fromIndex, $toIndex)"> </ion-reorder-button> </ion-item> </ion-list>

上圖中那個有一行是向左划屏出現的效果。

1. list分欄，主意item-divider樣式

   1	<div class="list"> <div class="item item-divider"> Candy Bars </div> <a class="item" href="#"> Butterfinger </a> ... </div>

1. 帶有icon的list，可以通過i標簽添加icon到item中，通過item-icon-left或item-icon-right指定icon在左邊還是右邊。下面的例子中使用a或button標簽做每個item，主要是為了讓這每個item可以tappable，還有一個特點是當沒有添加任何icon時，會自動在右邊添加一個小的向右的箭頭圖標。直接看例子：

   1

   <div class="list"> <a class="item item-icon-left" href="#"> <i class="icon ion-email"></i> Check mail </a> <a class="item item-icon-left item-icon-right" href="#"> <i class="icon ion-chatbubble-working"></i> Call Ma <i class="icon ion-ios7-telephone-outline"></i> </a> <a class="item item-icon-left" href="#"> <i class="icon ion-mic-a"></i> Record album <span class="item-note"> Grammy </span> </a> <a class="item item-icon-left" href="#"> <i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a> </div>

1. 帶有button的list，注意item-button-right or item-button-left樣式

   1	<div class="list"> <div class="item item-button-right"> Call Ma <button class="button button-positive"> <i class="icon ion-ios7-telephone"></i> </button> </div> ... </div>

1. 帶有頭像的item，主意item-avatar樣式

   1	<div class="list"> <a class="item item-avatar" href="#"> <img src="venkman.jpg"> <h2>Venkman</h2> <p>Back off, man. I'm a scientist.</p> </a> ... </div>

1. 帶有縮略圖的list，注意item-thumbnail-left 和 item-thumbnail-right樣式，可以指定縮略圖不同的顯示位置。

   1	<div class="list"> <a class="item item-thumbnail-left" href="#"> <img src="cover.jpg"> <h2>Pretty Hate Machine</h2> <p>Nine Inch Nails</p> </a> ... </div>

1. 表格樣式的list，這個主要是有了margin的樣式，顯示兩邊的框線。注意樣式list list-inset。可以參考后面的inset-forms效果。

   1	<div class="list list-inset"> <div class="item"> Raiders of the Lost Ark </div> ... </div>

卡片card

1. card卡片一起整潔內容涵蓋豐富的表現形式，在應用中使用的越來越多。card默認樣式帶有box-shadow，由於性能的原因，和他類似的元素像list list-inset 並沒有shadow。如果你有很多的card，每個card都有很多子元素，建議使用inset list。下面是一個簡單的帶有footer和header的card。

   1	<div class="card"> <div class="item item-divider"> I'm a Header in a Card! </div> <div class="item item-text-wrap"> This is a basic Card with some text. </div> <div class="item item-divider"> I'm a Footer in a Card! </div> </div>

1. 列表形式的card，主意list card 樣式

   1

   <div class="list card"> <a href="#" class="item item-icon-left"> <i class="icon ion-home"></i> Enter home address </a> <a href="#" class="item item-icon-left"> <i class="icon ion-ios7-telephone"></i> Enter phone number </a> <a href="#" class="item item-icon-left"> <i class="icon ion-wifi"></i> Enter wireless password </a> <a href="#" class="item item-icon-left"> <i class="icon ion-card"></i> Enter card information </a> </div>

1. 帶有圖像的組合顯示的card

   1

   <div class="list card"> <div class="item item-avatar"> <img src="avatar.jpg"> <h2>Pretty Hate Machine</h2> <p>Nine Inch Nails</p> </div> <div class="item item-image"> <img src="cover.jpg"> </div> <a class="item item-icon-left assertive" href="#"> <i class="icon ion-music-note"></i> Start listening </a> </div>

1. card顯示風格的示例。該實例綜合多種元素，主意item-avatar，item-body，item-divider等樣式

   1

   <div class="list card"> <div class="item item-avatar"> <img src="mcfly.jpg"> <h2>Marty McFly</h2> <p>November 05, 1955</p> </div> <div class="item item-body"> <img class="full-image" src="delorean.jpg"> <p> This is a "Facebook" styled Card. The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer. </p> <p> <a href="#" class="subdued">1 Like</a> <a href="#" class="subdued">5 Comments</a> </p> </div> <div class="item tabs tabs-secondary tabs-icon-left"> <a class="tab-item" href="#"> <i class="icon ion-thumbsup"></i> Like </a> <a class="tab-item" href="#"> <i class="icon ion-chatbox"></i> Comment </a> <a class="tab-item" href="#"> <i class="icon ion-share"></i> Share </a> </div> </div>

表單輸入

關於html5支持的輸入類型，參考我的另外一篇HTML5輸入類型

1. 基本的表單，主意textarea標簽，其他的主意placeholder屬性

   1	<div class="list"> <label class="item item-input"> <input type="text" placeholder="First Name"> </label> <label class="item item-input"> <input type="text" placeholder="Last Name"> </label> <label class="item item-input"> <textarea placeholder="Comments"></textarea> </label> </div>

1. 帶有標簽的輸入框,注意input-label樣式

   1	<div class="list"> <label class="item item-input"> <span class="input-label">Username</span> <input type="text"> </label> <label class="item item-input"> <span class="input-label">Password</span> <input type="password"> </label> </div>

1. 堆棧式的表單，注意item-stacked-label樣式

   1

   <div class="list"> <label class="item item-input item-stacked-label"> <span class="input-label">First Name</span> <input type="text" placeholder="John"> </label> <label class="item item-input item-stacked-label"> <span class="input-label">Last Name</span> <input type="text" placeholder="Suhr"> </label> <label class="item item-input item-stacked-label"> <span class="input-label">Email</span> <input type="text" placeholder="[e-mail]"> </label> </div>

1. 動態顯示標簽的堆棧式表單，注意item-floating-label樣式，而且這個是和input-label樣式的元素對應的，兩者搭配使用。

   1

   <div class="list"> <label class="item item-input item-floating-label"> <span class="input-label">First Name</span> <input type="text" placeholder="First Name"> </label> <label class="item item-input item-floating-label"> <span class="input-label">Last Name</span> <input type="text" placeholder="Last Name"> </label> <label class="item item-input item-floating-label"> <span class="input-label">Email</span> <input type="text" placeholder="Email"> </label> </div>

1. 默認的form是滿屏寬度的，還有一種 inset form 是帶有padding的，類似inset list的樣式。

   1	<div class="list list-inset"> <label class="item item-input"> <input type="text" placeholder="First Name"> </label> <label class="item item-input"> <input type="text" placeholder="Last Name"> </label> </div>

1. 內嵌輸入樣式，和form一樣，這種輸入框並不是100%寬的。注意item-input-inset樣式。

   1	<div class="list"> <div class="item item-input-inset"> <label class="item-input-wrapper"> <input type="text" placeholder="Email"> </label> <button class="button button-small"> Submit </button> </div> </div>

1. 帶有icon的輸入框，可以很輕松的給item-input元素添加icon，也可以添加placeholder內容

   1	<div class="list list-inset"> <label class="item item-input"> <i class="icon ion-search placeholder-icon"></i> <input type="text" placeholder="Search"> </label> </div>

1. header上的輸入框

   1	<div class="bar bar-header item-input-inset"> <label class="item-input-wrapper"> <i class="icon ion-ios7-search placeholder-icon"></i> <input type="search" placeholder="Search"> </label> <button class="button button-clear"> Cancel </button> </div>

Toggle選擇

toggle是一種比較容易操作的多選框，類似於checkbox，只不過表現上更容易操作，這里是用label標簽包裹toggle組件，為了是更容易操作。

1	<ul class="list"> <li class="item item-toggle"> HTML5 <label class="toggle toggle-assertive"> <input type="checkbox"> <div class="track"> <div class="handle"></div> </div> </label> </li> ... </ul>

checkbox多選框

多選框是一種常見的html組件，這里同樣使用label包裹多選框，為了方便實現tap操作，label標簽中可以使用checkbox-assertive來指定選中激活時的顏色。

1	<ul class="list"> <li class="item item-checkbox"> <label class="checkbox"> <input type="checkbox"> </label> Flux Capacitor </li> ... </ul>

radio單選框

通過item-radio來表示單選框，每個都有相同的name屬性，radio-icon樣式的標簽用來指定顯示勾選的icon。這里同樣使用label包裹整個組件，為了方便操作

1	<div class="list"> <label class="item item-radio"> <input type="radio" name="group"> <div class="item-content"> Go </div> <i class="radio-icon ion-checkmark"></i> </label> ... </div>

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

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

1. 僅有圖標的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>

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

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

1. 平均分的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>

1. 指定列寬的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%

1. 有偏移量的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%

1. 縱向對其的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>

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

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 

 

來自為知筆記(Wiz)