Ionic切换组件

Ionic切换是一种输入组件, 它具有布尔值。它更改单个选项的状态。它允许用户通过按下或滑动设置来打开或关闭设置。也可以使用checked属性以编程方式对其进行检查。你还可以将不同类型的属性（如禁用和值）应用到切换器, 以控制其行为。

以下示例说明如何在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>

输出量