Stepper

Stepperは、複数のステップのプロセスの進行状況を表示するコンポーネントです。

インポート

import {
  Stepper,
  Step,
  StepTitle,
  StepDescription,
  StepSeparator,
  StepStatus,
  useSteps,
} from "@yamada-ui/react"

Copied!

Stepper: 子要素(Step)を制御するラッパーコンポーネントです。
Step: 1つのステップを表示するコンポーネントです。
StepTitle: ステップのタイトルを表示するコンポーネントです。
StepDescription: ステップの説明を表示するコンポーネントです。
StepSeparator: ステップ間の区切りを表示するコンポーネントです。
StepStatus: ステップのインジケーターを表示するコンポーネントです。
useSteps: 各ステップの状態とアクティブなインデックスを管理するカスタムフックです。

使い方

各ステップの情報はstepsに配列で定義し、useStepsに初期値のindexとstepsの配列の個数を設定します。

Stepperには、useStepsから返されるアクティブなインデックスのactiveStepと先ほど定義した配列のstepsを渡します。

編集可能な例

const steps: Steps = [
  { title: "孫悟空少年編", description: "レッドリボン軍" },
  { title: "ピッコロ大魔王編", description: "ピッコロ大魔王" },
  { title: "サイヤ人編", description: "ベジータ・ナッパ" },
]

const { activeStep, onStepNext, onStepPrev } = useSteps({
  index: 1,
  count: steps.length,
})

return (
  <VStack>
    <Stepper index={activeStep} steps={steps} />

    <HStack>
      <Button onClick={onStepPrev}>Prev</Button>
      <Button onClick={onStepNext}>Next</Button>
    </HStack>
  </VStack>
)

Copied!

サイズを変更する

編集可能な例

const steps: Steps = [
  { title: "孫悟空少年編", description: "レッドリボン軍" },
  { title: "ピッコロ大魔王編", description: "ピッコロ大魔王" },
  { title: "サイヤ人編", description: "ベジータ・ナッパ" },
]

return (
  <VStack>
    <Stepper size="sm" index={1} steps={steps} />

    <Stepper size="md" index={1} steps={steps} />

    <Stepper size="lg" index={1} steps={steps} />
  </VStack>
)

Copied!

カラースキーマを変更する

編集可能な例

const steps: Steps = [
  { title: "孫悟空少年編", description: "レッドリボン軍" },
  { title: "ピッコロ大魔王編", description: "ピッコロ大魔王" },
  { title: "サイヤ人編", description: "ベジータ・ナッパ" },
]

return (
  <VStack>
    <Stepper colorScheme="secondary" index={1} steps={steps} />

    <Stepper colorScheme="green" index={1} steps={steps} />
  </VStack>
)

Copied!

方向を変更する

orientationにhorizontalまたはverticalを設定することで、ステッパーの方向を変更できます。

編集可能な例

const steps: Steps = [
  { title: "孫悟空少年編", description: "レッドリボン軍" },
  { title: "ピッコロ大魔王編", description: "ピッコロ大魔王" },
  { title: "サイヤ人編", description: "ベジータ・ナッパ" },
]

const { activeStep, onStepNext, onStepPrev } = useSteps({
  index: 1,
  count: steps.length,
})

return (
  <VStack>
    <Stepper index={activeStep} steps={steps} orientation="horizontal" />

    <Stepper index={activeStep} steps={steps} orientation="vertical" h="sm" />

    <HStack>
      <Button onClick={onStepPrev}>Prev</Button>
      <Button onClick={onStepNext}>Next</Button>
    </HStack>
  </VStack>
)

Copied!

ステップをカスタマイズする

編集可能な例

const steps: Steps = [
  { title: "孫悟空少年編", description: "レッドリボン軍" },
  { title: "ピッコロ大魔王編", description: "ピッコロ大魔王" },
  { title: "サイヤ人編", description: "ベジータ・ナッパ" },
]

const { activeStep, onStepNext, onStepPrev } = useSteps({
  index: 1,
  count: steps.length,
})

return (
  <VStack>
    <Stepper index={activeStep}>
      {steps.map(({ title, description }, index) => (
        <Step key={index}>
          <StepStatus />

          <Box flexShrink="0">
            <StepTitle>{title}</StepTitle>
            <StepDescription>{description}</StepDescription>
          </Box>

          <StepSeparator />
        </Step>
      ))}
    </Stepper>

    <HStack>
      <Button onClick={onStepPrev}>Prev</Button>
      <Button onClick={onStepNext}>Next</Button>
    </HStack>
  </VStack>
)

Copied!

インジケーターをカスタマイズする

各ステップのインジケーターをカスタマイズするには、statusPropsかStepStatusコンポーネントに各状況に対する値を設定します。

complete: 完了したステップで表示されるインジケーターです。
active:　アクティブなステップで表示されるインジケーターです。
incomplete: 未完了のステップで表示されるインジケーターです。

編集可能な例

const steps: Steps = [
  {
    title: "孫悟空少年編",
    description: "レッドリボン軍",
    statusProps: { complete: `😇`, incomplete: `😑`, active: `😎` },
  },
  {
    title: "ピッコロ大魔王編",
    description: "ピッコロ大魔王",
    statusProps: { complete: `😇`, incomplete: `😑`, active: `😎` },
  },
  {
    title: "サイヤ人編",
    description: "ベジータ・ナッパ",
    statusProps: { complete: `😇`, incomplete: `😑`, active: `😎` },
  },
]

const { activeStep, onStepNext, onStepPrev } = useSteps({
  index: 1,
  count: steps.length,
})

return (
  <VStack>
    <Stepper index={activeStep} steps={steps} />

    <HStack>
      <Button onClick={onStepPrev}>Prev</Button>
      <Button onClick={onStepNext}>Next</Button>
    </HStack>
  </VStack>
)

Copied!

編集可能な例

const steps: Steps = [
  {
    title: "孫悟空少年編",
    description: "レッドリボン軍",
  },
  {
    title: "ピッコロ大魔王編",
    description: "ピッコロ大魔王",
  },
  {
    title: "サイヤ人編",
    description: "ベジータ・ナッパ",
  },
]

const { activeStep, onStepNext, onStepPrev } = useSteps({
  index: 1,
  count: steps.length,
})

return (
  <VStack>
    <Stepper index={activeStep}>
      {steps.map(({ title, description }, index) => (
        <Step key={index}>
          <StepStatus complete={<GhostIcon />} />

          <Box flexShrink="0">
            <StepTitle>{title}</StepTitle>
            <StepDescription>{description}</StepDescription>
          </Box>

          <StepSeparator />
        </Step>
      ))}
    </Stepper>

    <HStack>
      <Button onClick={onStepPrev}>Prev</Button>
      <Button onClick={onStepNext}>Next</Button>
    </HStack>
  </VStack>
)

Copied!

GitHubでこのページを編集する

前Pagination 次ディスクロージャー