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

ステッパー Svelte コンポーネントは、ステッパーコンポーネントを表します。

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

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

ステッパー

ステッパーのプロパティ

プロパティ	タイプ	デフォルト	説明
<Stepper> プロパティ
init	boolean	true	ステッパーを初期化します
value	number	0	ステッパーの値
min	number	0	最小値
max	number	100	最大値
step	number	1	値間の最小ステップ
wraps	boolean	false	有効にすると、最大値を超えて増やすと値が最小値に設定されます。同様に、最小値を下回って減らすと、値は最大値に設定されます
autorepeat	boolean	false	有効にすると、プラス/マイナスボタンをタップし続けると、値が繰り返し増減します
autorepeatDynamic	boolean	false	有効にすると、ボタンを押し続ける時間に基づいて自動リピートの比率が増加します
input	boolean	true	`<input>`要素をレンダリングするかどうかを定義します
inputReadonly	boolean	false	内部入力要素を`readonly`にします
name	string		入力要素の "name" 属性
buttonsOnly	boolean	false	ステッパーボタン間の内部値コンテナを無効にします
formatValue	function(value)		ボタン間の値要素の値を書式設定するためのカスタム関数。新しい書式設定された値を返す必要があります
manualInputMode	boolean	false	手動入力モードを有効にします。このモードでは、キーボードから値を入力し、定義された精度で小数部を確認できます。また、このモードで入力する場合、`step`パラメータは無視されます。
decimalPoint	number	4	手動入力モードの場合、ドットの後の桁数。
buttonsEndInputMode	boolean	true	ステッパーのマイナスまたはプラスボタンのクリックで手動入力モードを無効にします。
disabled	boolean	false	ステッパーが無効になっているかどうかを定義します
round	boolean	false	ステッパーを丸くします
roundIos	boolean	false	iOSテーマの場合のみ、ステッパーを丸くします
roundMd	boolean	false	MDテーマの場合のみ、ステッパーを丸くします
large	boolean	false	大きなステッパーを作成します
largeIos	boolean	false	iOSテーマの場合のみ、大きなステッパーを作成します
largeMd	boolean	false	MDテーマの場合のみ、大きなステッパーを作成します
small	boolean	false	小さなステッパーを作成します
smallIos	boolean	false	iOSテーマの場合のみ、小さなステッパーを作成します
smallMd	boolean	false	MDテーマの場合のみ、小さなステッパーを作成します
fill	boolean	false	ステッパーを塗りつぶし色にします
fillIos	boolean	false	iOSテーマの場合のみ、ステッパーを塗りつぶし色にします
fillMd	boolean	false	MDテーマの場合のみ、ステッパーを塗りつぶし色にします
raised	boolean	false	ステッパーを隆起させます。
raisedIos	boolean	false	iOS テーマのステッパーを隆起させます。
raisedMd	boolean	false	MD テーマのステッパーを隆起させます。

ステッパーイベント

イベント	説明
<Stepper> イベント
stepperChange	ステッパーの値が変更されたときにイベントがトリガーされます
stepperMinusClick	「マイナス」ボタンをクリックするとイベントがトリガーされます
stepperPlusClick	「プラス」ボタンをクリックするとイベントがトリガーされます
input	入力の `input` イベントでイベントがトリガーされます

ステッパーメソッド

<Stepper> メソッド
.increment()	「プラス」ボタンをクリックするのと同じように、ステッパーの値を増やします
.decremenet()	「マイナス」ボタンをクリックするのと同じように、ステッパーの値を減らします
.setValue(newValue)	新しいステッパー値を設定します
.getValue()	ステッパー値を返します

例

stepper.svelte

<script>
  import {
    Page,
    Navbar,
    BlockTitle,
    Block,
    BlockHeader,
    List,
    ListItem,
    Stepper,
  } from 'framework7-svelte';

  let applesCount = 0;
  let orangesCount = 0;
  let meetingTime = 15;

  $: meetingTimeComputed = (() => {
    const value = 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(' ');
  })();

  function setApples(value) {
    applesCount = value;
  }
  function setOranges(value) {
    orangesCount = value;
  }
  function setMeetingTime(value) {
    meetingTime = value;
  }
</script>

