ionic中文详细CSS组件（1）

Header

Header是固定在屏幕顶部的组件。可以包含如标题和左右的功能按钮。Sub Header同样是固定在顶部，只是是在Header的下面，就算没有写Header这个，Sub Header这个样式也会距离顶部有一个Header的距离。
如：

1	Header Sub Header

皓眸大前端
仔细的读者可能发现，我在header和subheader里面各自放了两个按钮，我并没有定位，ionic会自动将两个分开在两边。经测试，ionic会自动把header或subheader里面的最后一个图标靠右，其他的靠左依次摆开。

Footer

footer是显示在屏幕底部的边栏，你可以用这个做导航栏或者添加一些菜单操作，示例如下：

1	Left Right

皓眸大前端
值得注意的是，在bar-footer和bar-header里面一样，class=title的元素都会被自动居中。如果没有的话，会自动向左排列。可以使用如下pull-right方式让其靠右排列：（header里面也一样）

1

Right

button

1. button的默认情况是按照display: inline-block来显示，宽度是随其内部文字长度增长的。
   有许多不同的显示样式。

   1	Default button-light button-stable button-positive button-calm button-balanced button-energized button-assertive button-royal button-dark

皓眸大前端

1. 如果想让button占满父元素宽度，父元素没有padding的话，就是屏幕宽度，需要加上 button-block 样式

   1	Full Width Block Button

皓眸大前端

1. 当然还有可以控制button大小的默认样式，button-small，button-large

   1	Small Button Large Button

皓眸大前端

1. 还有只显示框线的button，样式button-outline

   1	Outlined Button

皓眸大前端

1. 还有不显示框的button，样式button-clear

   1	Clear Button

皓眸大前端

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

   1	Loading... Home Favorites Learn More Back Reorder

皓眸大前端

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

   1	Header Buttons Edit Header Buttons Edit

皓眸大前端
皓眸大前端

1. 一组button，注意button-bar样式，可以与其他的icon组合

   1	First Second Third

皓眸大前端

List

1. list列表是一个比较常用的组件，list views支持很多的交互操作，比如编辑，划屏幕编辑，拖拽排序，下拉刷新等等。可以参看javascript API中的list介绍，这里给个综合的例子：

   1	{{item.title}} {{item.description}} Share Edit

皓眸大前端
上图中那个有一行是向左划屏出现的效果。

1. list分栏，主意item-divider样式

   1	Candy Bars Butterfinger ...

皓眸大前端

1. 带有icon的list，可以通过i标签添加icon到item中，通过item-icon-left或item-icon-right指定icon在左边还是右边。下面的例子中使用a或button标签做每个item，主要是为了让这每个item可以tappable，还有一个特点是当没有添加任何icon时，会自动在右边添加一个小的向右的箭头图标。直接看例子：

   1	Check mail Call Ma Record album Grammy Friends 0

皓眸大前端

1. 带有button的list，注意item-button-right or item-button-left样式

   1	Call Ma ...

皓眸大前端

1. 带有头像的item，主意item-avatar样式

   1	Venkman Back off, man. I'm a scientist. ...

皓眸大前端

1. 带有缩略图的list，注意item-thumbnail-left 和 item-thumbnail-right样式，可以指定缩略图不同的显示位置。

   1	Pretty Hate Machine Nine Inch Nails ...

皓眸大前端

1. 表格样式的list，这个主要是有了margin的样式，显示两边的框线。注意样式list list-inset。可以参考后面的inset-forms效果。

   1	Raiders of the Lost Ark ...

皓眸大前端

卡片card

1. card卡片一起整洁内容涵盖丰富的表现形式，在应用中使用的越来越多。card默认样式带有box-shadow，由于性能的原因，和他类似的元素像list list-inset 并没有shadow。如果你有很多的card，每个card都有很多子元素，建议使用inset list。下面是一个简单的带有footer和header的card。

   1	I'm a Header in a Card! This is a basic Card with some text. I'm a Footer in a Card!

皓眸大前端

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

   1	Enter home address Enter phone number Enter wireless password Enter card information

皓眸大前端

1. 带有图像的组合显示的card

   1	Pretty Hate Machine Nine Inch Nails Start listening

皓眸大前端

1. card显示风格的示例。该实例综合多种元素，主意item-avatar，item-body，item-divider等样式

   1	Marty McFly November 05, 1955 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. 1 Like 5 Comments Like Comment Share

皓眸大前端

表单输入

关于html5支持的输入类型，参考我的另外一篇HTML5输入类型

1. 基本的表单，主意textarea标签，其他的主意placeholder属性

   1

皓眸大前端

1. 带有标签的输入框,注意input-label样式

   1	Username Password

皓眸大前端

1. 堆栈式的表单，注意item-stacked-label样式

   1	First Name Last Name Email

皓眸大前端

1. 动态显示标签的堆栈式表单，注意item-floating-label样式，而且这个是和input-label样式的元素对应的，两者搭配使用。

   1	First Name Last Name Email

皓眸大前端

1. 默认的form是满屏宽度的，还有一种 inset form 是带有padding的，类似inset list的样式。

   1

皓眸大前端

1. 内嵌输入样式，和form一样，这种输入框并不是100%宽的。注意item-input-inset样式。

   1

   Submit

皓眸大前端

1. 带有icon的输入框，可以很轻松的给item-input元素添加icon，也可以添加placeholder内容

   1

皓眸大前端

1. header上的输入框

   1

   Cancel

皓眸大前端

Toggle选择

toggle是一种比较容易操作的多选框，类似于checkbox，只不过表现上更容易操作，这里是用label标签包裹toggle组件，为了是更容易操作。

1

HTML5 ...

皓眸大前端

checkbox多选框

多选框是一种常见的html组件，这里同样使用label包裹多选框，为了方便实现tap操作，label标签中可以使用checkbox-assertive来指定选中激活时的颜色。

1	Flux Capacitor ...

皓眸大前端

radio单选框

通过item-radio来表示单选框，每个都有相同的name属性，radio-icon样式的标签用来指定显示勾选的icon。这里同样使用label包裹整个组件，为了方便操作

1

Go ...

皓眸大前端

ionic中文详解CSS组件2

参看ionic中文详解CSS组件（2）
http://www.haomou.net/2014/10/09/2014_ionic_api_css1/