ionic-CSS：ionic 表单和输入框

ylbtech-ionic-CSS：ionic 表单和输入框

 

1.返回顶部

一、

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>

尝试一下 »

二、

2.返回顶部

 

3.返回顶部

 

4.返回顶部

 

5.返回顶部

一、

http://www.runoob.com/ionic/ionic-form-input.html

二、

 

6.返回顶部

 

做者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归做者和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文链接，不然保留追究法律责任的权利。