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>