步进器

步进器布局

单步进器布局非常简单

<!-- 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 element -->
<div class="stepper">
  <div class="stepper-button-minus"></div>
  <div class="stepper-button-plus"></div>
</div>

步进器修饰符类

与按钮类似，可以通过使用附加的修饰符类来更改步进器样式（形状、大小和颜色）

stepper-fill	填充式步进器按钮
stepper-fill-ios	在 iOS 主题中，步进器按钮仅为填充样式
stepper-fill-md	在 MD 主题中，步进器按钮仅为填充样式
stepper-round	圆形步进器按钮
stepper-round-ios	在 iOS 主题中，步进器按钮仅为圆形
stepper-round-md	在 MD 主题中，步进器按钮仅为圆形
stepper-small	小型步进器
stepper-small-ios	在 iOS 主题中，步进器仅为小型
stepper-small-md	在 MD 主题中，步进器仅为小型
stepper-large	大型步进器
stepper-large-ios	在 iOS 主题中，步进器仅为大型
stepper-large-md	在 MD 主题中，步进器仅为大型
stepper-raised	凸起的步进器
stepper-raised-ios	在 iOS 主题中，步进器仅为凸起样式
stepper-raised-md	在 MD 主题中，步进器仅为凸起样式
color-[color]	彩色按钮，其中 [color] 为默认颜色之一

步进器 App 方法

让我们看一看与步进器相关的 App 方法

app.stepper.create(parameters)- 创建步进器实例

parameters- object。带有步进器参数的对象

方法返回所创建步进器的实例

app.stepper.destroy(el)- 销毁步进器实例

el- HTMLElement 或 string (带 CSS 选择器) 或 object。要销毁的步进器元素或步进器实例。

app.stepper.get(el)- 根据 HTML 元素获取步进器实例

el- HTMLElement 或 string (带 CSS 选择器)。步进器元素。

方法返回步进器的实例

app.stepper.getValue(el)- 获取步进器值

el- HTMLElement 或 string (带 CSS 选择器)。步进器元素。

方法返回步进器值

app.stepper.setValue(el, value)- 设置新的步进器值

el- HTMLElement 或 string (带 CSS 选择器)。步进器元素。
value- number

方法返回步进器的实例

步进器参数

现在，让我们看一看创建步进器所需的可用参数列表

参数	类型	默认值	描述
el	HTMLElement string		步进器元素。步进器元素的 HTMLElement 或包含 CSS 选择器的字符串
inputEl	HTMLElement string		步进器输入元素或输入元素的 CSS 选择器。如果未指定，将尝试在步进器元素中查找 `<input>`
step	number	1	值之间的最小步长
min	number	0	最小值
max	number	100	最大值
value	number	0	初始值
wraps	boolean	false	启用后，将超出最大值时递增步进器会将值设为最小值；同样，将低于最小值时递减步进器会将值设为最大值
autorepeat	boolean	false	启用时，在你点击并按住加号或减号按钮时，它会反复增加/减少数值
autorepeatDynamic	boolean	false	启用时，它会根据你按下按钮的时间长短来增加自动重复比率
valueEl	HTMLElement string		Stepper 数值元素，或 Stepper 将插入数值的该元素的 CSS 选择器。如果未指定，且没有传递 `inputEl`，它将尝试在 stepper 元素内部查找 `<div class="stepper-value">`
formatValue	function (value)		将值格式化为所需格式的函数。它接受当前值，并且必须返回新的格式化值；
manualInputMode	boolean	false	启用手动输入模式。此模式允许通过键盘键入值，并根据定义的精度检查小数部分。另外，在该模式下键入时，会忽略 `step` 参数。
decimalPoint	number	4	在手动输入模式下的点后面位数。
buttonsEndInputMode	boolean	true	在点击 Stepper 的减号或加号按钮时禁用手动输入模式。
on	object		带有事件处理程序的对象。例如 `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 值
stepper.inputEl	Stepper 输入 HTML 元素
stepper.$inputEl	带有 stepper 输入 HTML 元素的 Dom7 实例
stepper.valueEl	Stepper 值容器 HTML 元素
stepper.$valueEl	带有 stepper 值容器 HTML 元素的 Dom7 实例
stepper.params	Stepper 参数
方法
stepper.getValue()	返回 stepper 值
stepper.setValue(value)	设置新的 stepper 值
stepper.increment()	步增 stepper 值，类似于点击加号按钮
stepper.decrement()	步减 stepper 值，类似于点击减号按钮
stepper.plus()	`stepper.increment()` 的别名
stepper.minus()	`stepper.decrement()` 的别名
stepper.destroy()	销毁 stepper 实例
stepper.on(event, handler)	添加事件处理程序
stepper.once(event, handler)	添加在触发后将被移除的事件处理程序
stepper.off(event, handler)	移除事件处理程序
stepper.off(event)	移除对指定事件的所有处理程序
stepper.emit(event, ...args)	在实例上触发事件

Stepper 事件

Stepper 将触发 Stepper 元素上的以下 DOM 事件以及应用和 Stepper 实例上的事件

DOM 事件

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

应用和 Stepper 实例事件

Stepper 实例在本身实例和应用实例上发出事件。应用实例事件有相同名称，前面加有 stepper。

事件	参数	目标	描述
change	(stepper, value)	stepper	当 stepper 值已更改时将触发事件。作为参数，事件处理程序将收到 stepper 实例和 stepper 值。
stepperChange	(stepper, value)	应用	当 stepper 值已更改时将触发事件。作为参数，事件处理程序将收到 stepper 实例和 stepper 值。
beforeDestroy	(stepper)	stepper	在 Stepper 实例将被销毁之前将触发事件。作为参数，事件处理程序将收到 stepper 实例。
stepperBeforeDestroy	(stepper)	应用	在 Stepper 实例将被销毁之前将触发事件。作为参数，事件处理程序将收到 stepper 实例。

Stepper 自动初始化

如果你不需要使用 Stepper API，而你的 Stepper 在页面内并且在页面初始化时显示在 DOM 中，那么只需添加其他 stepper-init 类即可自动初始化它。

<!-- 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 应用方法。

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>

改进此文档

在此页面

步进器布局
步进器修饰符类
步进器 App 方法
步进器参数
Stepper 方法 & 属性
Stepper 事件

DOM 事件
应用和 Stepper 实例事件

Stepper 自动初始化
CSS 变量
示例