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

Stepper 修飾子クラス

ボタンと同様に、追加の修飾子クラスを使用してStepperのスタイル（形状、サイズ、色）を変更できます

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]はデフォルトの色のいずれかです

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要素。

メソッドはステッパーの値を返します

app.stepper.setValue(el, value)- 新しいStepperの値を設定します

el - HTMLElementまたは文字列（CSSセレクター付き）。Stepper要素。
value - 数値

メソッドはStepperのインスタンスを返します

Stepper パラメーター

それでは、Stepperを作成するために必要な利用可能なパラメーターのリストを見てみましょう

パラメーター	型	デフォルト	説明
el	HTMLElement 文字列		Stepper要素。HTMLElementまたはStepper要素のCSSセレクターを含む文字列
inputEl	HTMLElement 文字列		Stepper入力要素または入力要素のCSSセレクター。指定されていない場合、Stepper要素内の`<input>`を検索しようとします
step	数値	1	値間の最小ステップ
min	数値	0	最小値
max	数値	100	最大値
value	数値	0	初期値
wraps	ブール値	false	有効にすると、最大値を超えて増分すると値は最小値に設定され、最小値を下回って減分すると値は最大値に設定されます
autorepeat	ブール値	false	有効にすると、プラス/マイナスボタンをタップ＆ホールドしている間、値を繰り返し増減します
autorepeatDynamic	ブール値	false	有効にすると、ボタンを押し続けている時間に基づいてautorepeatの比率が増加します
valueEl	HTMLElement 文字列		Stepper値要素またはこの要素のCSSセレクター。Stepperはここに値を挿入します。指定されていない場合、かつ`inputEl`が渡されていない場合、Stepper要素内の`<div class="stepper-value">`を検索しようとします
formatValue	function (value)		値を必要な形式にフォーマットする関数。現在の値を受け取り、新しいフォーマットされた値を返す必要があります。
manualInputMode	ブール値	false	手動入力モードを有効にします。このモードでは、キーボードから値を入力し、定義された精度で小数部分をチェックできます。また、このモードで入力する場合は、`step`パラメーターは無視されます。
decimalPoint	数値	4	手動入力モードの場合の小数点以下の桁数。
buttonsEndInputMode	ブール値	true	Stepperのマイナスまたはプラスボタンをクリックすると、手動入力モードが無効になります。
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の値
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)	app
beforeDestroy	(stepper)	stepper	Stepperインスタンスが破棄される直前にトリガーされます。引数として、イベントハンドラーはStepperインスタンスを受け取ります
stepperBeforeDestroy	(stepper)	app

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
}

自動初期化を使用する場合、追加のパラメーターを渡す必要がある場合があります。2つの方法で行うことができます

入力付きのステッパーを使用する場合は、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>

そうでない場合、内部にinputがない場合は、ステッパー要素の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 メソッド＆プロパティ
Stepper イベント

DOM イベント
アプリとStepperインスタンスのイベント

Stepper自動初期化
CSS変数
例