步进器

Stepper 布局

单个 Stepper 布局相当简单：

<!-- Stepper element -->
<div class="stepper">
  <!-- Stepper minus/decrement button -->
  <div class="stepper-button-minus"></div>
  <!-- Stepper input -->
  <div class="stepper-input-wrap">
    <!-- recommended to make input not editable (readonly) -->
    <input type="text" readonly value="10" />
  </div>
  <!-- Stepper plus/increment button -->
  <div class="stepper-button-plus"></div>
</div>

如果你不需要输入元素但仍需要保持值：

<!-- Stepper element -->
<div class="stepper">
  <div class="stepper-button-minus"></div>
  <!-- Stepper value element -->
  <div class="stepper-value">10</div>
  <div class="stepper-button-plus"></div>
</div>

如果你不需要在 Stepper 按钮之间显示值：

<!-- Stepper element -->
<div class="stepper">
  <div class="stepper-button-minus"></div>
  <div class="stepper-button-plus"></div>
</div>

Stepper 修饰符类

类似于按钮通过使用额外的修饰符类可以更改 Stepper 样式（形状、大小和颜色）：

stepper-fill	填充式 Stepper 按钮
stepper-fill-ios	在 iOS 主题中 Stepper 按钮将只有填充式
stepper-fill-md	在 MD 主题中 Stepper 按钮将只有填充式
stepper-round	圆角 Stepper 按钮
stepper-round-ios	在 iOS 主题中 Stepper 按钮将只有圆角
stepper-round-md	在 MD 主题中 Stepper 按钮将只有圆角
stepper-small	小型 Stepper
stepper-small-ios	在 iOS 主题中 Stepper 将只有小型
stepper-small-md	在 MD 主题中 Stepper 将只有小型
stepper-large	大型 Stepper
stepper-large-ios	在 iOS 主题中 Stepper 将只有大型
stepper-large-md	在 MD 主题中 Stepper 将只有大型
stepper-raised	抬起的 Stepper
stepper-raised-ios	仅在 iOS 主题中的抬起 Stepper
stepper-raised-md	仅在 MD 主题中的抬起 Stepper
color-[color]	颜色按钮，其中[color]是默认颜色之一

Stepper 应用方法

让我们看看与 Stepper 相关的应用方法：

app.stepper.create(参数)- 创建 Stepper 实例

参数 - 对象. 带有 Stepper 参数的对象

方法返回创建的 Stepper 实例

app.stepper.destroy(el)- 销毁 Stepper 实例

el - HTMLElement或字符串(使用 CSS 选择器) 或对象. 要销毁的 Stepper 元素或 Stepper 实例。

app.stepper.get(el)- 通过 HTML 元素获取 Stepper 实例

el - HTMLElement或字符串(使用 CSS 选择器)。Stepper 元素。

方法返回 Stepper 实例

app.stepper.getValue(el)- 获取 Stepper 值

el - HTMLElement或字符串(使用 CSS 选择器)。Stepper 元素。

方法返回 Stepper 值

app.stepper.setValue(el, 值)- 设置新的 Stepper 值

el - HTMLElement或字符串(使用 CSS 选择器)。Stepper 元素。
值 - 数字

方法返回 Stepper 实例

Stepper 参数

现在让我们看看创建 Stepper 需要的可用参数列表：

参数	类型	默认	描述
el	HTMLElement 字符串		Stepper 元素。HTMLElement 或带有 CSS 选择器的 Stepper 元素的字符串
inputEl	HTMLElement 字符串		Stepper 输入元素或输入元素的 CSS 选择器。如果未指定，将尝试在 Stepper 元素内部查找`<input>`函数以在所需格式中格式化值。它接受当前值并必须返回新的格式化值；
step	数字	1	值之间的最小步长
min	数字	0	最小值
max	数字	100	最大值
值	数字	0	Stepper 值元素或此元素的 CSS 选择器，Stepper 将在此插入值。如果未指定，并且没有
wraps	布尔值	false	当启用时，超出最大值递增将值设置为最小值；同样，低于最小值递减将值设置为最大值
autorepeat	布尔值	false	当启用时，在您点击并按住加/减按钮时，它将重复增加/减少值
autorepeatDynamic	布尔值	false	当启用时，它将根据您按住按钮的时间增加自动重复比率
valueEl	HTMLElement 字符串		Stepper value element or CSS selector of this element where Stepper will insert value. If not specified, and there is no `inputEl`传递，将尝试在 Stepper 元素内部查找`<div class="stepper-value">`函数以在所需格式中格式化值。它接受当前值并必须返回新的格式化值；
formatValue	function (value)		Function to format value in required format. It accepts current value and must return new formatted value;
manualInputMode	布尔值	false	启用手动输入模式。此模式允许从键盘输入值并检查定义的精度。此外，`step`参数在此模式下被忽略。
decimalPoint	数字	4	小数点后的位数，当处于手动输入模式时。
buttonsEndInputMode	布尔值	true	在步进的减号或加号按钮点击时禁用手动输入模式。
on	对象		带有事件处理程序的对象。例如： `var stepper = app.stepper.create({ el: '.stepper', on: { change: function () { console.log('Stepper value changed') } } })`

