ステッパー

ステッパーのレイアウト

シングルステッパーのレイアウトは非常にシンプルです。

<!-- ステッパー要素 -->
<div class="stepper">
  <!-- ステッパーのマイナス/デクリメントボタン -->
  <div class="stepper-button-minus"></div>
  <!-- ステッパーの入力 -->
  <div class="stepper-input-wrap">
    <!-- 入力を編集不可能（読み取り専用）にすることを推奨します。 -->
    <input type="text" readonly value="10" />
  </div>
  <!-- ステッパーのプラス/インクリメントボタン -->
  <div class="stepper-button-plus"></div>
</div>

入力要素は必要ないが、値を保持する必要がある場合。

<!-- ステッパー要素 -->
<div class="stepper">
  <div class="stepper-button-minus"></div>
  <!-- ステッパー値要素 -->
  <div class="stepper-value">10</div>
  <div class="stepper-button-plus"></div>
</div>

また、ステッパーボタンの間に値を表示する必要がない場合は

<!-- ステッパー要素 -->
<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-fill-aurora	ステッパーボタンはAuroraテーマでのみフィルドスタイルになります。
stepper-round	丸みを帯びたステッパーボタン
stepper-round-ios	ステッパーボタンは、iOSテーマでのみ丸みを帯びます。
stepper-round-md	ステッパーボタンは、MDテーマでのみ丸くなります。
stepper-round-aurora	ステッパーボタンはAuroraテーマでのみ丸くなります。
stepper-small	小さいステッパー
stepper-small-ios	ステッパーはiOSテーマでのみ小さくなります
stepper-small-md	ステッパーは、MDテーマでのみ小さくなります
stepper-small-aurora	ステッパーはAuroraテーマでのみ小さくなります
stepper-large	大きいステッパー
stepper-large-ios	ステッパーはiOSテーマでのみ大きくなります
stepper-large-md	ステッパーはMDテーマでのみ大きくなります
stepper-large-aurora	Auroraテーマでのみ大きくなるステッパー
stepper-raised	盛り上がったステッパー
stepper-raised-ios	盛り上がったステッパー（iOSテーマのみ
stepper-raised-md	盛り上がったステッパー MDテーマでのみ
stepper-raised-aurora	盛り上がったステッパーはAuroraテーマのみ
color-[color]	カラーボタン（[color]はデフォルトカラーのいずれかです。

ステッパーアプリのメソッド

Stepperに関連するAppメソッドを見てみましょう。

app.stepper.create(parameters)- ステッパーのインスタンスを作成する

parameters - object. ステッパーのパラメータを持つオブジェクト

作成されたStepperのインスタンスを返すメソッド

app.stepper.destroy(el)- ステッパーのインスタンスを破棄する

el - HTMLElementまたはstring（CSSセレクタ付き）またはobject。破壊するステッパー要素またはステッパーインスタンスを指定します。

app.stepper.get(el)- HTML要素によるステッパーインスタンスの取得

el - HTMLElement または string (CSS Selectorを使用). ステッパーの要素です。

メソッドはステッパーのインスタンスを返します

app.stepper.getValue(el)- ステッパーの値の取得

el - HTMLElementまたはstring（CSSセレクタ付き）。ステッパーの要素です。

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

app.stepper.setValue(el, value)- 新しいステッパーの値を設定

el - HTMLElementまたはstring（CSSセレクタ付き）。ステッパーの要素を
value - numberを指定します。

メソッドはステッパーのインスタンスを返します

ステッパーのパラメータ

それでは、Stepperを作成する際に必要となる、利用可能なパラメータの一覧を見てみましょう。

Parameter	Type	Default	Description
el	HTMLElement string		ステッパーの要素。ステッパー要素のCSSセレクタを持つHTML要素または文字列
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		ステッパーが値を挿入する、ステッパー値要素またはこの要素のCSSセレクタ。指定されていない場合、また `inputEl` が渡されていない場合は、ステッパー要素の中にある `<div class="stepper-value">` を探してみます。
formatValue	function (value)		値を要求された形式に整形する関数です。現在の値を受け取り、新しいフォーマットされた値を返さなければなりません。
manualInputMode	boolean	false	手動入力モードを有効にします。このモードでは、キーボードから値を入力し、定義された精度で小数部をチェックすることができます。また、このモードで入力した場合、`step`パラメータは無視されます。
decimalPoint	number	4	手動入力モードの時のドットの後の桁数。
buttonsEndInputMode	boolean	true	ステッパーのマイナスまたはプラスボタンをクリックすると、手動入力モードを無効にします。
on	object		イベントハンドラーを持つオブジェクト。例えば、以下のようなものがあります。 `var stepper = app.stepper.create({ el: '.stepper', on: { change: function () { console.log('Stepper value changed') } } })`

ステッパーのメソッドとプロパティ

ステッパーを作成するためには、呼び出しが必要です。

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

その後、初期化されたインスタンス（上記の例では、stepperという変数）に、便利なメソッドとプロパティを設定します。

