如何利用ionic框架中的checkbox设置不同的样式
发布网友
发布时间：2023-11-27 23:26
共1个回答
热心网友
时间：2024-11-24 04:28
第一步，创建静态页面checkbox.html，并引入ionic的相关CSS文件和JS文件，如下图所示：
第二步，创建复选框容器，利用无序列表展示不同样式的复选框，代码如下：
<li class="item item-checkbox"><label class="checkbox">
<input type="checkbox" />
</label> 松树</li>
第三步，第二步中没有添加checkbox-样式class，这里添加checkbox-assertive，代码如下：
<li class="item item-checkbox"> <label class="checkbox checkbox-assertive"> <input type="checkbox" /> </label> 梨树</li>第四步，添加一个复选框，给定样式class为checkbox-balanced，代码如下：
<li class="item item-checkbox"> <label class="checkbox checkbox-balanced"> <input type="checkbox" /> </label> 柳树</li>第五步，添加一个复选框，给定样式class为checkbox-calm，代码如下：
<li class="item item-checkbox"> <label class="checkbox checkbox-calm"> <input type="checkbox" /> </label> 樟树</li>
第六步，添加一个复选框，给定样式class为checkbox-dark，代码如下：
<li class="item item-checkbox"> <label class="checkbox checkbox-dark"> <input type="checkbox" /> </label> 梧桐</li>
