ionic之單選框
- 黄舟原創
- 2017-02-16 14:00:09961瀏覽
1、實例背景
ionic單選框用的是radio，設定樣式item-radio
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>ionic之单选框</title>
<link rel="stylesheet" href="../css/ionic.css" />
<script type="text/javascript" src="../js/angular/angular.js" ></script>
<script type="text/javascript" src="../js/ionic.js"></script>
<script type="text/javascript" src="../js/ionic-angular.js" ></script>
<script type="text/javascript" src="../js/ionic.bundle.js" ></script>
</head>
<body>
<p class="content has-header">
<p class="list">
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<p class="item-content">
一月
</p>
<i class="radio-icon ion-checkmark "></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<p class="item-content">
二月
</p>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<p class="item-content">
三月
</p>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<p class="item-content">
四月
</p>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<p class="item-content">
五月
</p>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<p class="item-content">
六月
</p>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<p class="item-content">
七月
</p>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<p class="item-content">
八月
</p>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<p class="item-content">
九月
</p>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<p class="item-content">
十月
</p>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<p class="item-content">
十一月
</p>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<p class="item-content">
十二月
</p>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<p class="item-content">
十二月
</p>
<i class="radio-icon ion-checkmark"></i>
</label>
</p>
</p>
</body>
</html>
