ステッパーVueコンポーネント

Stepper Vueコンポーネントは、Stepperコンポーネントを表します。

Stepper コンポーネント

以下のコンポーネントが含まれています。

f7-stepper

ステッパーのプロパティ

Prop	Type	Default	Description
<f7-stepper> properties
init	boolean	true	ステッパーの初期化
value	number	0	ステッパーの値
min	number	0	最小値
max	number	100	最大値
step	number	1	値の最小ステップ
wraps	boolean	false	有効にすると、最大値を超えてインクリメントすると最小値に、最小値よりデクリメントすると最大値になります。
autorepeat	boolean	false	有効にすると、プラス／マイナスボタンをタップし続けている間、値の増加／減少を繰り返します。
autorepeat-dynamic	boolean	false	有効にすると、ボタンを押している時間に応じて自動リピートの比率が増加します。
input	boolean	true	` 要素をレンダリングするかどうかを定義します。
input-readonly	boolean	false	内部の入力要素を `readonly` にします。
name	string		入力要素の "name "属性
buttons-only	boolean	false	ステッパーボタンの間の内側のバリューコンテナを無効にする
format-value	function(value)		ボタンの間のvalue要素の値をフォーマットするカスタム関数。フォーマットされた新しい値を返す必要があります。
manual-input-mode	boolean	false	手動入力モードを有効にする。このモードでは、キーボードから値を入力し、定義された精度で端数部分をチェックすることができます。また、このモードで入力した場合、`step`パラメータは無視されます。
decimal-point	number	4	手動入力モードの時のドットの後の桁数。
buttons-end-input-mode	boolean	true	ステッパーのマイナスまたはプラスボタンをクリックすると、手動入力モードを無効にします。
disabled	boolean	false	ステッパーを無効にするかどうかを設定します。
round	boolean	false	ステッパーを丸くする
round-ios	boolean	false	iOSテーマのみ、ステッパーを丸くします。
round-md	boolean	false	MDテーマのみ、ステッパーを丸くします。
large	boolean	false	大型ステッパーの作成
large-ios	boolean	false	iOSテーマのみで大型ステッパーを作成する
large-md	boolean	false	MDテーマのみの大型ステッパーを作る
small	boolean	false	小型のステッパーを作る
small-ios	boolean	false	iOSテーマ専用の小型ステッパーを作成
small-md	boolean	false	小型ステッパーをMDテーマのみに作成
fill	boolean	false	踏み台の塗りつぶし色作成
fill-ios	boolean	false	iOSテーマのみ「ステッパーの塗りつぶし」を作成します。
fill-md	boolean	false	MDテーマのみ、ステッパーを塗りつぶした色にする
raised	boolean	false	踏み台昇降機能
raised-ios	boolean	false	iOSテーマでステッパーを盛り上げます。
raised-md	boolean	false	MDテーマのステッパーを盛り上げます。

ステッパーのイベント

Event	Description
<f7-stepper> events
stepper:change	ステッパーの値が変更されるとイベントが発生します。
stepper:minusclick	マイナス」ボタンをクリックするとイベントが発生します
stepper:plusclick	プラスボタンのクリックでイベント発生
input	入力の `input` イベントでイベントが発生します。

ステッパーのメソッド

<f7-stepper> methods
.increment()	プラス」ボタンをクリックするのと同様に、ステッパーの値を増加させます。
.decremenet()	マイナス」ボタンをクリックするのと同様に、ステッパーの値を減少させる。
.setValue(newValue)	新しいステッパー値の設定
.getValue()	ステッパーの値を返す

ステッパーのVモデル

f7-stepperコンポーネントは、valueプロップにv-modelをサポートしています。

<template>
  <p>Value is {{ count }}</p>
  ...
  <f7-stepper
    v-model:value="count"
  />
  ...
</template>
<script>
  export default {
    data() {
      count: 1,
    },
    ...
  };
</script>

Examples

<template>
<f7-page>
  <f7-navbar title="Stepper"></f7-navbar>
  <f7-block-title>Shape and size</f7-block-title>
  <f7-block strong class="text-align-center">
    <f7-row>
      <f7-col>
        <small class="display-block">Default</small>
        <f7-stepper></f7-stepper>
      </f7-col>
      <f7-col>
        <small class="display-block">Round</small>
        <f7-stepper round></f7-stepper>
      </f7-col>
    </f7-row>

    <f7-row class="margin-top">
      <f7-col>
        <small class="display-block">Fill</small>
        <f7-stepper fill></f7-stepper>
      </f7-col>
      <f7-col>
        <small class="display-block">Round Fill</small>
        <f7-stepper fill round></f7-stepper>
      </f7-col>
    </f7-row>

    <f7-row class="margin-top">
      <f7-col>
        <small class="display-block">Small</small>
        <f7-stepper small></f7-stepper>
      </f7-col>
      <f7-col>
        <small class="display-block">Small Round</small>
        <f7-stepper small round></f7-stepper>
      </f7-col>
    </f7-row>

    <f7-row class="margin-top">
      <f7-col>
        <small class="display-block">Small Fill</small>
        <f7-stepper small fill></f7-stepper>
      </f7-col>
      <f7-col>
        <small class="display-block">Small Round Fill</small>
        <f7-stepper small round fill></f7-stepper>
      </f7-col>
    </f7-row>

    <f7-row class="margin-top">
      <f7-col>
        <small class="display-block">Large</small>
        <f7-stepper large></f7-stepper>
      </f7-col>
      <f7-col>
        <small class="display-block">Large Round</small>
        <f7-stepper large round></f7-stepper>
      </f7-col>
    </f7-row>

    <f7-row class="margin-top">
      <f7-col>
        <small class="display-block">Large Fill</small>
        <f7-stepper large fill></f7-stepper>
      </f7-col>
      <f7-col>
        <small class="display-block">Large Round Fill</small>
        <f7-stepper large round fill></f7-stepper>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Raised</f7-block-title>
  <f7-block strong class="text-align-center">
    <f7-row>
      <f7-col>
        <small class="display-block">Default</small>
        <f7-stepper raised></f7-stepper>
      </f7-col>
      <f7-col>
        <small class="display-block">Round</small>
        <f7-stepper raised round></f7-stepper>
      </f7-col>
    </f7-row>

    <f7-row class="margin-top">
      <f7-col>
        <small class="display-block">Fill</small>
        <f7-stepper raised fill></f7-stepper>
      </f7-col>
      <f7-col>
        <small class="display-block">Round Fill</small>
        <f7-stepper raised fill round></f7-stepper>
      </f7-col>
    </f7-row>

    <f7-row class="margin-top">
      <f7-col>
        <small class="display-block">Small</small>
        <f7-stepper raised small></f7-stepper>
      </f7-col>
      <f7-col>
        <small class="display-block">Small Round</small>
        <f7-stepper raised small round></f7-stepper>
      </f7-col>
    </f7-row>

    <f7-row class="margin-top">
      <f7-col>
        <small class="display-block">Small Fill</small>
        <f7-stepper raised small fill></f7-stepper>
      </f7-col>
      <f7-col>
        <small class="display-block">Small Round Fill</small>
        <f7-stepper raised small round fill></f7-stepper>
      </f7-col>
    </f7-row>

    <f7-row class="margin-top">
      <f7-col>
        <small class="display-block">Large</small>
        <f7-stepper raised large></f7-stepper>
      </f7-col>
      <f7-col>
        <small class="display-block">Large Round</small>
        <f7-stepper raised large round></f7-stepper>
      </f7-col>
    </f7-row>

    <f7-row class="margin-top">
      <f7-col>
        <small class="display-block">Large Fill</small>
        <f7-stepper raised large fill></f7-stepper>
      </f7-col>
      <f7-col>
        <small class="display-block">Large Round Fill</small>
        <f7-stepper raised large round fill></f7-stepper>
      </f7-col>
    </f7-row>
  </f7-block>
  <f7-block-title>Colors</f7-block-title>
  <f7-block strong class="text-align-center">
    <f7-row>
      <f7-col>
        <f7-stepper fill color="red"></f7-stepper>
      </f7-col>
      <f7-col>
        <f7-stepper fill round color="green"></f7-stepper>
      </f7-col>
    </f7-row>

    <f7-row class="margin-top">
      <f7-col>
        <f7-stepper fill color="blue"></f7-stepper>
      </f7-col>
      <f7-col>
        <f7-stepper fill round color="pink"></f7-stepper>
      </f7-col>
    </f7-row>

    <f7-row class="margin-top">
      <f7-col>
        <f7-stepper fill small color="yellow"></f7-stepper>
      </f7-col>
      <f7-col>
        <f7-stepper fill small round color="orange"></f7-stepper>
      </f7-col>
    </f7-row>

    <f7-row class="margin-top">
      <f7-col>
        <f7-stepper fill small color="gray"></f7-stepper>
      </f7-col>
      <f7-col>
        <f7-stepper fill small round color="black"></f7-stepper>
      </f7-col>
    </f7-row>
  </f7-block>
  <f7-block-title>Without input element</f7-block-title>
  <f7-block strong class="text-align-center">
    <f7-row>
      <f7-col>
        <f7-stepper :input="false"></f7-stepper>
      </f7-col>
      <f7-col>
        <f7-stepper :input="false" round></f7-stepper>
      </f7-col>
    </f7-row>
  </f7-block>
  <f7-block-title>Min, max, step</f7-block-title>
  <f7-block strong class="text-align-center">
    <f7-row>
      <f7-col>
        <f7-stepper :value="100" :min="0" :max="1000" :step="100"></f7-stepper>
      </f7-col>
      <f7-col>
        <f7-stepper :input="false" :value="5" :min="0" :max="10" :step="0.5"></f7-stepper>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Autorepeat (Tap & hold)</f7-block-title>
  <f7-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.</f7-block-header>
  <f7-block strong class="text-align-center">
    <f7-row>
      <f7-col>
        <small class="display-block">Default</small>
        <f7-stepper :value="0" :min="0" :max="100" :step="1" :autorepeat="true"></f7-stepper>
      </f7-col>
      <f7-col>
        <small class="display-block">Dynamic</small>
        <f7-stepper :value="0" :min="0" :max="100" :step="1" :autorepeat="true" :autorepeat-dynamic="true"></f7-stepper>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Wraps</f7-block-title>
  <f7-block-header>In wraps mode incrementing beyond maximum value sets value to minimum value, likewise, decrementing below minimum value sets value to maximum value</f7-block-header>
  <f7-block strong class="text-align-center">
    <f7-row>
      <f7-col>
        <f7-stepper :value="0" :min="0" :max="10" :step="1" :autorepeat="true" :wraps="true"></f7-stepper>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Custom value element</f7-block-title>
  <f7-list>
    <f7-list-item :title="`Apples ${applesCount}`">
      <template #after>
        <f7-stepper :buttons-only="true" small raised @stepper:change="setApples"></f7-stepper>
      </template>
    </f7-list-item>
    <f7-list-item :title="`Oranges ${orangesCount}`">
      <template #after>
        <f7-stepper :buttons-only="true" small raised @stepper:change="setOranges"></f7-stepper>
      </template>
    </f7-list-item>
  </f7-list>

  <f7-block-title>Custom value format</f7-block-title>
  <f7-list>
    <f7-list-item header="Meeting starts in" :title="meetingTimeComputed">
      <template #after>
        <f7-stepper
          :min="15"
          :max="240"
          :step="15"
          :value="meetingTime"
          :buttons-only="true"
          small
          @stepper:change="setMeetingTime"
        />
      </template>
    </f7-list-item>
  </f7-list>

  <f7-block-title>Manual input</f7-block-title>
  <f7-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.</f7-block-header>
  <f7-block strong class="text-align-center">
    <f7-row>
      <f7-col>
        <f7-stepper fill :value="0" :min="0" :max="1000" :step="1" :autorepeat="true" :wraps="true" :manual-input-mode="true" :decimal-point="2"></f7-stepper>
      </f7-col>
    </f7-row>
  </f7-block>
</f7-page>
</template>
<script>
  export default {
    data() {
      return {
        applesCount: 0,
        orangesCount: 0,
        meetingTime: 15,
      };
    },
    computed: {
      meetingTimeComputed() {
        const self = this;
        const value = self.meetingTime;

        const hours = Math.floor(value / 60);
        const minutes = value - (hours * 60);
        const formatted = [];
        if (hours > 0) {
          formatted.push(hours + ' ' + (hours > 1 ? 'hours' : 'hour'));
        }
        if (minutes > 0) {
          formatted.push(minutes + ' minutes');
        }
        return formatted.join(' ');
      },
    },
    methods: {
      setApples(value) {
        this.applesCount = value;
      },
      setOranges(value) {
        this.orangesCount = value;
      },
      setMeetingTime(value) {
        this.meetingTime = value;
      },
    },
  }
</script>