ionic.css界面組件：表單-開關

時間 2019-11-15

標籤 ionic.css ionic css 界面組件表單開關欄目 CSS 简体版

原文原文鏈接

開關 : .toggle input[type="checkbox"]

開關一般用來設置兩種狀態 - 開啓和關閉：css

正如上圖中所見，開關的可視部件包括兩部分：滑軌（.track）和手柄（.handle）。 ionic使用以下HTML模板建立開關組件：html

<any class="toggle">
    <input type="checkbox">
    <any class="track">
        <any class="handle"></any>
    </any>
</any>

樣式默認是綠色，能夠經過 .toggle-{color}來改變顏色，好比：.toggle-dark！example：ios

<label class="toggle toggle-dark">
    <input type="checkbox" checked>
    <div class="track">
	<div class="handle"></div>
    </div>
</label>

將上面代碼放在 .item-toggle裏面是使按鈕定位置：ionic

//conic.css源碼：
.item-toggle .toggle {
  position: absolute;
  top: 10px;
  right: 16px;
  z-index: 3;

綜上：實例：ide

<!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 bar-stable">
		<button class="button button-clear button-positive icon ion-ios-arrow-left">設置</button>
		<h1 class="title">信息</h1>
	</div>
	<div class="scroll-content has-header">
		<ul class="list">
		
			<li class="item item-toggle">
				iMessage
				<label class="toggle toggle-balanced">
					<input type="checkbox">
					<div class="track">
						<div class="handle"></div>
					</div>
				</label>
			</li>
			
			<li class="item item-divider">短信/彩信</li>
			
			<li class="item item-toggle">
				字符計數
				<label class="toggle toggle-dark">
					<input type="checkbox" checked>
					<div class="track">
						<div class="handle"></div>
					</div>
				</label>
			</li>
			
			<li class="item item-toggle item-button-right">
				黑名單
				<a class="button button-clear icon ion-ios-arrow-right"></a>
			</li>
		</ul>
	</div>
</body>
</html>