🔥 了解我们的新项目 t0ggles - 您终极的项目管理工具！ 🔥

步进器 React 组件

步进器组件

包含以下组件

  • 步进器

步进器属性

名称类型默认值描述
buttonsOnly布尔值false

禁用步进器按钮之间的内部值容器

colors对象

包含 Tailwind CSS 颜色类别的对象

colors.activeBgIos字符串'active:bg-primary'
colors.activeBgMaterial字符串''
colors.fillActiveBgIos字符串'active:bg-ios-primary-shade'
colors.fillActiveBgMaterial字符串''
colors.fillBgIos字符串'bg-primary'
colors.fillBgMaterial字符串'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIos字符串'text-white'
colors.fillTextMaterial字符串'text-md-light-on-primary dark:text-md-dark-on-primary'
colors.fillTouchRipple字符串'touch-ripple-white dark:touch-ripple-primary'
colors.outlineBorderIos字符串'border-primary'
colors.outlineBorderMaterial字符串'border-md-light-outline dark:border-md-dark-outline'
colors.textIos字符串'text-primary'
colors.textMaterial字符串'text-md-light-primary dark:text-md-dark-primary'
colors.touchRipple字符串'touch-ripple-primary'
component字符串'div'

组件的 HTML 元素

defaultValue数字

在非受控组件的情况下，步进器输入的默认值

input布尔值false

定义是否渲染元素

inputDisabled布尔值false

定义步进器输入是否禁用

inputPlaceholder字符串

输入占位符

inputReadOnly布尔值false

定义步进器输入是否为只读

inputType字符串'text'

输入类型

large布尔值undefined

使步进器变大。覆盖 `largeIos` 和 `largeMaterial`

largeIos布尔值false

在 iOS 主题中使步进器变大

largeMaterial布尔值false

在 Material 主题中使步进器变大

outline布尔值undefined

使步进器轮廓分明。覆盖 `outlineIos` 和 `outlineMaterial`

outlineIos布尔值false

在 iOS 主题中使步进器轮廓分明

outlineMaterial布尔值false

在 Material 主题中使步进器轮廓分明

raised布尔值undefined

使步进器凸起（带阴影）。覆盖 `raisedIos` 和 `raisedMaterial`

raisedIos布尔值false

在 iOS 主题中使步进器凸起（带阴影）

raisedMaterial布尔值false

在 Material 主题中使步进器凸起（带阴影）

rounded布尔值undefined

使步进器圆形。覆盖 `roundedIos` 和 `roundedMaterial`

roundedIos布尔值false

在 iOS 主题中使步进器圆形

roundedMaterial布尔值false

在 Material 主题中使步进器圆形

small布尔值undefined

使步进器变小。覆盖 `smallIos` 和 `smallMaterial`

smallIos布尔值false

在 iOS 主题中使步进器变小

smallMaterial布尔值false

在 Material 主题中使步进器变小

touchRipple布尔值true

在 Material 主题中启用触摸涟漪效果

value数字0

步进器值

onBlurfunction(e)

步进器输入 `blur` 处理程序

onChangefunction(e)

步进器输入 `change` 处理程序

onFocusfunction(e)

步进器输入 `focus` 处理程序

onInputfunction(e)

步进器输入 `input` 处理程序

onMinusfunction(e)

步进器“减号”按钮点击处理程序

onPlusfunction(e)

步进器“加号”按钮点击处理程序

示例

Stepper.jsx
import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Stepper,
  Block,
  BlockTitle,
  List,
  ListItem,
} from 'konsta/react';


