Ionic范围 Ionic单选按钮 Ionic选择 Ionic范围用于选择和显示某物的水平。它将代表与最大值和最小值相关的实际值。Ionic提供了一种使用Range的简单方法。 使用范围 范围用作内部项目元素。使用的类是 范围 。后，我们将会把这一类 项目 类。这将准备一个放置范围的容器。创建容器后，我们需要添加 输入 并为其分配 范围 类型和 name 属性。 # <div class = "item range"> # <input type = "range" name = "range1"> # </div> 上面的代码将生成以下屏幕 添加图标 范围通常需要图标才能清楚地显示数据。我们只需要在范围输入之前和之后添加图标，将它们放在范围元素的两侧。 # <div class = "item range"> # <i class = "icon ion-volume-low"></i> # <input type = "range" name = "volume"> # <i class = "icon ion-volume-high"></i> # </di 上面的代码将生成以下屏幕 造型范围 我们的下一个例子将向您展示如何使用Ionic颜色设置Range的样式。颜色类将使用 范围 前缀。我们将创建一个包含九个范围的列表，并以不同的方式设 # <div class = "list"> # <div class = "item range range-light"> # <input type = "range" name = "volume"> # </div> # # <div class = "item range range-stable"> # <input type = "range" name = "volume"> # </div> # # <div class = "item range range-positive"> # <input type = "range" name = "volume"> # </div> # # <div class = "item range range-calm"> # <input type = "range" name = "volume"> # </div> # # <div class = "item range range-balanced"> # <input type = "range" name = "volume"> # </div> # # <div class = "item range range-energized"> # <input type = "range" name = "volume"> # </div> # # <div class = "item range range-assertive"> # <input type = "range" name = "volume"> # </div> # # <div class = "item range range-royal"> # <input type = "range" name = "volume"> # </div> # # <div class = "item range range-dark"> # <input type = "range" name = "volume"> # </div> # </di 上面的代码将生成以下屏幕 Ionic单选按钮 Ionic选择
