步进器 React 组件

步进器 React 组件代表步进器组件。

步进器组件

包含以下组件

步进器

步进器属性

属性	类型	默认值	描述
<Stepper> 属性
init	布尔值	true	初始化步进器
value	数字	0	步进器值
min	数字	0	最小值
max	数字	100	最大值
step	数字	1	值之间的最小步长
wraps	布尔值	false	启用后，超出最大值的递增将把值设置为最小值；类似地，低于最小值的递减将把值设置为最大值
autorepeat	布尔值	false	启用后，当您点击并按住加减按钮时，它将重复增加/减少值
autorepeatDynamic	布尔值	false	启用后，它将根据您按住按钮的时间长度增加自动重复比率
input	布尔值	true	定义它是否应该渲染 `<input>` 元素
inputReadonly	布尔值	false	使内部输入元素 `readonly`
name	字符串		输入元素的“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> 事件
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>
  );
};

改进此文档

在本页

步进器组件
步进器属性
步进器事件
步进器方法
示例

步进器 React 组件

步进器 组件

步进器 属性

步进器 事件

步进器 方法

示例

步进器组件

步进器属性

步进器事件

步进器方法