欢迎光临
梦想从学习开始!

ionic 表单和输入框 | 小熊教程

ionic 表单和输入框

Tips:您正在学习的是ionic 表单和输入框 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8743 ,您可通过标签查询系列课程。祝您学习愉快!

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

输入框属性:placeholder

Tips:您正在学习的是ionic 表单和输入框 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8743 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

以下实例中,默认为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

Tips:您正在学习的是ionic 表单和输入框 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8743 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

使用 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> 

尝试一下 »

赞(0) 打赏
未经允许不得转载:小熊分享邦 » ionic 表单和输入框 | 小熊教程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