スポンサースポンサーになる

Stepper Vueコンポーネント

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

Stepperコンポーネント

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

Stepperプロパティ

プロパティ型デフォルト説明
<f7-stepper> プロパティ
initブール値trueStepperを初期化します
value数値0Stepperの値
min数値0最小値
max数値100最大値
step数値1値間の最小ステップ
wrapsブール値false有効にすると、最大値を超えて増加すると値が最小値に設定され、同様に最小値を下回って減少すると値が最大値に設定されます。
autorepeatブール値false有効にすると、プラス/マイナスボタンをタップ＆ホールドしている間、値を繰り返し増減します。
autorepeat-dynamicブール値false有効にすると、ボタンを押し続けている時間に基づいて自動繰り返し率が増加します。
inputブール値true<input>要素をレンダリングするかどうかを定義します。
input-readonlyブール値false内部のinput要素をreadonlyにします。
name文字列input要素の"name"属性
buttons-onlyブール値falseステッパーボタン間の内部値コンテナを無効にします。
format-valuefunction(value)ボタン間の値要素の値をフォーマットするためのカスタム関数。新しいフォーマットされた値を返す必要があります。
manual-input-modeブール値false手動入力モードを有効にします。このモードでは、キーボードから値を入力し、定義された精度で小数部を確認できます。また、このモードで入力する場合は、stepパラメーターは無視されます。
decimal-point数値4手動入力モードの場合、小数点以下の桁数。
buttons-end-input-modeブール値trueステッパーのマイナスまたはプラスボタンをクリックしたときに手動入力モードを無効にします。
disabledブール値falseステッパーを無効にするかどうかを定義します。
roundブール値falseステッパーを丸くします。
round-iosブール値falseiOSテーマのみでステッパーを丸くします。
round-mdブール値falseMDテーマのみでステッパーを丸くします。
largeブール値falseステッパーを大きくします。
large-iosブール値falseiOSテーマのみでステッパーを大きくします。
large-mdブール値falseMDテーマのみでステッパーを大きくします。
smallブール値falseステッパーを小さくします。
small-iosブール値falseiOSテーマのみでステッパーを小さくします。
small-mdブール値falseMDテーマのみでステッパーを小さくします。
fillブール値falseステッパーを塗りつぶした色にします。
fill-iosブール値falseiOSテーマのみでステッパーを塗りつぶした色にします。
fill-mdブール値falseMDテーマのみでステッパーを塗りつぶした色にします。
raisedブール値falseステッパーを立体的にします。
raised-iosブール値falseiOSテーマでステッパーを立体的にします。
raised-mdブール値falseMDテーマでステッパーを立体的にします。

Stepperイベント

イベント説明
<f7-stepper> イベント
stepper:changeStepperの値が変更されたときにトリガーされます。
stepper:minusclick"マイナス"ボタンをクリックしたときにトリガーされます。
stepper:plusclick"プラス"ボタンをクリックしたときにトリガーされます。
input入力のinputイベントでトリガーされます。

Stepperメソッド

<f7-stepper> メソッド
.increment()"プラス"ボタンをクリックするのと同様に、ステッパーの値を増やします。
.decrement()"マイナス"ボタンをクリックするのと同様に、ステッパーの値を減らします。
.setValue(newValue)新しいステッパー値を設定します。
.getValue()ステッパーの値を返します。

Stepper v-model

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>

例

