ionic 单选框

ionic 单选按钮与标准 type="radio" 的 input元素类似。以下展示了现代app类型的单选按钮。

每个 item-radio 中的 type="radio" 的 input 元素的 name 属性都相同。radio-icon 类用于是否显示图标。

ionic 在单选项中使用了 <label> 元素,使其更易点击。

实例

<divclass="list"><labelclass="item item-radio"><inputtype="radio"name="group"value="go"checked="checked"><divclass="radio-content"><divclass="item-content"> Go </div><iclass="radio-icon ion-checkmark"></i></div></label><labelclass="item item-radio"><inputtype="radio"name="group"value="python"><divclass="radio-content"><divclass="item-content"> Python </div><iclass="radio-icon ion-checkmark"></i></div></label><labelclass="item item-radio"><inputtype="radio"name="group"value="ruby"><divclass="radio-content"><divclass="item-content"> Ruby </div><iclass="radio-icon ion-checkmark"></i></div></label><labelclass="item item-radio"><inputtype="radio"name="group"value=".net"><divclass="radio-content"><divclass="item-content"> .Net </div><iclass="radio-icon ion-checkmark"></i></div></label><labelclass="item item-radio"><inputtype="radio"name="group"value="java"><divclass="radio-content"><divclass="item-content"> Java </div><iclass="radio-icon ion-checkmark"></i></div></label><labelclass="item item-radio"><inputtype="radio"name="group"value="php"><divclass="radio-content"><divclass="item-content"> PHP </div><iclass="radio-icon ion-checkmark"></i></div></label></div>

ionic 单选框

相关推荐