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>

相關標籤/搜索