export default function StepperPage() {
  const [value, setValue] = useState(1);
  const increase = () => {
    setValue(value + 1);
  };
  const decrease = () => {
    setValue(value - 1 < 0 ? 0 : value - 1);
  };


  const [inputValue, setInputValue] = useState(1);
  const increaseInput = () => {
    const v = parseInt(inputValue, 10);
    if (isNaN(v)) setInputValue(0);
    else setInputValue(v + 1);
  };
  const decreaseInput = () => {
    const v = parseInt(inputValue, 10);
    if (isNaN(v)) setInputValue(0);
    setInputValue(v - 1 < 0 ? 0 : v - 1);
  };
  const onInputChange = (e) => {
    setInputValue(e.target.value);
  };
  const onInputBlur = () => {
    if (isNaN(parseInt(inputValue, 10))) setInputValue(0);
  };
  return (
    <Page>
      <Navbar
        title="Stepper"
        />


      <BlockTitle>Shape and size</BlockTitle>
      <Block strongIos outlineIos className="text-center space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <div className="block text-xs mb-1">Default</div>
            <Stepper value={value} onPlus={increase} onMinus={decrease} />
          </div>
          <div>
            <div className="block text-xs mb-1">Round</div>
            <Stepper
              value={value}
              rounded
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>


        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Outline</div>
            <Stepper
              value={value}
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Rounded Outline</div>
            <Stepper
              value={value}
              outline
              rounded
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>


        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Small</div>
            <Stepper value={value} onPlus={increase} onMinus={decrease} small />
          </div>
          <div>
            <div className="block text-xs mb-1">Small Round</div>
            <Stepper
              value={value}
              small
              rounded
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>


        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Small Outline</div>
            <Stepper
              value={value}
              small
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Small Rounded Outline</div>
            <Stepper
              value={value}
              small
              rounded
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>


        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Large</div>
            <Stepper value={value} onPlus={increase} onMinus={decrease} large />
          </div>
          <div>
            <div className="block text-xs mb-1">Large Round</div>
            <Stepper
              value={value}
              large
              rounded
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>


        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Large Outline</div>
            <Stepper
              value={value}
              large
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Large Rounded Outline</div>
            <Stepper
              value={value}
              large
              rounded
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>
      </Block>


      <BlockTitle>Raised</BlockTitle>
      <Block strongIos outlineIos className="text-center space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <div className="block text-xs mb-1">Default</div>
            <Stepper
              value={value}
              raised
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Round</div>
            <Stepper
              value={value}
              raised
              rounded
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>


        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Outline</div>
            <Stepper
              value={value}
              raised
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Round Outline</div>
            <Stepper
              value={value}
              raised
              outline
              rounded
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>


        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Small</div>
            <Stepper
              value={value}
              raised
              small
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Small Round</div>
            <Stepper
              value={value}
              raised
              small
              rounded
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>


        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Small Outline</div>
            <Stepper
              value={value}
              raised
              small
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Small Rounded Outline</div>
            <Stepper
              value={value}
              raised
              small
              rounded
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>


        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Large</div>
            <Stepper
              value={value}
              raised
              large
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Large Round</div>
            <Stepper
              value={value}
              raised
              large
              rounded
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>


        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Large Outline</div>
            <Stepper
              value={value}
              raised
              large
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Large Rounded Outline</div>
            <Stepper
              value={value}
              raised
              large
              rounded
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>
      </Block>
      <BlockTitle>With Text Input</BlockTitle>
      <Block strongIos outlineIos className="text-center space-y-4">
        <div>
          <Stepper
            value={inputValue}
            input
            onChange={onInputChange}
            onBlur={onInputBlur}
            onPlus={increaseInput}
            onMinus={decreaseInput}
          />
        </div>
        <div>
          <Stepper
            value={inputValue}
            outline
            input
            onChange={onInputChange}
            onBlur={onInputBlur}
            onPlus={increaseInput}
            onMinus={decreaseInput}
          />
        </div>
      </Block>
      <BlockTitle>Only Buttons</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          title={`Value is ${value}`}
          after={
            <Stepper
              value={value}
              buttonsOnly
              onPlus={increase}
              onMinus={decrease}
            />
          }
        />
        <ListItem
          title={`Value is ${value}`}
          after={
            <Stepper
              value={value}
              outline
              buttonsOnly
              onPlus={increase}
              onMinus={decrease}
            />
          }
        />
        <ListItem
          title={`Value is ${value}`}
          after={
            <Stepper
              value={value}
              raised
              outline
              buttonsOnly
              onPlus={increase}
              onMinus={decrease}
            />
          }
        />
      </List>


      <BlockTitle>Colors</BlockTitle>
      <Block strongIos outlineIos className="text-center space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <Stepper
              value={value}
              className="k-color-brand-red"
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <Stepper
              value={value}
              rounded
              className="k-color-brand-green"
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>


        <div className="grid grid-cols-2 gap-4">
          <div>
            <Stepper
              value={value}
              className="k-color-brand-yellow"
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <Stepper
              value={value}
              rounded
              className="k-color-brand-purple"
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>
      </Block>
    </Page>
  );
}
代码许可证 MIT.
2022 © Konsta UI 由 nolimits4web.