Stepper React コンポーネント

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

Stepper コンポーネント

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

ステッパー

Stepper プロパティ

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

Stepper イベント

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

Stepper メソッド

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

例

stepper.jsx

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  BlockTitle,
  Block,
  BlockHeader,
  List,
  ListItem,
  Stepper,
} from 'framework7-react';

export default () => {
  const [applesCount, setApplesCount] = useState(0);
  const [orangesCount, setOrangesCount] = useState(0);
  const [meetingTime, setMeetingTime] = useState(15);

  const 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(' ');
  };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        <div className="margin-top grid grid-cols-2 grid-gap">
          <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 className="text-align-center">
        <div className="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 className="text-align-center">
        <div className="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 className="text-align-center">
        <div className="grid grid-cols-2 grid-gap">
          <div>
            <small className="display-block">Default</small>
            <Stepper fill value={0} min={0} max={100} step={1} autorepeat={true} />
          </div>
          <div>
            <small className="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 className="text-align-center">
        <Stepper fill value={0} min={0} max={10} step={1} autorepeat={true} wraps={true} />
      </Block>

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

      <BlockTitle>Custom value format</BlockTitle>
      <List outlineIos strongIos dividersIos>
        <ListItem header="Meeting starts in" title={meetingTimeComputed()}>
          <Stepper
            min={15}
            max={240}
            step={15}
            value={meetingTime}
            buttonsOnly={true}
            small
            fill
            raised
            slot="after"
            onStepperChange={setMeetingTime}
          />
        </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 keyboar and check
        fractional part with defined accurancy. Click outside or enter Return key, ending manual
        mode.
      </BlockHeader>
      <Block strong outlineIos className="text-align-center">
        <Stepper
          fill
          value={0}
          min={0}
          max={1000}
          step={1}
          autorepeat={true}
          wraps={true}
          manualInputMode={true}
          decimalPoint={2}
        />
      </Block>
    </Page>
  );
};

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

このページについて

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