如何利用ionic框架中的checkbox设置不同的样式

时间:2026-02-15 03:06:32

1、第一步,创建静态页面checkbox.html,并引入ionic的相关CSS文件和JS文件,如下图所示:

如何利用ionic框架中的checkbox设置不同的样式

2、第二步,创建复选框容器,利用无序列表展示不同样式的复选框,代码如下:

<li class="item item-checkbox">           <label class="checkbox">                     <input type="checkbox" />            </label>              松树</li>

如下图所示:

如何利用ionic框架中的checkbox设置不同的样式

3、第三步,第二步中没有添加checkbox-样式class,这里添加checkbox-assertive,代码如下:

<li class="item item-checkbox">        <label class="checkbox checkbox-assertive">              <input type="checkbox" />        </label>        梨树</li>

如下图所示:

如何利用ionic框架中的checkbox设置不同的样式

4、第四步,添加一个复选框,给定样式class为checkbox-balanced,代码如下:

<li class="item item-checkbox">         <label class="checkbox checkbox-balanced">               <input type="checkbox" />          </label>           柳树</li>

如下图所示:

如何利用ionic框架中的checkbox设置不同的样式

5、第五步,添加一个复选框,给定样式class为checkbox-calm,代码如下:

<li class="item item-checkbox">         <label class="checkbox checkbox-calm">               <input type="checkbox" />          </label>           樟树

</li>

如下图所示:

如何利用ionic框架中的checkbox设置不同的样式

6、第六步,添加一个复选框,给定样式class为checkbox-dark,代码如下:

<li class="item item-checkbox">         <label class="checkbox checkbox-dark">               <input type="checkbox" />          </label>          梧桐

</li>

如下图所示:

如何利用ionic框架中的checkbox设置不同的样式

© 2026 途途旅游
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com