如何利用ionic框架中的開關toggle控制項設置狀態

ionic框架中開關控制項toggle,類似複選框,可以進行選中或未選中;toggle開關控制項常用於移動設備,用於on/off。toggle是一種開關控制項,可以展示兩種狀態,一種是開著狀態,另一個是關閉狀態。下面利用一個實例說明toggle的用法,詳細操作如下:

工具/原料

ionic
AngularJS
HBuilder
截圖工具
瀏覽器
HTML5
CSS3

方法/步驟

第一步,創建靜態頁面toggle.html,並引入ionic的js和css文件,注意引入文件的先後順序,如下圖所示:

第二步,在body插入代碼,label和div標籤分別設置不同的樣式類:

<li class="item item-toggle">Java高級程序設計                    <label class="toggle toggle-assertive">                        <input type="checkbox" checked="">                        <div class="track">                           <div class="handle"></div>                        </div>                    </label>                </li>

如下圖所示:

第三步,根據不同樣式設置toggle:

<li class="item item-toggle">VB入門篇                    <label class="toggle toggle-balanced">                        <input type="checkbox" checked="">                        <div class="track">                           <div class="handle"></div>                        </div>                    </label>                </li>

如下圖所示:

第四步,使用toggle-calm:

<li class="item item-toggle">C#從入門到精通                    <label class="toggle toggle-calm">                        <input type="checkbox" checked="">                        <div class="track">                           <div class="handle"></div>                        </div>                    </label>                </li>

如下圖所示:

第五步,利用開關控制項設置toggle-dark:

<li class="item item-toggle">C語言函數                    <label class="toggle toggle-dark">                        <input type="checkbox" checked="">                        <div class="track">                           <div class="handle"></div>                        </div>                    </label>                </li>

如下圖所示:

第六步,利用toggle-energized:

<li class="item item-toggle">C++高級程序設計                    <label class="toggle toggle-energized">                        <input type="checkbox" checked="">                        <div class="track">                           <div class="handle"></div>                        </div>                    </label>                </li>

如下圖所示:

注意事項

注意toggle使用場景
熟練調用開關樣式

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場