ionic.css界面組件：表單-單選按鈕

時間 2019-11-15

標籤 ionic.css ionic css 界面組件表單單選按鈕欄目 CSS 简体版

原文原文鏈接

單選按鈕的可視部件包括兩部分：選中圖標（.radio-icon）和描述內容（.item-content），你能夠在.item-content隨便添加內容。css

單選按鈕基於HTML的radio input元素實現。使用以下的HTML模板聲明單選按鈕：html

<any class="item-radio">
    <input type="radio" name="{group-name}">
    <any class="item-content">...</any>
    <any class="radio-icon ion-checkmark {color}"></any>  //ion-checkmark:圖標； {color}：圖標顏色 example：.assertive
</any>

單選按鈕一般不單獨使用，將他們放入一個列表中：ios

<any class="list">
    <any class="item item-radio">...</any>
    <any class="item item-radio">...</any>
    ...
</any>

須要注意的是，group-name決定了單選按鈕的分組，因此對於互斥的選擇項，必須將它們的group-name設置爲相同的名稱。ionic

綜上實例：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-assertive">
		<a class="button icon ion-ios-undo"></a>
		<h1 class="title">確認訂單</h1>
	</div>
	<div class="scroll-content has-header padding">
		<div class="list">
			<div class="item item-divider"><b>請選擇支付方式</b></div>
			
			<label class="item item-radio">
				<input type="radio" name="group">
				<div class="item-content">支付寶客戶端支付</div>
				<i class="radio-icon ion-checkmark assertive"></i>
			</label>
			
			<label class="item item-radio">
				<input type="radio" name="group">
				<div class="item-content">支付寶網頁支付</div>
				<i class="radio-icon ion-checkmark assertive"></i>
			</label>
			
			<label class="item item-radio">
				<input type="radio" name="group" checked>
				<div class="item-content">一鍵支付（無需支付寶帳戶）</div>
				<i class="radio-icon ion-checkmark assertive"></i>
              <i class="radio-icon ion-close assertive"></i>
			</label>
			
		</div>
		<button class="button button-block button-assertive">當即購買</button>
	</div>
</body>
</html>