Ionic2学习基础之Input组件
来源:互联网 发布:vue.js 2.0视频 百度云 编辑:程序博客网 时间:2024/05/23 01:18
ion-input & ion-label
浮动显示标签和固定显示标签
floating :不输入时标签和input一行,当input输入内容后label浮到上一行
stack:固定浮在input上面一行
代码如下:
<ion-list> <ion-item> <ion-label floating>请输入姓名</ion-label> <ion-input placeholder="请输入姓名" > </ion-input> </ion-item> <ion-item> <ion-label stacked>stacked</ion-label> <ion-input placeholder="stacked"></ion-input> </ion-item> <ion-item> <ion-label>normal</ion-label> <ion-input placeholder="normal"></ion-input> </ion-item> </ion-list>
效果:当input输入内容后label浮到上一行
不输入时标签和input一行
ion-textarea
使用如下:
<ion-item><ion-label stacked>Comments</ion-label> <ion-textarea style="border: 1px #8c8c8c solid; padding: 20px;margin-top: 15px;" placeholder="textarea placeholder" [(ngModel)]="comments" minlength="5" maxlength="100" value="Text Area "></ion-textarea></ion-item>
注意:这里的 padding 和 margin
padding 是内边距,padding是在标签边缘往里缩减,而border是在标签的边缘往外扩展
margin 外边距 ,是设置两个标签的间隔,也就是距离;
如图所示:
阅读全文
0 0
- Ionic2学习基础之Input组件
- ionic2-常用组件
- 微信小程序----组件之input
- ionic2 ios input foucus事件
- ionic2-基础环境搭建
- Ionic2中的内置导航组件
- Ionic2自定义组件的使用
- ionic2+ ---九宫格解锁组件
- Bootstrap学习总结笔记(9)-- 基本组件之input输入框组
- ionic2学习文档
- ionic2开发之服务
- ionic2 之 List
- Unity3D组件之 Input输入控制器教程
- 原创:微信小程序之MaterialDesign--input组件
- Vue基础之组件
- Metro UI CSS 学习笔记之 基础组件
- Spark学习之基础相关组件(1)
- Android基础学习之Android 四大组件详解
- UFT-c/s常用WinComboBox ,WinList,WinMenu,WinRadioButton
- Springmvc和mybatis整合
- Json对象与Json字符串的转化、JSON字符串与Java对象的转换
- Akka.net分布式数据传输
- 集合(1)
- Ionic2学习基础之Input组件
- halcon字体显示
- 一个软件大学生的心里话
- [HDU] 3001 Travelling [状压DP]
- 50个简单的Jquery代码
- Excel地址转换
- Ubuntu16.04安装WPS
- Spring-AOP @AspectJ切点函数导读
- 306. Additive Number 自己写的,居然ac了,写一遍比看100遍强,看别人对边界的处理纯属浪费时间,不如自己动手,自己手写才能提高