×
ionic 教程ionic 安装ionic 创建 APP

ionic CSS

ionic 头部与底部ionic 按钮ionic 列表ionic 卡片ionic 表单和输入框ionic toggleionic checkboxionic 单选框ionic rangeionic selectionic tab(选项卡)ionic 网格(Grid)ionic 颜色ionic icon(图标)

ionic JavaScript

ionic 上拉菜单ionic 背景层ionic 下拉刷新ionic 复选框ionic 单选框操作ionic 切换开关操作ionic 手势事件ionic 头部和底部ionic 列表操作ionic 加载动作ionic 模态窗口ionic 导航ionic 平台ionic 浮动框ionic 对话框ionic 滚动条ionic 侧栏菜单ionic 滑动框ionic 加载动画ionic 选项卡栏操作

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="radio-content"> <div class="item-content"> Go </div> <i class="radio-icon ion-checkmark"></i> </div> </label> <label class="item item-radio"> <input type="radio" name="group" value="python"> <div class="radio-content"> <div class="item-content"> Python </div> <i class="radio-icon ion-checkmark"></i> </div> </label> <label class="item item-radio"> <input type="radio" name="group" value="ruby"> <div class="radio-content"> <div class="item-content"> Ruby </div> <i class="radio-icon ion-checkmark"></i> </div> </label> <label class="item item-radio"> <input type="radio" name="group" value=".net"> <div class="radio-content"> <div class="item-content"> .Net </div> <i class="radio-icon ion-checkmark"></i> </div> </label> <label class="item item-radio"> <input type="radio" name="group" value="java"> <div class="radio-content"> <div class="item-content"> Java </div> <i class="radio-icon ion-checkmark"></i> </div> </label> <label class="item item-radio"> <input type="radio" name="group" value="php"> <div class="radio-content"> <div class="item-content"> PHP </div> <i class="radio-icon ion-checkmark"></i> </div> </label> </div>

尝试一下 »

运行效果如下:


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)