2019獨角獸企業(yè)重金招聘Python工程師標準>>>

和開關(guān)一樣，復選按鈕也是基于HTML的checkbox input實現(xiàn)的。使用如下的HTML模板聲明復選按鈕。用法：

<any?class="item-input"><any?class="checkbox"><input?type="checkbox"></any> </any>

復選按鈕的配色方案樣式為：.checkbox-{color}。

<label?class="checkbox?checkbox-dark"?><input?type="checkbox"?checked> </label>

將上代碼放在 .item-checkbox里面，可定定復選框的位置：

//ionic.css源碼 .item-checkbox?.checkbox?{position:?absolute;top:?50%;right:?8px;left:?8px;z-index:?3;margin-top:?-21px;?}

綜上實例：

<div?class="scroll-content?has-header"><ul?class="list"><li?class="item?item-checkbox?item-button-right"><label?class="checkbox"><input?type="checkbox"></label><h2>Shopping</h2><p>Due?tommorow</p><a?class="button?button-clear?icon?ion-ios-arrow-right"></a></li><li?class="item?item-checkbox??item-button-right"><label?class="checkbox"><input?type="checkbox"?checked></label><h2>Moving?house?checklist</h2><a?class="button?button-clear?icon?ion-ios-arrow-right"></a></li><li?class="item?item-checkbox??item-button-right"><label?class="checkbox"><input?type="checkbox"></label><h2>Holiday?destinations</h2><a?class="button?button-clear?icon?ion-ios-arrow-right"></a></li><li?class="item?item-checkbox??item-button-right"><label?class="checkbox"><input?type="checkbox"></label><h2>App?ideas</h2><a?class="button?button-clear?icon?ion-ios-arrow-right"></a></li></ul> </div> <div?class="bar?bar-footer?bar-positive"><div?class="button-bar"><a?class="button">All</a><a?class="button">Done</a><a?class="button">Completed</a></div> </div>

轉(zhuǎn)載于:https://my.oschina.net/u/2395167/blog/492225

總結(jié)

以上是生活随笔為你收集整理的ionic.css界面组件：表单-复选按钮的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。