list
类同样可以用于 input 元素。item-input
和item
类指定了文本框及其标签。
Ionic 更倾向于在元素<label>
外创建item-input
, 这样无论任何某一行的任何部位被点击的时候都可以进入输入状态.
以下实例中,默认为100%宽度(左右两侧没有边框),并使用placeholder
属性设置输入字段预期值的提示信息。 当用户开始输入的时候Placeholder
标签就会隐藏掉, 注意正确使用<textarea>
的多行输入.
<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 的左侧。同时你还可以使用placeholder
。
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</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"
</label>
</div>
<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
类带有阴影。 另外, 如果列表的父元素有 padding
那么当前元素同样会有一个内嵌的表现.
<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>
<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="Search">
</label>
<button class="button button-clear">
Cancel
</button>
</div>