ionic-CSS:ionic 表单和输入框
2024-08-28 02:18:02
ylbtech-ionic-CSS:ionic 表单和输入框 |
1.返回顶部 |
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、
2.返回顶部 |
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
1、
2、
6.返回顶部 |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
最新文章
- Sicily 1215: 脱离地牢(BFS)
- Win8 app判断网络连接状态
- 在线音乐网站【03】Part one 功能实现
- 《30天自制操作系统》15_day_学习笔记
- python--安装PIL
- PHP.9-HTML+CSS(三)-CSS样式
- R语言数据处理
- Asp.Net MVC4.0 官方教程 入门指南之四--添加一个模型
- 利用Div+CSS整体布局页面的操作流程
- Spark中master与worker的进程RPC通信实现
- python2的比较函数,cmp
- 多线程消息监听容器配置[ 消费者spring-kafka配置文件]
- Java利用for循环输出空心的菱形
- bzoj 1096 仓库建设 -斜率优化
- TreeMap源码学习
- m2a-vm超频的方法
- ioctl参数cmd=2错误
- Java反射机制的浅显理解(这篇文章还没写好,留个草稿给自己看的)
- utuntu下安装pip&;pip3
- Hackers top in China