ionic css布局介绍(二)

5． ionic 界面组件 表单输入
1.输入组件容器 : .item-input
在 ionic 中，各种输入组件被定义成不同的 HTML 模板，以便将描述标签和输入元素 打包在
一起。在这个模板的根元素上，需要声明.item-input 样式：
<any class="item-input">...</any>

不同的输入元素有不同的模板定义。比如，文本输入通常包含一个描述标签：
<div class="item-input">
<label class="input-label">用户名</label>
<input placeholder="请输入你的用户账号" type="text">
</div>
ionic 预定义了文本输入、开关、复选按钮、单选按钮、选择框、滑动条等常用 输入组件
的样式：

2. 文本输入 : input[type="text"]
文本输入通常包含一个文本 input 元素和一个描述型标签：

在 ionic 中，使用以下 HTML 模板建立一个带有文本标签的输入框：
<any class="item-input">
<span class="input-label">...</span>
<input placeholder="..." type="text">
</any>

对于多个输入组件，可以将它们放到一个列表中，让表单更加整齐：
<any class="list">
<any class="item item-input">...</any>
<any class="item item-input">...</any>
...
</any>

3. 文本输入：使用占位符做标签
有时可以将描述标签省略，这样可以获得一种简洁的效果：

这是 input 元素原生的功能，设置其 placeholder 属性 即可实现：
<label class="item item-input">
<i class="icon ion-ios-unlocked-outline positive"></i>
<input type="password" placeholder="请输入您的密码">
</label>

4. 文本输入：堆叠式标签
堆叠式标签意味着将描述性标签占据单独的一行：

使用.item-stacked-label 样式声明堆叠式标签：
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<input type="text" placeholder="me@vucek.com">
</label>

5.开关 : .toggle input[type="checkbox"]
开关通常用来设置两种状态 - 开启和关闭：

正如上图中所见，开关的可视部件包括两部分：滑轨（ .track）和手柄（ .handle）。 ionic
使用如下 HTML 模板创建开关组件：
<any class="toggle">
<input type="checkbox">
<any class="track">
<any class="handle"></any>

</any>
</any>

开关也有配色方案样式： .toggle-{color}，用来改变滑轨的背景色。
6.复选按钮
复选框通常用来在一组列表中选中部分成员：

和开关一样，复选按钮也是基于 HTML 的 checkbox input 实现的。使用如下的 HTML 模板声
明复选按钮：
<any class="item-input">
<any class="checkbox">
<input type="checkbox">
</any>
</any>
你也许已经猜到，复选按钮的配色方案样式为： .checkbox-{color}。

7.单选按钮 : .item-radio input[type="radio"]
单选按钮用来从一组选择中作出仅仅一个选择：

正如上图所见，单选按钮的可视部件包括两部分：选中图标（ .radio-icon） 和描述内容
（ .item-content），你可以在.item-content 随便添加 内容。
单选按钮基于 HTML 的 radio input 元素实现。使用如下的 HTML 模板 声明单选按钮：
<any class="item-radio">
<input name="{group-name}" type="radio">
<any class="item-content">...</any>
<any class="radio-icon ion-checkmark"></any>
</any>

单选按钮通常不单独使用，将他们放入一个列表中：
<any class="list">
<any class="item item-radio">...</any>

<any class="item item-radio">...</any>
...
</any>

需要注意的是， group-name 决定了单选按钮的分组，所以对于互斥的选择项，必须 将它们
的 group-name 设置为相同的名称。
8.滑动条 : .range input[type="range"]
range 是 HTML5 新引入的元素，常用来进行连续值的调节：

从上图可以看到，滑动条的可视部件包括三部分：左右图标和中间的滑动条。 图标是可选
的，当不用图标时，滑动条将占据整个宽度。
在 ionic 中，使用如下 HTML 模板声明滑动条：
<any class="range">
<any class="icon {left-icon-name}"></any>
<input name="{range-name}" type="range">
<any class="icon {right-icon-name}"></any>
</any>

使用.range-{color}样式声明滑动条的配色方案，这主要影响滑轨的颜色。

9.选择框 : .item-select select
在每个平台上，选择框的表现形式都不一样，例如，在 PC 上，是一个传统的下拉框，在 Android
是一个单选弹出窗，而 iOS 上是一个覆盖半个窗体的定制滚动器：

通常总是将选择框与文字一起放入列表条目中，使用如下 HTML 模板创建选择框条目：
<label class="item-input item-select">
<any class="input-label"></any>
<select>
<option>...</option>
<option>...</option>
...
</select>
</label>

6． 界面组件选项卡

1. 选项卡 : .tabs

选项卡是一个可以包含多个按钮或链接的容器，通常用于提供一致的导航体验。 ionic 中
使用.tabs 样式声明选项卡，使用.tab-item 样式声明选项卡 成员
<any class="tabs">
<any class="tab-item">...</any>
<any class="tab-item">...</any>
...
</any>
选项卡默认地位于屏幕底部。一旦元素应用了.tabs 样式，就可以继续 选用三类预定义样
式来进一步声明元素及其内容的外观：

