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/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

ionic-CSS:ionic 表单和输入框的更多相关文章

  1. (10)用css建立表单

    1.用css建立表单 本篇资料主要介绍使用css设置表单元素的方法. 表单是网页与用户交互所不可缺少的元素,表单是网页的访问者进行交互的接口,例如大家都常遇到的:网上注册.网上登录.网上交易.网上投票 ...

  2. 学习笔记 第十章 使用CSS美化表单

    第10章   使用CSS美化表单 [学习重点] 正确使用各种表单控件 熟悉HTML5新增的表单控件 掌握表单属性的设置 设计易用性表单页面 10.1  表单的基本结构 表单包含多个标签,由很多控件组成 ...

  3. 不让input表单的输入框保存用户输入的历史记录

    如何不让input表单的输入框保存用户输入的历史记录.  有时我们在设计网页时不想让表单保存用户输入历史记录,比如一些隐私数据,或一些冲值卡 <input name="test&quo ...

  4. 纯CSS实现表单验证

    ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...

  5. 清除表单input输入框内数据

    清除表单input输入框内数据 1. $(':input','#addVoucherType') //'#addVoucherType'表单id .not(':button') .val('') .r ...

  6. 如何disabled禁用所有表单input输入框元素

    转载地址:https://www.zhangxinxu.com/wordpress/?p=8568 一.pointer-events:none和覆盖层方法的问题 经常会遇到需求,需要禁用div中或者f ...

  7. css表格表单和统筹

    css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...

  8. CSS之表单元素

    表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站&l ...

  9. 应用Css美化表单

    原来的效果  美化之后的效果  实现代码 <style> .container { margin:0auto; width:620px; } fieldset { padding:18px ...

随机推荐

  1. Tool ALL Framework

    //https://www.cnblogs.com/jiftle/p/10895260.html C++ 资源大全 关于 C++ 框架.库和资源的一些汇总列表,内容包括:标准库.Web应用框架.人工智 ...

  2. Andrdoid中对应用程序的行为拦截实现方式之----从底层C进行拦截

    之前的一篇概要文章中主要说了我这次研究的一些具体情况,这里就不在多说了,但是这里还需要指出的是,感谢一下三位大神愿意分享的知识(在我看来,懂得分享和细致的人才算是大神,不一定是技术牛奥~~) 第一篇: ...

  3. 使用SpringBoot AOP 记录操作日志、异常日志

    平时我们在做项目时经常需要对一些重要功能操作记录日志,方便以后跟踪是谁在操作此功能:我们在操作某些功能时也有可能会发生异常,但是每次发生异常要定位原因我们都要到服务器去查询日志才能找到,而且也不能对发 ...

  4. JCF——工具类

  5. js文字转语音(speechSynthesis)

    环境: windows 官网网址: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis 基础使用: var msg = n ...

  6. RN 真机roload

    第四步:打开调试菜单 手机设备可以通过摇一摇设备打开调试菜单,也可以打开调试菜单. 可因为是平板,摇一摇不是太方便,可以在电脑端运行命令来打开调试菜单,但有时却又无法打开调试菜单(如果是使用真机调试, ...

  7. 使用python发送163邮件 qq邮箱

    使用python发送163邮件 def send_email(title, content): import smtplib from email.mime.multipart import MIME ...

  8. mongodb update操作

    //修改字段名称,把synonymsList表的name_status修改为status db.getCollection('synonymsList').update({}, {$rename : ...

  9. Dubbo入门到精通学习笔记(七):基于Dubbo的分布式系统架构介绍(以第三方支付系统架构为例)、消息中间件的作用介绍

    文章目录 架构简单介绍 消息中间件在分布式系统中的作用介绍 消息中间件的定义 消息中间件的作用 应用场景 JMS(Java Message Service) JMS消息模型 实现了JMS规范的消息中间 ...

  10. Guava环境设置

    Guava本地环境设置 这部分指导如何下载和设置Java在机器上.请按照以下步骤来设置环境. Java SE免费提供链接:下载Java.所以,根据操作系统下载对应版本. 按照说明下载java和运行.e ...