ionic 表单和输入框

list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签。

输入框属性：placeholder

以下实例中，默认为100%宽度（左右两侧没有边框），并使用 placeholder 属性设置输入字段预期值的提示信息。

<div class="list">  <label class="item item-input">    <input type="text" placeholder="First Name">  </label>  <label class="item item-input">    <input type="text" placeholder="Last Name">  </label>  <label class="item item-input">    <textarea placeholder="Comments"></textarea>  </label></div>

尝试一下 ?

输入框属性：input-label

使用 input-label 将标签放置于输入框 input 的左侧。

<div class="list">  <label class="item item-input">    <span class="input-label">用户名：</span>    <input type="text">  </label>  <label class="item item-input">    <span class="input-label">密码：</span>    <input type="password">  </label></div>

尝试一下 ?

堆叠标签

堆叠标签通常位于输入框的头部。每个选项使用 item-stacked-label 类指定。每个输入框需要指定 input-label。以下实例也使用了 placeholder 属性来设置信息输入提示。

<div class="list">  <label class="item item-input item-stacked-label">    <span class="input-label">First Name</span>    <input type="text" placeholder="John">  </label>  <label class="item item-input item-stacked-label">    <span class="input-label">Last Name</span>    <input type="text" placeholder="Suhr">  </label>  <label class="item item-input item-stacked-label">    <span class="input-label">Email</span>    <input type="text" placeholder="john@suhr.com">  </label></div>

尝试一下 ?

浮动标签

浮动标签类似于堆叠标签，但浮动标签有一个动画的效果，每个选项需要指定 item-floating-label 类，输入标签需要指定 input-label。

<div class="list">  <label class="item item-input item-floating-label">    <span class="input-label">First Name</span>    <input type="text" placeholder="First Name">  </label>  <label class="item item-input item-floating-label">    <span class="input-label">Last Name</span>    <input type="text" placeholder="Last Name">  </label>  <label class="item item-input item-floating-label">    <span class="input-label">Email</span>    <input type="text" placeholder="Email">  </label></div>

尝试一下 ?

内嵌表单

默认情况下每个输入域宽度都是100%，但我们可以使用 list list-inset 或 card 类设置表单的内边距(padding)，card 类带有阴影。

<div class="list list-inset">  <label class="item item-input">    <input type="text" placeholder="First Name">  </label>  <label class="item item-input">    <input type="text" placeholder="Last Name">  </label></div>

尝试一下 ?

内嵌输入域

使用 list-inset 设置内嵌实体列表。使用 item-input-inset 样式可以内嵌一个按钮。

<div class="list">  <div class="item item-input-inset">    <label class="item-input-wrapper">      <input type="text" placeholder="Email">    </label>    <button class="button button-small">      Submit    </button>  </div></div>

尝试一下 ?

带图标的输入框

item-input 输入框可以很简单的添加图标。图标可以在 <input> 前添加。

<div class="list list-inset">  <label class="item item-input">    <i class="icon ion-search placeholder-icon"></i>    <input type="text" placeholder="Search">  </label></div>

尝试一下 ?

头部输入框

输入框可放置在头部，并可添加提交或取消按钮。

<div class="bar bar-header item-input-inset">  <label class="item-input-wrapper">    <i class="icon ion-ios-search placeholder-icon"></i>    <input type="search" placeholder="搜索">  </label>  <button class="button button-clear">    取消  </button></div>

尝试一下 ?