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

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

Stepper コンポーネント

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

Stepper

ステッパーのプロパティ

Prop	Type	Default	Description
<Stepper> properties
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	` 要素をレンダリングするかどうかを定義します。
inputReadonly	boolean	false	内部の入力要素を `readonly` にします。
name	string		入力要素の "name "属性
buttonsOnly	boolean	false	ステッパーボタンの間の内側のバリューコンテナを無効にする
formatValue	function(value)		ボタンの間の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 テーマのみ、ステッパーを丸くします
roundAurora	boolean	false	Auroraテーマのみ、ステッパーを丸くします
large	boolean	false	大型ステッパーの作成
largeIos	boolean	false	iOSテーマ専用の大型ステッパーを作成
largeMd	boolean	false	MDテーマ専用の大型ステッパーを作る
largeAurora	boolean	false	Auroraテーマ専用の大型ステッパーを作る
small	boolean	false	小型ステッパーの作成
smallIos	boolean	false	iOSテーマ専用の小型ステッパーを作成
smallMd	boolean	false	MDテーマ専用の小型ステッパーを作る
smallAurora	boolean	false	Auroraテーマのみに小さなステッパーを作成
fill	boolean	false	塗りつぶしステッパーの作成
fillIos	boolean	false	iOSテーマのみ、ステッパーを塗りつぶした色にします
fillMd	boolean	false	MDテーマのみにステッパーの塗りつぶしを作成
fillAurora	boolean	false	Auroraテーマのみ、ステッパーを塗りつぶした色にする
raised	boolean	false	踏み台昇降を行います。
raisedIos	boolean	false	iOSテーマのステッパーを上げます。
raisedMd	boolean	false	MDテーマのステッパーを上げます。
raisedAurora	boolean	false	Auroraテーマのステッパーを高くします。

ステッパーのイベント

Event	Description
<Stepper> events
stepperChange	ステッパーの値が変更されるとイベントが発生します。
stepperMinusClick	マイナス」ボタンをクリックするとイベントが発生します。
stepperPlusClick	イベントは「プラス」ボタンをクリックすると発生します。
input	イベントは入力の `input` イベントで発生します。

ステッパーのメソッド

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

Examples

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  BlockTitle,
  Block,
  Row,
  Col,
  Stepper,
  BlockHeader,
  List,
  ListItem,
} 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 className="text-align-center">
        <Row>
          <Col>
            <small className="display-block">Default</small>
            <Stepper />
          </Col>
          <Col>
            <small className="display-block">Round</small>
            <Stepper round />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Fill</small>
            <Stepper fill />
          </Col>
          <Col>
            <small className="display-block">Round Fill</small>
            <Stepper fill round />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Small</small>
            <Stepper small />
          </Col>
          <Col>
            <small className="display-block">Small Round</small>
            <Stepper small round />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Small Fill</small>
            <Stepper small fill />
          </Col>
          <Col>
            <small className="display-block">Small Round Fill</small>
            <Stepper small round fill />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Large</small>
            <Stepper large />
          </Col>
          <Col>
            <small className="display-block">Large Round</small>
            <Stepper large round />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Large Fill</small>
            <Stepper large fill />
          </Col>
          <Col>
            <small className="display-block">Large Round Fill</small>
            <Stepper large round fill />
          </Col>
        </Row>
      </Block>

      <BlockTitle>Raised</BlockTitle>
      <Block strong className="text-align-center">
        <Row>
          <Col>
            <small className="display-block">Default</small>
            <Stepper raised />
          </Col>
          <Col>
            <small className="display-block">Round</small>
            <Stepper raised round />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Fill</small>
            <Stepper raised fill />
          </Col>
          <Col>
            <small className="display-block">Round Fill</small>
            <Stepper raised fill round />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Small</small>
            <Stepper raised small />
          </Col>
          <Col>
            <small className="display-block">Small Round</small>
            <Stepper raised small round />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Small Fill</small>
            <Stepper raised small fill />
          </Col>
          <Col>
            <small className="display-block">Small Round Fill</small>
            <Stepper raised small round fill />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Large</small>
            <Stepper raised large />
          </Col>
          <Col>
            <small className="display-block">Large Round</small>
            <Stepper raised large round />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Large Fill</small>
            <Stepper raised large fill />
          </Col>
          <Col>
            <small className="display-block">Large Round Fill</small>
            <Stepper raised large round fill />
          </Col>
        </Row>
      </Block>
      <BlockTitle>Colors</BlockTitle>
      <Block strong className="text-align-center">
        <Row>
          <Col>
            <Stepper fill color="red" />
          </Col>
          <Col>
            <Stepper fill round color="green" />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <Stepper fill color="blue" />
          </Col>
          <Col>
            <Stepper fill round color="pink" />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <Stepper fill small color="yellow" />
          </Col>
          <Col>
            <Stepper fill small round color="orange" />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <Stepper fill small color="gray" />
          </Col>
          <Col>
            <Stepper fill small round color="black" />
          </Col>
        </Row>
      </Block>
      <BlockTitle>Without input element</BlockTitle>
      <Block strong className="text-align-center">
        <Row>
          <Col>
            <Stepper input={false} />
          </Col>
          <Col>
            <Stepper input={false} round />
          </Col>
        </Row>
      </Block>
      <BlockTitle>Min, max, step</BlockTitle>
      <Block strong className="text-align-center">
        <Row>
          <Col>
            <Stepper fill value={100} min={0} max={1000} step={100} />
          </Col>
          <Col>
            <Stepper fill input={false} value={5} min={0} max={10} step={0.5} />
          </Col>
        </Row>
      </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 className="text-align-center">
        <Row>
          <Col>
            <small className="display-block">Default</small>
            <Stepper fill value={0} min={0} max={100} step={1} autorepeat={true} />
          </Col>
          <Col>
            <small className="display-block">Dynamic</small>
            <Stepper
              fill
              value={0}
              min={0}
              max={100}
              step={1}
              autorepeat={true}
              autorepeatDynamic={true}
            />
          </Col>
        </Row>
      </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 className="text-align-center">
        <Row>
          <Col>
            <Stepper fill value={0} min={0} max={10} step={1} autorepeat={true} wraps={true} />
          </Col>
        </Row>
      </Block>

      <BlockTitle>Custom value element</BlockTitle>
      <List>
        <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>
        <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 className="text-align-center">
        <Row>
          <Col>
            <Stepper
              fill
              value={0}
              min={0}
              max={1000}
              step={1}
              autorepeat={true}
              wraps={true}
              manualInputMode={true}
              decimalPoint={2}
            />
          </Col>
        </Row>
      </Block>
    </Page>
      
    
  );
};