1. 同级样式 - 同级样式与.tabs 应用在同一元素上，声明选项卡的位置、配色等。
2. 下级样式 - 下级样式只能应用在.tabs 的子元素上，声明子元素的大小等特征。
3. 上级样式 - 上级样式应用于.tabs 的父元素中，声明选项卡的平台特征。

2.tab-item : 使用图标
选项卡的选项默认的只包含文字，使用图标会使其更加生动：比如 微博（ weibo）和微信
（ wechat）：

要在某个选项元素中插入图标，需要注意两点：
1. 使用 i 标签在.tab-item 中插入图标
2. 在.tabs 容器上使用.tabs-icon-{position}声明图标位置。
有三种方式定义图标位置：
 .tabs-icon-top - 将图标置于文字之上
 .tabs-icon-left - 将图标置于文字左侧
 .tabs-icon-only - 只使用图标，不显示文字

3. .tab-item : 使用徽章
微信（ wechat）的选项卡中第三项包含了一个红色的信息元素，被称为徽章：

要在.tab-item 内包含徽章，需要注意两点：
使用.badge 样式插入徽章元素
在.tab-item 同级声明.has-badge 样式
<any class="tabs">
<any class="tab-item has-badge">
<any class="badge">...</any>
</any>

...
</any>

4. .tabs : 顶部选项卡
默认情况下，选项卡位于屏幕底部， 可以使用.tabs-top 样式将选项卡置于顶部。

顶部选项卡应用也很广泛：

5. .tab-striped .tabs: 条带风格选项卡
条带风格的选项卡起源于 Android 平台，它使用一个细长的条带表示选项的选中状态：

在 ionic 中，使用.tabs-striped 样式声明条带风格选项卡：
<any class="tabs-striped">
<any class="tabs">
<any class="tab-item">...</any>
<any class="tab-item">...</any>
...
</any>
</any>

7． 定制布局 栅格系统
1. 栅格系统
ionic 的栅格系统采用了 CSS3 的弹性盒（ Flexible Box）模型，这使得它与大多数 栅格系
统都有所区别。
Flex 布局主要思想是让容器有能力改变其子元素的宽度、高度甚至先后顺序， 从而以最佳
方式填充可用空间。 CSS3 引入 Flex 容器的主要目的是为了适应所 有类型的显示设备和屏
幕大小：

在 ionic 中使用栅格系统主要使用两个类：
 .row - 在容器元素上使用.row 类，表示将其设置为弹性容器，即 Flexible Box。
 .col - 在子元素上使用.col 类，其扩展系数和收缩系数都被设置为 1。这意味着 所
有的子元素将平分容器的宽度。

2. .col : 默认的定宽列
在 ionic 的栅格中，每一行的各列默认是等宽的，这使得实现一个图片 浏览界面非常简单。
下图是 instagram app 的截图：

3. .col-{width-percent} : 指定列宽
当然，我们也可以显式地指定某些列的宽度。 ionic 提供了一些预置的 CSS 类， 供我们
快速指定列宽：

.col-10 - 占据容器 10%宽度
.col-90 - 占据容器 90%宽度

如果你有特殊的需求，比如，非要指定 78%的宽度，可以这样：
.col-78{
-webkit-box-flex: 0;
-webkit-flex: 0 0 78%;
-moz-box-flex: 0;
-moz-flex: 0 0 %78;
-ms-flex: 0 0 78%;
flex: 0 0 78%;
}

4. .col-{width-percent} : 指定列宽

windows phone 的 metro 风格在信息展示方面有很大的优势，虽然携程的 APP 没有突出这一
点:-( ：

通过定制栅格的列宽，我们可以简单地实现类似的界面。
5. .col-offset-{width-percent} : 指定列偏移
列可以从默认位置偏移， ionic 预置了一些 CSS 类供我们快速设置列偏移：

.col-offset-10 - 偏移默认位置 10%容器宽度

.col-offset-90 - 偏移默认位置 90%容器宽度
这实际上是通过设置子元素的 margin-left 样式实现的，所以如果你需要让它 偏移正常位
置 78%，可以这样：

.col-offset-78{
margin-left:78%;
}

6. .col-{align} : 列纵向对齐
如果一行中各元素的高度不一样，那么比较矮的那些元素将自动被拉伸以适应 整行的
高度。
有时你不想这样，希望那些元素保持自身的高度。 ionic 提供了一些预置的 CSS 类用来
指定这些元素纵向的对齐方式：
.col-top - 让元素纵向顶对齐
.col-center - 让元素居中对齐
.col-bottom - 让元素向底对齐

这是通过设置元素的 CSS3 样式 align-self 来实现的。

交流QQ群：187269144 

QQ群2：438443293

QQ群3：248403526