Stepper 方法和属性

因此要创建 Stepper，我们必须调用：

var stepper = app.stepper.create({ /* parameters */ })

之后我们就有其初始化的实例（如stepper示例中上面的变量）以及有用的方法和属性：

属性
stepper.app	链接到全局应用实例
stepper.el	Stepper HTML 元素
stepper.$el	带有 Stepper HTML 元素的 Dom7 实例
stepper.min	Stepper 最小值
stepper.max	Stepper 最大值
stepper.value	步进值
stepper.inputEl	Stepper 输入 HTML 元素
stepper.$inputEl	带有 Stepper 输入 HTML 元素的 Dom7 实例
stepper.valueEl	Stepper 值容器 HTML 元素
stepper.$valueEl	带有 Stepper 值容器 HTML 元素的 Dom7 实例
stepper.params	Stepper 参数
方法
stepper.getValue()	返回步进值
stepper.setValue(值)	设置新的步进值
stepper.increment()	增加步进值，类似于点击其 "加号" 按钮
stepper.decrement()	减少步进值，类似于点击其 "减号" 按钮
stepper.plus()	别名`stepper.increment()`
stepper.minus()	别名`stepper.decrement()`
stepper.destroy()	销毁 Stepper 实例
stepper.on(事件上触发, 处理程序)	添加事件处理程序
stepper.once(事件上触发, 处理程序)	添加在触发后将被移除的事件处理程序
stepper.off(事件上触发, 处理程序)	移除事件处理程序
stepper.off(事件上触发)	移除指定事件的所有处理程序
stepper.emit(事件上触发, ...args)	在实例上触发事件

步进事件

Stepper 将在 Stepper 元素上触发以下 DOM 事件，并在应用和 Stepper 实例上触发事件：

DOM 事件

事件	Target	描述
stepper:change	Stepper 元素<div class="stepper">	当步进值已更改时，将触发此事件
stepper:beforedestroy	Stepper 元素<div class="stepper">	事件将在 Stepper 实例将被销毁之前触发

应用和 Stepper 实例事件

Stepper 实例在自身实例和应用实例上都会触发事件。应用实例事件具有相同名称，前缀为stepper.

事件	参数	Target	描述
change	(stepper, value)	stepper	当 Stepper 值发生变化时将触发事件。作为参数，事件处理程序接收 Stepper 实例和 Stepper 值
stepperChange	(stepper, value)	app	当 Stepper 值发生变化时将触发事件。作为参数，事件处理程序接收 Stepper 实例和 Stepper 值
beforeDestroy	(stepper)	stepper	事件将在 Stepper 实例将被销毁之前触发。作为参数，事件处理程序接收 Stepper 实例
stepperBeforeDestroy	(stepper)	app	事件将在 Stepper 实例将被销毁之前触发。作为参数，事件处理程序接收 Stepper 实例

Stepper 自动初始化

如果你不需要使用 Stepper API 并且你的 Stepper 位于页面内部，并且在页面初始化时呈现为 DOM，那么它可以通过仅添加额外的stepper-init class:

<!-- Add stepper-init class -->
<div class="stepper stepper-init">
  <div class="stepper-button-minus"></div>
  <div class="stepper-input-wrap">
    <input type="text" readonly />
  </div>
  <div class="stepper-button-plus"></div>
</div>

在这种情况下，如果你需要访问创建的 Stepper 实例，你可以使用app.stepper.get app method:

var stepper = app.stepper.get('.stepper');

if (stepper.value > 50) {
  // do something
}

当使用自动初始化时，你可能需要传递额外的参数。这可以通过两种方式完成：

如果你使用带有输入的 Stepper，则step, min, max, value参数可以从此输入属性中设置：

<!-- min, max, step, value parameters will be set for same input attributes -->
<div class="stepper stepper-init">
  <div class="stepper-button-minus"></div>
  <div class="stepper-input-wrap">
    <input type="text" readonly min="0" max="50" step="10" value="15" />
  </div>
  <div class="stepper-button-plus"></div>
</div>

否则，如果你没有输入内部，你可以通过 Stepper 元素上的data-属性设置所有可用参数。

<!-- parameters set via data- attributes -->
<div
  class="stepper stepper-init"
  data-min="0"
  data-max="500"
  data-step="25"
  data-value="75"
