贊助商成為贊助商

Stepper React 組件

Stepper React 組件代表 Stepper 組件。

Stepper 組件

包含以下組件

Stepper 屬性

屬性類型預設說明
<Stepper> 屬性
init布林值true初始化 Stepper
value數字0Stepper 值
min數字0最小值
max數字100最大值
step數字1值之間的最小步長
wraps布林值false啟用時，超過最大值會將值設為最小值；同樣地，低於最小值會將值設為最大值
autorepeat布林值false啟用時，在您點按並按住加號/減號按鈕時會重複增加/減少值
autorepeatDynamic布林值false啟用時，會根據您按住按鈕的時間增加自動重複比率
input布林值true定義是否要呈現 <input> 元素
inputReadonly布林值false讓內部輸入元素 readonly
name字串輸入元素的「名稱」屬性
buttonsOnly布林值false停用 stepper 按鈕之間的內部值容器
formatValue函式(value)自訂函式，用於格式化按鈕之間值元素的值。它必須傳回新的格式化值
manualInputMode布林值false啟用手動輸入模式。此模式允許從鍵盤輸入值，並以定義的精確度檢查小數部分。此外，在此模式中輸入時會忽略 step 參數。
decimalPoint數字4手動輸入模式下的點後位數。
buttonsEndInputMode布林值true在 Stepper 的減號或加號按鈕按一下時停用手動輸入模式。
disabled布林值false定義 stepper 是否停用
round布林值false讓 stepper 變成圓形
roundIos布林值false僅讓 iOS 主題的 stepper 變成圓形
roundMd布林值false僅讓 MD 主題的 stepper 變成圓形
large布林值false讓 stepper 變大
largeIos布林值false僅讓 iOS 主題的 stepper 變大
largeMd布林值false僅讓 MD 主題的 stepper 變大
small布林值false讓 stepper 變小
smallIos布林值false僅讓 iOS 主題的 stepper 變小
smallMd布林值false僅讓 MD 主題的 stepper 變小
fill布林值false讓 stepper 填滿顏色
fillIos布林值false僅讓 iOS 主題的 stepper 填滿顏色
fillMd布林值false僅讓 MD 主題的 stepper 填滿顏色
raised布林值false讓 stepper 凸起。
raisedIos布林值false使步進器為 iOS 主題而升高。
raisedMd布林值false使步進器為 MD 主題而升高。

步進器事件

事件說明
<Stepper> 事件
stepperChange當步進器值已變更時，將觸發事件
stepperMinusClick按一下「減號」按鈕時，將觸發事件
stepperPlusClick按一下「加號」按鈕時，將觸發事件
input將在輸入的 input 事件中觸發事件

步進器方法

<Stepper> 方法
.increment()增加步進器值，類似於按一下其「加號」按鈕
.decremenet()減少步進器值，類似於按一下其「減號」按鈕
.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>
  );
};
改善此文件
在此頁面上