stepper.vue
<template>
  <f7-page>
    <f7-navbar title="Stepper"></f7-navbar>
    <f7-block-title>Shape and size</f7-block-title>
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <small class="display-block">Default</small>
          <f7-stepper />
        </div>
        <div>
          <small class="display-block">Round</small>
          <f7-stepper round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Fill</small>
          <f7-stepper fill />
        </div>
        <div>
          <small class="display-block">Round Fill</small>
          <f7-stepper fill round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Small</small>
          <f7-stepper small />
        </div>
        <div>
          <small class="display-block">Small Round</small>
          <f7-stepper small round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Small Fill</small>
          <f7-stepper small fill />
        </div>
        <div>
          <small class="display-block">Small Round Fill</small>
          <f7-stepper small round fill />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Large</small>
          <f7-stepper large />
        </div>
        <div>
          <small class="display-block">Large Round</small>
          <f7-stepper large round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Large Fill</small>
          <f7-stepper large fill />
        </div>
        <div>
          <small class="display-block">Large Round Fill</small>
          <f7-stepper large round fill />
        </div>
      </div>
    </f7-block>

    <f7-block-title>Raised</f7-block-title>
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <small class="display-block">Default</small>
          <f7-stepper raised />
        </div>
        <div>
          <small class="display-block">Round</small>
          <f7-stepper raised round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Fill</small>
          <f7-stepper raised fill />
        </div>
        <div>
          <small class="display-block">Round Fill</small>
          <f7-stepper raised fill round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Small</small>
          <f7-stepper raised small />
        </div>
        <div>
          <small class="display-block">Small Round</small>
          <f7-stepper raised small round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Small Fill</small>
          <f7-stepper raised small fill />
        </div>
        <div>
          <small class="display-block">Small Round Fill</small>
          <f7-stepper raised small round fill />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Large</small>
          <f7-stepper raised large />
        </div>
        <div>
          <small class="display-block">Large Round</small>
          <f7-stepper raised large round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Large Fill</small>
          <f7-stepper raised large fill />
        </div>
        <div>
          <small class="display-block">Large Round Fill</small>
          <f7-stepper raised large round fill />
        </div>
      </div>
    </f7-block>
    <f7-block-title>Colors</f7-block-title>
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <f7-stepper fill color="red" />
        </div>
        <div>
          <f7-stepper fill round color="green" />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <f7-stepper fill color="blue" />
        </div>
        <div>
          <f7-stepper fill round color="pink" />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <f7-stepper fill small color="yellow" />
        </div>
        <div>
          <f7-stepper fill small round color="orange" />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <f7-stepper fill small color="gray" />
        </div>
        <div>
          <f7-stepper fill small round color="black" />
        </div>
      </div>
    </f7-block>
    <f7-block-title>Without input element</f7-block-title>
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <f7-stepper :input="false" />
        </div>
        <div>
          <f7-stepper :input="false" round />
        </div>
      </div>
    </f7-block>
    <f7-block-title>Min, max, step</f7-block-title>
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <f7-stepper fill :value="100" :min="0" :max="1000" :step="100" />
        </div>
        <div>
          <f7-stepper fill :input="false" :value="5" :min="0" :max="10" :step="0.5" />
        </div>
      </div>
    </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 outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <small class="display-block">Default</small>
          <f7-stepper fill :value="0" :min="0" :max="100" :step="1" :autorepeat="true" />
        </div>
        <div>
          <small class="display-block">Dynamic</small>
          <f7-stepper
            fill
            :value="0"
            :min="0"
            :max="100"
            :step="1"
            :autorepeat="true"
            :autorepeat-dynamic="true"
          />
        </div>
      </div>
    </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 outline-ios class="text-align-center">
      <f7-stepper fill :value="0" :min="0" :max="10" :step="1" :autorepeat="true" :wraps="true" />
    </f7-block>

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

    <f7-block-title>Custom value format</f7-block-title>
    <f7-list strong-ios outline-ios dividers-ios>
      <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
            fill
            raised
            @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 keyboar and check
      fractional part with defined accurancy. Click outside or enter Return key, ending manual
      mode.</f7-block-header
    >
    <f7-block strong outline-ios class="text-align-center">
      <f7-stepper
        fill
        :value="0"
        :min="0"
        :max="1000"
        :step="1"
        :autorepeat="true"
        :wraps="true"
        :manual-input-mode="true"
        :decimal-point="2"
      />
    </f7-block>
  </f7-page>
</template>
<script>
import {
  f7Page,
  f7Navbar,
  f7BlockTitle,
  f7Block,
  f7BlockHeader,
  f7List,
  f7ListItem,
  f7Stepper,
} from 'framework7-vue';

export default {
  components: {
    f7Page,
    f7Navbar,
    f7BlockTitle,
    f7Block,
    f7BlockHeader,
    f7List,
    f7ListItem,
    f7Stepper,
  },
  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>
このドキュメントを改善する
このページについて