Properties
stepper.app	グローバルアプリのインスタンスへのリンク
stepper.el	ステッパーのHTML要素
stepper.$el	ステッパーのHTML要素を持つDom7インスタンス
stepper.min	ステッパーの最小値
stepper.max	ステッパーの最大値
stepper.value	ステッパーの値
stepper.inputEl	ステッパー入力 HTML要素
stepper.$inputEl	ステッパーの入力されたDom7インスタンス HTML要素
stepper.valueEl	ステッパー値コンテナ HTML要素
stepper.$valueEl	Dom7 instance with stepper value container HTML element（ステッパー値のコンテナを持つDom7インスタンス
stepper.params	ステッパーのパラメータ
Methods
stepper.getValue()	ステッパーの値を返す
stepper.setValue(value)	新しいステッパーの値の設定
stepper.increment()	プラス」ボタンをクリックするのと同様に、ステッパーの値を増加させる
stepper.decrement()	マイナス "ボタンをクリックするのと同様に、ステッパーの値を減少させる
stepper.plus()	stepper.increment()`のエイリアス
stepper.minus()	stepper.decrement()`のエイリアス
stepper.destroy()	ステッパーのインスタンスを破棄する
stepper.on(event, handler)	イベントハンドラの追加
stepper.once(event, handler)	イベントハンドラーを追加しますが、発生後は削除されます。
stepper.off(event, handler)	イベントハンドラの削除
stepper.off(event)	指定されたイベントのハンドラをすべて削除する
stepper.emit(event, ...args)	インスタンスでイベントを発生させる

ステッパーのイベント

ステッパーは、以下のDOMイベントをステッパー要素に、イベントをアプリとステッパーのインスタンスに発行します。

DOM イベント

Event	Target	Description
stepper:change	Stepper Element<div class="stepper">	イベントは、Stepper の値が変更されたときに発生します。
stepper:beforedestroy	Stepper Element<div class="stepper">	イベントは、Stepper インスタンスが破壊される直前に発生します。

アプリとステッパーのインスタンスのイベント

ステッパーインスタンスは、セルフインスタンスとアプリインスタンスの両方でイベントを発行します。アプリインスタンスのイベントは、同じ名前でプレフィックスとして stepper が付いています。

Event	Arguments	Target	Description
change	(stepper, value)	stepper	イベントは、ステッパーの値が変更されたときにトリガーされます。イベントハンドラは、引数としてステッパーインスタンスとステッパー値を受け取ります。
stepperChange	(stepper, value)	app
beforeDestroy	(stepper)	stepper	イベントは、ステッパーインスタンスが破壊される直前に発生します。引数のイベントハンドラは、ステッパのインスタンスを受け取ります。
stepperBeforeDestroy	(stepper)	app

ステッパーの自動初期化

ステッパーAPIを使用する必要がなく、ステッパーがページ内にあり、ページの初期化時にDOMに表示される場合、追加の stepper-init クラスを追加するだけで、自動初期化することができます。

<!-- ステッパーニットクラスの追加 -->
<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>

この場合、生成されたステッパーのインスタンスにアクセスするには、app.stepper.get というアプリのメソッドを使います。

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

if (stepper.value > 50) {
  // 何かをする
}

auto initを使用する際には、追加のパラメータを渡す必要があるかもしれません。これには2つの方法があります。

入力でステッパーを使用する場合、step, min, max, value パラメータは、同じ入力属性から設定できます。

<!-- min、max、step、valueパラメータは同じ入力属性に設定されます。 -->
<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>

また、内部に入力がない場合は、ステッパー要素の data- 属性を使って、利用可能なすべてのパラメーターを設定できます。

<!-- data-属性で設定されるパラメータ -->
<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 Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

: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-text-color: #fff;
  /*
  --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;
  --f7-stepper-border-width: 2px;
  --f7-stepper-small-border-width: 2px;
}
.ios {
  --f7-stepper-height: 28px;
  --f7-stepper-border-radius: 5px;
  /*
  --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;
}
.md {
  --f7-stepper-height: 36px;
  --f7-stepper-border-radius: 4px;
  /*
  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
  */
  --f7-stepper-large-height: 48px;
  --f7-stepper-small-height: 28px;
  --f7-stepper-value-font-size: 14px;
}
.aurora {
  /*
  --f7-stepper-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
  --f7-stepper-button-fill-hover-bg-color: var(--f7-theme-color-tint);
  */
  --f7-stepper-height: 36px;
  --f7-stepper-border-radius: 8px;
  /*
  --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
  */
  --f7-stepper-large-height: 48px;
  --f7-stepper-small-height: 28px;
  --f7-stepper-value-font-size: 14px;
}

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Stepper</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Shape and size</div>
      <div class="block block-strong text-align-center">
        <div class="row">
          <div class="col">
            <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 class="col">
            <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="row margin-top">
          <div class="col">
            <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 class="col">
            <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="row margin-top">
          <div class="col">
            <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 class="col">
            <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="row margin-top">
          <div class="col">
            <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 class="col">
            <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="row margin-top">
          <div class="col">
            <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 class="col">
            <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="row margin-top">
          <div class="col">
            <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 class="col">
            <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 text-align-center">
        <div class="row">
          <div class="col">
            <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 class="col">
            <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="row margin-top">
          <div class="col">
            <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 class="col">
            <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="row margin-top">
          <div class="col">
            <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 class="col">
            <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="row margin-top">
          <div class="col">
            <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 class="col">
            <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="row margin-top">
          <div class="col">
            <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 class="col">
            <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="row margin-top">
          <div class="col">
            <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 class="col">
            <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 text-align-center">
        <div class="row">
          <div class="col">
            <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 class="col">
            <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="row margin-top">
          <div class="col">
            <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 class="col">
            <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="row margin-top">
          <div class="col">
            <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 class="col">
            <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="row margin-top">
          <div class="col">
            <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 class="col">
            <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 text-align-center">
        <div class="row">
          <div class="col">
            <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 class="col">
            <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 text-align-center">
        <div class="row">
          <div class="col">
            <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 class="col">
            <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 text-align-center">
        <div class="row">
          <div class="col">
            <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 class="col">
            <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 text-align-center">
        <div class="row">
          <div class="col">
            <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>
      </div>
      <div class="block-title">Custom value element</div>
      <div class="list">
        <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">
        <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 text-align-center">
        <div class="row">
          <div class="col">
            <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>
    </div>
  </div>
</template>
<style>
  .col 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>