ionic基礎教程
ionic 安裝
ionic 創(chuàng)建 APP
ionic CSS
ionic 頭部與底部
ionic 按鈕
ionic 列表
ionic 卡片
ionic 表單和輸入框
ionic Toggle(切換開關)
ionic 復選框
ionic 單選框
ionic Range
ionic select
ionic tab(選項卡)
ionic 網格(Grid)
ionic 顏色
ionic JavaScript
ionic 上拉菜單(ActionSheet)
ionic 背景層
ionic 下拉刷新
ionic 復選框
ionic 切換開關操作
ionic 手勢事件
ionic 頭部和底部
ionic 列表操作
ionic 加載動作
ionic 模型
ionic 導航
ionic 平臺
ionic 浮動框
ionic 對話框
ionic 滾動條
ionic 側欄菜單
ionic 滑動框
ionic 加載動畫
ionic 選項卡欄操作
?
本文檔使用 php中文網手冊 發(fā)布
文字
ionic 單選框
ionic 當選按鈕與標準 type="radio" 的 input元素類似。以下展示了現代app類型的單選按鈕。
每個 item-radio 中的 type="radio" 的 input 元素的 name 屬性都相同。radio-icon 類用于是否顯示圖標。
ionic 在單選項中使用了 <label> 元素，使其更易點擊。
實例
<div class="list"> <label class="item item-radio"> <input type="radio" name="group" value="go" checked="checked"> <div class="item-content"> Go </div> <i class="radio-icon ion-checkmark"></i> </label> <label class="item item-radio"> <input type="radio" name="group" value="python"> <div class="item-content"> Python </div> <i class="radio-icon ion-checkmark"></i> </label> <label class="item item-radio"> <input type="radio" name="group" value="ruby"> <div class="item-content"> Ruby </div> <i class="radio-icon ion-checkmark"></i> </label> <label class="item item-radio"> <input type="radio" name="group" value=".net"> <div class="item-content"> .Net </div> <i class="radio-icon ion-checkmark"></i> </label> <label class="item item-radio"> <input type="radio" name="group" value="java"> <div class="item-content"> Java </div> <i class="radio-icon ion-checkmark"></i> </label> <label class="item item-radio"> <input type="radio" name="group" value="php"> <div class="item-content"> PHP </div> <i class="radio-icon ion-checkmark"></i> </label> </div>