🔥 新しいプロジェクトをご紹介します t0ggles - 究極のプロジェクト管理ツール！ 🔥

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

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

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

  • ステッパー

ステッパープロパティ

名前タイプデフォルト説明
buttonsOnlybooleanfalse

ステッパーボタン間の内部値コンテナーを無効にします

colorsobject

Tailwind CSS カラークラスのオブジェクト

colors.activeBgIosstring'active:bg-primary'
colors.activeBgMaterialstring''
colors.fillActiveBgIosstring'active:bg-ios-primary-shade'
colors.fillActiveBgMaterialstring''
colors.fillBgIosstring'bg-primary'
colors.fillBgMaterialstring'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIosstring'text-white'
colors.fillTextMaterialstring'text-md-light-on-primary dark:text-md-dark-on-primary'
colors.fillTouchRipplestring'touch-ripple-white dark:touch-ripple-primary'
colors.outlineBorderIosstring'border-primary'
colors.outlineBorderMaterialstring'border-md-light-outline dark:border-md-dark-outline'
colors.textIosstring'text-primary'
colors.textMaterialstring'text-md-light-primary dark:text-md-dark-primary'
colors.touchRipplestring'touch-ripple-primary'
componentstring'div'

コンポーネントの HTML 要素

defaultValuenumber

制御されていないコンポーネントの場合の、ステッパー入力のデフォルト値

inputbooleanfalse

要素をレンダリングするかどうかを定義します

inputDisabledbooleanfalse

ステッパー入力が無効になっているかどうかを定義します

inputPlaceholderstring

入力プレースホルダー

inputReadOnlybooleanfalse

ステッパー入力が読み取り専用かどうかを定義します

inputTypestring'text'

入力タイプ

largebooleanundefined

ステッパーを大きくします。largeIos および largeMaterial を上書きします

largeIosbooleanfalse

iOS テーマでステッパーを大きくします

largeMaterialbooleanfalse

Material テーマでステッパーを大きくします

outlinebooleanundefined

ステッパーをアウトラインにします。outlineIos および outlineMaterial を上書きします

outlineIosbooleanfalse

iOS テーマでステッパーをアウトラインにします

outlineMaterialbooleanfalse

Material テーマでステッパーをアウトラインにします

raisedbooleanundefined

ステッパーを隆起させます (影付き)。 raisedIos および raisedMaterial を上書きします

raisedIosbooleanfalse

iOS テーマでステッパーを隆起させます (影付き)

raisedMaterialbooleanfalse

Material テーマでステッパーを隆起させます (影付き)

roundedbooleanundefined

ステッパーを丸くします。 roundedIos および roundedMaterial を上書きします

roundedIosbooleanfalse

iOS テーマでステッパーを丸くします

roundedMaterialbooleanfalse

Material テーマでステッパーを丸くします

smallbooleanundefined

ステッパーを小さくします。 smallIos および smallMaterial を上書きします

smallIosbooleanfalse

iOS テーマでステッパーを小さくします

smallMaterialbooleanfalse

Material テーマでステッパーを小さくします

touchRipplebooleantrue

Material テーマでタッチリップル効果を有効にします

valuenumber0

ステッパーの値

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 by nolimits4web.