Ionic范围

本文概述

• 将图标添加到范围
• 造型范围

Ionic范围滑块用于通过移动滑块来选择和显示值的级别。默认情况下, 只有一个旋钮控制范围的值, 但它也可以接受双旋钮。

范围标签

通过将属性slot =“ start”和slot =“ end”添加到元素, 可以将标签放置在范围的两侧。

最大值和最小值

可以分别使用max和min属性在范围内传递最大值和最小值。默认情况下, 该范围已设置min = 0和max = 0值。

步骤和快照

steps属性用于指定范围值的值粒度。当值不以1为增量时, 此功能很有用。如果将step属性设置在范围内, 它将在范围内为每个步骤显示刻度线。 snap属性用于根据step属性值将旋钮自动移动到最近的刻度线。

双旋钮

如果在范围组件上将double-nobs属性设置为true, 它将启用范围上的两个旋钮。这意味着该值将是一个包含两个属性的对象：lower和upper。

我们可以从以下示例中了解Ionic范围。

例

<ion-header>
  <ion-toolbar>
    <ion-title>
      RangeExample
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-list-header>
      Adjust Display
    </ion-list-header>

    <ion-item>
      <ion-range id="dual-range" dual-knobs>
      </ion-range>
    </ion-item>

    <ion-item>
      <ion-range min="-200" max="200" pin="true">
      </ion-range>
    </ion-item>
  </ion-list>
</ion-content>

输出：

将图标添加到范围

图标用于清晰显示数据。我们可以在范围元素的两侧将图标放置在范围输入之前和之后。以下示例显示范围内图标的使用。

例

<ion-header>
  <ion-toolbar>
    <ion-title>
      RangeExample
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-list-header>
      Adjust Display
    </ion-list-header>

    <ion-item>
      <ion-range id="dual-range" dual-knobs>
        <ion-icon slot="start" size="small" name="volume-high"></ion-icon>
        <ion-icon slot="end" name="volume-high"></ion-icon>
      </ion-range>
    </ion-item>

    <ion-item>
      <ion-range min="-200" max="200" pin="true">
        <ion-icon slot="start" size="small" name="sunny"></ion-icon>
        <ion-icon slot="end" name="sunny"></ion-icon>
      </ion-range>
    </ion-item>
  </ion-list>
</ion-content>

输出：

造型范围

我们还可以使用color属性设置范围的样式。以下示例显示了将颜色与Ionic范围分量一起使用。

例

<ion-header>
  <ion-toolbar color="success">
    <ion-title>
      RangeExample
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="padding" color="light" fullscreen>
    <ion-list>
      <ion-list-header>
        Adjust Display
      </ion-list-header>

      <ion-item>
        <ion-range value="20">
          <ion-icon slot="start" size="small" name="contrast"></ion-icon>
          <ion-icon slot="end" name="contrast"></ion-icon>
        </ion-range>
      </ion-item>

      <ion-item>
        <ion-range min="-200" max="200" pin color="secondary">
        </ion-range>
      </ion-item>

      <ion-item>
        <ion-range id="dual-range" dual-knobs pin color="dark"></ion-range>
      </ion-item>

      <ion-item>
        <ion-range min="1000" max="2000" step="100" value="1400" snaps color="danger">
          <ion-icon slot="start" size="small" color="danger" name="thermometer"></ion-icon>
          <ion-icon slot="end" color="danger" name="thermometer"></ion-icon>
        </ion-range>
      </ion-item>
    </ion-list>
  </ion-content>

输出：