ionic的基礎學習（第一篇）

1.ioinc的頭部與底部

1.Header

固定在屏幕的頂端的組件，可包含標題，左右的功能按鈕。（提供不少顏色的樣式，及調用不一樣的樣式名，亦可自定義）

bar-light,bar-stable,bar-positive,bar-calm,bar-balanced,bar-energized,bar-assertive,bar-royal,bar-dark等

例：
<div class="bar bar-header bar-assertive">
<h1 class=‘title’>bar-assertive</h1>
</div>
2.sub Header(副標題)

例：
<div class="bar bar-header bar-positive">
<h2 class="title">標題1</h2>
</div>
<div class="bar bar-subheader">
<h3 class="title">標題2</h3>
</div>

2.Footer(及屏幕下方的內容)

Footer與Header是相同的，只是把bar-header換成bar-footer

例：
<div class="bar bar-footer bar-blanced">
<div class="title">Footer</div>
</div>
例：

<div class="bar bar-footer bar-positive">
<button class="button button-clear">Left</button>
<div class="title">Footer</div>
<button class="button button-positive">Right</button>
</div>

此外，若底部沒有標題，但又須要右側按鈕，則須要在右側按鈕添加pull-right:

例：

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

2.ioinc按扭

按鈕是移動端不可缺乏的部分。默認狀況下，按鈕的樣式爲:display:inline-block.

button-light,button-stable,button-positive,button-calm,button-balanced,button-energized,button-assertive,button-royal,button-dark

button-block樣式按鈕顯示爲：display:block,他將徹底填充父元素寬度，包含了內邊距屬性padding.

button-full樣式，能夠徹底顯示父元素的寬度，不包含內邊距屬性padding.

button-large設置大按妞，button-small設置爲小按妞。

button-outline設置背景爲透明。（無背景）

button-clear設置按妞背景爲透明，且無邊框。（無背景，邊框）

圖標按妞（及在按妞上添加圖標）

例：

<button class="button">
<i class="icon ion-loading-c">Loading...</i>
</button>

<button class="button icon-left ion-home button-positive">
Home
</button>

<button class="button icon-left ion-star button-stable">
star
</button>

<button class="button button-calm icon-right ion-chevron-right">chevron-right</button>

<button class="button icon icon-gear-a">33333</button>

<a class="button button-icon icon ion-settings">555555</a>

<a class="button button-outline icon-right ion-navicon button-banlanced"></a>

 

按妞欄的設置

使用button-bar類來設置按妞欄。可在頭部和內容中添加按扭欄。

例：

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

3.ionic的列表

列表是一個應用普遍的界面元素，在全部的移動APP上都回使用。
可爲基本文字，按妞，圖標和縮略圖等。
列表能夠是任何HTML元素，容器元素須要list類，每一個列表項須要使用item類。
ionList和ionItem可支持各類交互方式，如：滑動編輯，拖動排序，以及刪除項。

基本用法：

<ul class="list">
<li class="item">
......
</li>
</ul>

列表分割符：

使用item-divider類來爲列表建立分隔符，默認狀況下，列表項以不一樣的顏色和字體加粗來區分，但你也能夠定製它。

<div class="list">
<div class="item item-divider">11111111</div>
<a class="list" href="#">22222</a>
...
</div>
帶圖標列表：

item-icon-left:圖標在左側；
item-icon-right:圖標在右側；
列表項在使用<a>和<button>時，若右側未添加圖標，則會自動添加上箭頭號。

<div class="list">
<a class="item item-icon-left"> //圖標在左側
<i class="icon ion-email"></i>
Check mail
</a>
<a class="item item-icon-right"> //圖標在右側
<i class="icon ion-chatbubble-working"></i>
Call Ma
</a>
<a class="item item-icon-left item-icon-right"> //圖標在左右兩側
<i class="icon ion-mic-a"></i>
Record album
<span class="item-note"> //註釋（item-note）
Gammey
</span>
</a>
<a class="item item-icon-left">
<i class="icon ion-person-stalker"></i>
Friends
<span class="badge badge-assertive">8</span> //badge標記元素
</a>
</div>

按鈕列表：

用item-button-left和item-button-right類把按鈕放在列表中。

例：

<div class="list">
<div class="item item-button-right">
Call Me
<button class="button button-positive">
<i class="icon icon-ios-telephone"></i>
</button>
</div>
......
</div>

帶頭像的列表：

用item-avatar來建立一個帶頭像的列表：

<div class="list">
<a class="item item-avater" href="">
<img src="venkman.jpg">
<h3>Venkman</h3>
<p>back off.man.i</p>
</a>
......
</div>

縮略圖列表

item-thumbnail-left類用於添加左側對齊的縮略圖。item-thumbnail-right添加右側對齊的縮略圖。

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

內嵌列表（inset list）

可在容器中內嵌列表，列表不會顯示完整的寬度。
內嵌列表的樣式是：list list-inset,與常規列表的區別是：他設置了外邊框（margin）.
內嵌列表是陰影效果的，滾動是效果會更好。

例： <div class="list list-inset"> <div class="item"> <Raider of the Lost Ark </div> ...... </div>