Ionic切换组件 _Ionic切换组件

Ionic切换是一种输入组件, 它具有布尔值。它更改单个选项的状态。它允许用户通过按下或滑动设置来打开或关闭设置。也可以使用checked属性以编程方式对其进行检查。你还可以将不同类型的属性（如禁用和值）应用到切换器, 以控制其行为。
【Ionic切换组件】以下示例说明如何在Ionic应用程序中使用< ion-toggle> 组件。在这里, 我们可以看到默认切换, 选中切换和禁用切换。
例

< ion-header> < ion-toolbar> < ion-title> ToggleApp < /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light"> < ion-item> < !-- Default Toggle --> < ion-label> Peter< /ion-label> < ion-toggle> < /ion-toggle> < /ion-item> < ion-item> < !-- Disabled Toggle --> < ion-label> Robert< /ion-label> < ion-toggle disabled> < /ion-toggle> < /ion-item> < ion-item> < !-- Checked Toggle --> < ion-label> Johnny< /ion-label> < ion-toggle checked> < /ion-toggle> < /ion-item> < /ion-content>

输出量

文章图片
样式切换切换元素的样式非常简单。它使用Ionic框架中可用的所有颜色。下面的示例说明将不同的颜色与list和toggle元素一起使用。
例

< ion-header> < ion-toolbar> < ion-title> ToggleApp < /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light" fullscren> < !-- Styling Toggles in a List --> < ion-list> < ion-item> < ion-label> Blueberry< /ion-label> < ion-toggle slot="end" name="blueberry" checked> < /ion-toggle> < /ion-item> < ion-item> < ion-label> Apple< /ion-label> < ion-toggle slot="end" name="apple" color="secondary"> < /ion-toggle> < /ion-item> < ion-item> < ion-label> Kiwi< /ion-label> < ion-toggle slot="end" name="kiwi" color="success" checked> < /ion-toggle> < /ion-item> < ion-item> < ion-label> Orange< /ion-label> < ion-toggle slot="end" name="banana" color="warning"> < /ion-toggle> < /ion-item> < ion-item> < ion-label> Cantaloupe< /ion-label> < ion-toggle slot="end" name="cantaloupe" color="danger" checked> < /ion-toggle> < /ion-item> < ion-item> < ion-label> Blackberry< /ion-label> < ion-toggle slot="end" name="blackberry" color="dark"> < /ion-toggle> < /ion-item> < /ion-list> < /ion-content>

输出量