ionic.css界面组件：表单

时间 2019-11-15

原文原文链接

一、输入组件容器：css

<any class="item-input">...</any>html

不一样的输入元素有不一样的模板定义。好比，文本输入一般包含一个描述标签：ionic

<div class="item-input">
    <label class="input-label">用户名</label>
    <input type="text" placeholder="请输入你的用户帐号">
</div>

ionic预约义了文本输入、开关、复选按钮、单选按钮、选择框、滑动条等经常使用输入组件的样式：spa

example:
scala

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
	<link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body>
        <!--头部-->
	<div class="bar bar-header">
		<h1 class="title">表单输入</h1>
	</div>
	
	<div class="scroll-content has-header padding">
	
		<div class="item-input">
			<span class="input-label">帐号</span>
			<input type="text" placeholder="zhang san">
		</div>
		
		<div class="item-input">
			<span class="input-label">口令</span>
			<input type="password" placeholder="********">
		</div>
	</div>
</body>
</html>