ionic使用记录------输入组件容器.item-input

输入组件容器 : .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预定义了文本输入、开关、复选按钮、单选按钮、选择框、滑动条等常用输入组件的样式：

对于多个输入组件，可以将它们放到一个列表中，让表单更加整齐：

<any class="list">
    <any class="item item-input">...</any>
    <any class="item item-input">...</any>
    ...
</any>

----------------------------------------------

文本输入 : input[type="text"]

文本输入通常包含一个文本input元素和一个描述型标签：

在ionic中，使用以下HTML模板建立一个带有文本标签的输入框：

<any class="item-input">
    <span class="input-label">...</span>
    <input placeholder="..." type="text">
</any>

-----------------------------------

文本输入：使用占位符做标签

有时可以将描述标签省略，这样可以获得一种简洁的效果：

这是input元素原生的功能，设置其placeholder属性即可实现：

<label class="item item-input">
    <input placeholder="label-text" type="text">
</label>

-------------------------------------------

文本输入：堆叠式标签

堆叠式标签意味着将描述性标签占据单独的一行：

使用.item-stacked-label样式声明堆叠式标签：

<any class="item-input item-stacked-label">
    <any class="input-label">...</any>
    <input placeholder="..." type="text">
</any>

开关 : .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}，用来改变滑轨的背景色。

---------------------------------------------

复选按钮

复选框通常用来在一组列表中选中部分成员：

和开关一样，复选按钮也是基于HTML的checkbox input实现的。使用如下的HTML模板声明复选按钮：

<any class="item-input">
    <any class="checkbox">
        <input type="checkbox">
    </any>
</any>

你也许已经猜到，复选按钮的配色方案样式为：.checkbox-{color}。

-----------------------------------------------------------

单选按钮 : .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设置为相同的名称。

------------------------------------------------------

滑动条 : .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}样式声明滑动条的配色方案，这主要影响滑轨的颜色。

------------------------------------------

选择框 : .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>