>
  <div class="stepper-button-minus"></div>
  <div class="stepper-value"></div>
  <div class="stepper-button-plus"></div>
</div>

CSS 变量

以下是相关CSS 变量(CSS 自定义属性) 的列表。

注意，注释掉的变量默认未指定，其值在这种情况下是它们回退到的值。

:root {
  /*
  --f7-stepper-button-text-color: var(--f7-theme-color);
  --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
  --f7-stepper-value-text-color: var(--f7-theme-color);
  --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
  */
  --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --f7-stepper-value-font-weight: 500;
}
.ios {
  --f7-stepper-height: 28px;
  --f7-stepper-border-radius: 5px;
  --f7-stepper-fill-button-text-color: #fff;
  /*
  --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
  */
  --f7-stepper-large-height: 44px;
  --f7-stepper-small-height: 26px;
  --f7-stepper-value-font-size: 17px;
  --f7-stepper-border-width: 2px;
  --f7-stepper-border-color: var(--f7-theme-color);
  --f7-stepper-small-border-width: 2px;
}
.md {
  --f7-stepper-height: 40px;
  --f7-stepper-border-radius: 8px;
  --f7-stepper-large-height: 48px;
  --f7-stepper-small-height: 32px;
  --f7-stepper-value-font-size: 14px;
  --f7-stepper-border-width: 1px;
  --f7-stepper-small-border-width: 1px;
  --f7-stepper-button-pressed-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-stepper-fill-button-text-color: var(--f7-md-on-primary);
  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color);
  --f7-stepper-border-color: var(--f7-md-outline);
}

示例