<Page>
  <Navbar title="Stepper" />
  <BlockTitle>Shape and size</BlockTitle>
  <Block strong outlineIos class="text-align-center">
    <div class="grid grid-cols-2 grid-gap">
      <div>
        <small class="display-block">Default</small>
        <Stepper />
      </div>
      <div>
        <small class="display-block">Round</small>
        <Stepper round />
      </div>
    </div>

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

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

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

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

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

  <BlockTitle>Raised</BlockTitle>
  <Block strong outlineIos class="text-align-center">
    <div class="grid grid-cols-2 grid-gap">
      <div>
        <small class="display-block">Default</small>
        <Stepper raised />
      </div>
      <div>
        <small class="display-block">Round</small>
        <Stepper raised round />
      </div>
    </div>

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

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

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

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

    <div class="grid grid-cols-2 grid-gap margin-top">
      <div>
        <small class="display-block">Large Fill</small>
        <Stepper raised large fill />
      </div>
      <div>
        <small class="display-block">Large Round Fill</small>
        <Stepper raised large round fill />
      </div>
    </div>
  </Block>
  <BlockTitle>Colors</BlockTitle>
  <Block strong outlineIos class="text-align-center">
    <div class="grid grid-cols-2 grid-gap">
      <div>
        <Stepper fill color="red" />
      </div>
      <div>
        <Stepper fill round color="green" />
      </div>
    </div>

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

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

    <div class="grid grid-cols-2 grid-gap margin-top">
      <div>
        <Stepper fill small color="gray" />
      </div>
      <div>
        <Stepper fill small round color="black" />
      </div>
    </div>
  </Block>
  <BlockTitle>Without input element</BlockTitle>
  <Block strong outlineIos class="text-align-center">
    <div class="grid grid-cols-2 grid-gap">
      <div>
        <Stepper input={false} />
      </div>
      <div>
        <Stepper input={false} round />
      </div>
    </div>
  </Block>
  <BlockTitle>Min, max, step</BlockTitle>
  <Block strong outlineIos class="text-align-center">
    <div class="grid grid-cols-2 grid-gap">
      <div>
        <Stepper fill value={100} min={0} max={1000} step={100} />
      </div>
      <div>
        <Stepper fill input={false} value={5} min={0} max={10} step={0.5} />
      </div>
    </div>
  </Block>

  <BlockTitle>Autorepeat (Tap & hold)</BlockTitle>
  <BlockHeader>
    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.
  </BlockHeader>
  <Block strong outlineIos class="text-align-center">
    <div class="grid grid-cols-2 grid-gap">
      <div>
        <small class="display-block">Default</small>
        <Stepper fill value={0} min={0} max={100} step={1} autorepeat={true} />
      </div>
      <div>
        <small class="display-block">Dynamic</small>
        <Stepper
          fill
          value={0}
          min={0}
          max={100}
          step={1}
          autorepeat={true}
          autorepeatDynamic={true}
        />
      </div>
    </div>
  </Block>

  <BlockTitle>Wraps</BlockTitle>
  <BlockHeader>
    In wraps mode incrementing beyond maximum value sets value to minimum value, likewise,
    decrementing below minimum value sets value to maximum value
  </BlockHeader>
  <Block strong outlineIos class="text-align-center">
    <Stepper fill value={0} min={0} max={10} step={1} autorepeat={true} wraps={true} />
  </Block>

  <BlockTitle>Custom value element</BlockTitle>
  <List strongIos outlineIos dividersIos>
    <ListItem title={`Apples ${applesCount}`}>
      <span slot="after">
        <Stepper buttonsOnly={true} small raised onStepperChange={setApples} />
      </span>
    </ListItem>
    <ListItem title={`Oranges ${orangesCount}`}>
      <span slot="after">
        <Stepper buttonsOnly={true} small raised onStepperChange={setOranges} />
      </span>
    </ListItem>
  </List>

  <BlockTitle>Custom value format</BlockTitle>
  <List strongIos outlineIos dividersIos>
    <ListItem header="Meeting starts in" title={meetingTimeComputed}>
      <span slot="after">
        <Stepper
          min={15}
          max={240}
          step={15}
          value={meetingTime}
          buttonsOnly={true}
          small
          fill
          raised
          onStepperChange={setMeetingTime}
        />
      </span>
    </ListItem>
  </List>

  <BlockTitle>Manual input</BlockTitle>
  <BlockHeader>
    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.
  </BlockHeader>
  <Block strong outlineIos class="text-align-center">
    <Stepper
      fill
      value={0}
      min={0}
      max={1000}
      step={1}
      autorepeat={true}
      wraps={true}
      manualInputMode={true}
      decimalPoint={2}
    />
  </Block>
</Page>

このドキュメントを改善する

このページについて

ステッパーコンポーネント
ステッパーのプロパティ
ステッパーイベント
ステッパーメソッド
例