stepper.html

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Stepper</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Shape and size</div>
      <div class="block block-strong block-outline-ios text-align-center">
        <div class="grid grid-cols-2 grid-gap">
          <div>
            <small>Default</small>
            <div class="stepper stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Round</small>
            <div class="stepper stepper-round stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Fill</small>
            <div class="stepper stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Round Fill</small>
            <div class="stepper stepper-fill stepper-round stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Small</small>
            <div class="stepper stepper-small stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Small Round</small>
            <div class="stepper stepper-small stepper-round stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Small Fill</small>
            <div class="stepper stepper-small stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Small Round Fill</small>
            <div class="stepper stepper-small stepper-round stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Large</small>
            <div class="stepper stepper-large stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Large Round</small>
            <div class="stepper stepper-large stepper-round stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Large Fill</small>
            <div class="stepper stepper-large stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Large Round Fill</small>
            <div class="stepper stepper-large stepper-round stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="block-title">Raised</div>
      <div class="block block-strong block-outline-ios text-align-center">
        <div class="grid grid-cols-2 grid-gap">
          <div>
            <small>Default</small>
            <div class="stepper stepper-raised stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Round</small>
            <div class="stepper stepper-raised stepper-round stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Fill</small>
            <div class="stepper stepper-raised stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Round Fill</small>
            <div class="stepper stepper-raised stepper-fill stepper-round stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Small</small>
            <div class="stepper stepper-raised stepper-small stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Small Round</small>
            <div class="stepper stepper-raised stepper-small stepper-round stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Small Fill</small>
            <div class="stepper stepper-raised stepper-small stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Small Round Fill</small>
            <div class="stepper stepper-raised stepper-small stepper-round stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Large</small>
            <div class="stepper stepper-raised stepper-large stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Large Round</small>
            <div class="stepper stepper-raised stepper-large stepper-round stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Large Fill</small>
            <div class="stepper stepper-raised stepper-large stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Large Round Fill</small>
            <div class="stepper stepper-raised stepper-large stepper-round stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="block-title">Colors</div>
      <div class="block block-strong block-outline-ios text-align-center">
        <div class="grid grid-cols-2 grid-gap">
          <div>
            <div class="stepper stepper-init stepper-fill color-red">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <div class="stepper stepper-round stepper-fill stepper-init color-green">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <div class="stepper stepper-fill stepper-init color-blue">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <div class="stepper stepper-fill stepper-round stepper-init color-pink">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <div class="stepper stepper-small stepper-fill stepper-init color-yellow">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <div class="stepper stepper-small stepper-fill stepper-round stepper-init color-orange">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <div class="stepper stepper-small stepper-fill stepper-init color-gray">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <div class="stepper stepper-small stepper-round stepper-fill stepper-init color-black">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="block-title">Without input element</div>
      <div class="block block-strong block-outline-ios text-align-center">
        <div class="grid grid-cols-2 grid-gap">
          <div>
            <div class="stepper stepper-init" data-value="0" data-min="0" data-max="100" data-step="1">
              <div class="stepper-button-minus"></div>
              <div class="stepper-value"></div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <div class="stepper stepper-round stepper-init" data-value="0" data-min="0" data-max="100" data-step="1">
              <div class="stepper-button-minus"></div>
              <div class="stepper-value"></div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="block-title">Min, max, step</div>
      <div class="block block-strong block-outline-ios text-align-center">
        <div class="grid grid-cols-2 grid-gap">
          <div>
            <div class="stepper stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="100" min="0" max="1000" step="100" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <div class="stepper stepper-fill stepper-round stepper-init" data-value="5" data-min="0" data-max="10"
              data-step="0.5">
              <div class="stepper-button-minus"></div>
              <div class="stepper-value"></div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="block-title">Autorepeat (Tap & hold)</div>
      <div class="block-header">Pressing and holding one of its buttons increments or decrements the stepper’s value
        repeatedly. With dynamic autorepeat, the rate of change depends on how long the user continues pressing the
        control.</div>
      <div class="block block-strong block-outline-ios text-align-center">
        <div class="grid grid-cols-2 grid-gap">
          <div>
            <small>Default</small>
            <div class="stepper stepper-fill stepper-init" data-autorepeat="true">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Dynamic</small>
            <div class="stepper stepper-fill stepper-init" data-autorepeat="true" data-autorepeat-dynamic="true">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="block-title">Wraps</div>
      <div class="block-header">In wraps mode incrementing beyond maximum value sets value to minimum value, likewise,
        decrementing below minimum value sets value to maximum value</div>
      <div class="block block-strong block-outline-ios text-align-center">
        <div class="stepper stepper-fill stepper-init" data-wraps="true" data-autorepeat="true"
          data-autorepeat-dynamic="true">
          <div class="stepper-button-minus"></div>
          <div class="stepper-input-wrap">
            <input type="text" value="0" min="0" max="10" step="1" readonly />
          </div>
          <div class="stepper-button-plus"></div>
        </div>
      </div>
      <div class="block-title">Custom value element</div>
      <div class="list list-strong-ios list-dividers-ios list-outline-ios">
        <ul>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Apples: <span id="apples-count"></span></div>
              <div class="item-after">
                <div class="stepper stepper-init stepper-small stepper-raised" data-value-el="#apples-count">
                  <div class="stepper-button-minus"></div>
                  <div class="stepper-button-plus"></div>
                </div>
              </div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Oranges: <span id="oranges-count"></span></div>
              <div class="item-after">
                <div class="stepper stepper-init stepper-small stepper-raised" data-value-el="#oranges-count">
                  <div class="stepper-button-minus"></div>
                  <div class="stepper-button-plus"></div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Custom value format</div>
      <div class="list list-strong-ios list-dividers-ios list-outline-ios">
        <ul>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">
                <div class="item-header">Meeting starts in</div>
                <span id="meeting-start-time"></span>
              </div>
              <div class="item-after">
                <div class="stepper stepper-fill stepper-small stepper-raised" id="stepper-time">
                  <div class="stepper-button-minus"></div>
                  <div class="stepper-button-plus"></div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Manual input</div>
      <div class="block-header">It is possible to enter value manually from keyboard or mobile keypad. When click on
        input field, stepper enter into manual input mode, which allow type value from keyboard and check fractional
        part with defined accurancy. Click outside or enter Return key, ending manual mode.</div>
      <div class="block block-strong block-outline-ios text-align-center">
        <div class="stepper stepper-fill stepper-init" data-wraps="true" data-autorepeat="true"
          data-autorepeat-dynamic="true" data-decimal-point="2" data-manual-input-mode="true">
          <div class="stepper-button-minus"></div>
          <div class="stepper-input-wrap">
            <input type="text" value="0" min="0" max="1000" step="1" />
          </div>
          <div class="stepper-button-plus"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
  .grid small {
    display: block;
  }
</style>
<script>
  export default (props, { $f7, $on }) => {
    let stepperTime;
    $on('pageInit', () => {
      stepperTime = $f7.stepper.create({
        el: '#stepper-time',
        valueEl: '#meeting-start-time',
        min: 15, // 15 minutes min
        max: 240, // 4 hours max
        step: 15, // every 15 minutes
        value: 15,
        formatValue: function (value) {
          var hours = Math.floor(value / 60);
          var minutes = value - (hours * 60);
          var formatted = [];
          if (hours > 0) {
            formatted.push(hours + ' ' + (hours > 1 ? 'hours' : 'hour'));
          }
          if (minutes > 0) {
            formatted.push(minutes + ' minutes');
          }
          return formatted.join(' ');
        }
      })
    });
    $on('pageBeforeRemove', () => {
      stepperTime.destroy()
    });

    return $render;
  };

</script>

改进此文档

在本页上

Stepper 布局
Stepper 修饰符类
Stepper 应用方法
Stepper 参数
Stepper 方法和属性
步进事件

DOM 事件
应用和 Stepper 实例事件

Stepper 自动初始化
CSS 变量
示例