步骤

用于指示多步骤流程的进度

Step 1

Step 2

Step 3

Step 2 description

import { Button, ButtonGroup, Steps } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Steps.Root defaultStep={1} count={steps.length}>
      <Steps.List>
        {steps.map((step, index) => (
          <Steps.Item key={index} index={index} title={step.title}>
            <Steps.Indicator />
            <Steps.Title>{step.title}</Steps.Title>
            <Steps.Separator />
          </Steps.Item>
        ))}
      </Steps.List>

      {steps.map((step, index) => (
        <Steps.Content key={index} index={index}>
          {step.description}
        </Steps.Content>
      ))}
      <Steps.CompletedContent>All steps are complete!</Steps.CompletedContent>

      <ButtonGroup size="sm" variant="outline">
        <Steps.PrevTrigger asChild>
          <Button>Prev</Button>
        </Steps.PrevTrigger>
        <Steps.NextTrigger asChild>
          <Button>Next</Button>
        </Steps.NextTrigger>
      </ButtonGroup>
    </Steps.Root>
  )
}

const steps = [
  {
    title: "Step 1",
    description: "Step 1 description",
  },
  {
    title: "Step 2",
    description: "Step 2 description",
  },
  {
    title: "Step 3",
    description: "Step 3 description",
  },
]

用法

¥Usage

import { Steps } from "@chakra-ui/react"

<Steps.Root>
  <Steps.List>
    <Steps.Item>
      <Steps.Trigger>
        <Steps.Indicator />
        <Steps.Title />
        <Steps.Description />
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
  </Steps.List>
  <Steps.Content />
  <Steps.CompletedContent />
  <Steps.PrevTrigger />
  <Steps.NextTrigger />
</Steps.Root>

示例

¥Examples

尺寸

¥Sizes

使用 size 属性更改步骤组件的大小。

¥Use the size prop to change the size of the steps component.

Step 1

Step 2

Step 3

Step 1 description

Step 1

Step 2

Step 3

Step 1 description

Step 1

Step 2

Step 3

Step 1 description

import { Button, ButtonGroup, For, Stack, Steps } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="16">
      <For each={["sm", "md", "lg"]}>
        {(size) => (
          <Steps.Root key={size} size={size} count={steps.length}>
            <Steps.List>
              {steps.map((step, index) => (
                <Steps.Item key={index} index={index} title={step.title}>
                  <Steps.Indicator />
                  <Steps.Title>{step.title}</Steps.Title>
                  <Steps.Separator />
                </Steps.Item>
              ))}
            </Steps.List>
            {steps.map((step, index) => (
              <Steps.Content key={index} index={index}>
                {step.description}
              </Steps.Content>
            ))}
            <Steps.CompletedContent>
              All steps are complete!
            </Steps.CompletedContent>

            <ButtonGroup size="sm" variant="outline">
              <Steps.PrevTrigger asChild>
                <Button>Prev</Button>
              </Steps.PrevTrigger>
              <Steps.NextTrigger asChild>
                <Button>Next</Button>
              </Steps.NextTrigger>
            </ButtonGroup>
          </Steps.Root>
        )}
      </For>
    </Stack>
  )
}

const steps = [
  {
    title: "Step 1",
    description: "Step 1 description",
  },
  {
    title: "Step 2",
    description: "Step 2 description",
  },
  {
    title: "Step 3",
    description: "Step 3 description",
  },
]

变量

¥Variants

使用 variant 属性更改步骤组件的外观。

¥Use the variant prop to change the appearance of the steps component.

Step 1

Step 2

Step 3

Step 1 description

Step 1

Step 2

Step 3

Step 1 description

import { Button, ButtonGroup, For, Stack, Steps } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="16">
      <For each={["subtle", "solid"]}>
        {(variant) => (
          <Steps.Root key={variant} variant={variant} count={steps.length}>
            <Steps.List>
              {steps.map((step, index) => (
                <Steps.Item key={index} index={index} title={step.title}>
                  <Steps.Indicator />
                  <Steps.Title>{step.title}</Steps.Title>
                  <Steps.Separator />
                </Steps.Item>
              ))}
            </Steps.List>

            {steps.map((step, index) => (
              <Steps.Content key={index} index={index}>
                {step.description}
              </Steps.Content>
            ))}
            <Steps.CompletedContent>
              All steps are complete!
            </Steps.CompletedContent>

            <ButtonGroup size="sm" variant="outline">
              <Steps.PrevTrigger asChild>
                <Button>Prev</Button>
              </Steps.PrevTrigger>
              <Steps.NextTrigger asChild>
                <Button>Next</Button>
              </Steps.NextTrigger>
            </ButtonGroup>
          </Steps.Root>
        )}
      </For>
    </Stack>
  )
}

const steps = [
  {
    title: "Step 1",
    description: "Step 1 description",
  },
  {
    title: "Step 2",
    description: "Step 2 description",
  },
  {
    title: "Step 3",
    description: "Step 3 description",
  },
]

颜色

¥Colors

使用 colorPalette 属性更改组件的配色方案。

¥Use the colorPalette prop to change the color scheme of the component.

Step 1

Step 2

Step 3

Step 2 description

Step 1

Step 2

Step 3

Step 2 description

Step 1

Step 2

Step 3

Step 2 description

Step 1

Step 2

Step 3

Step 2 description

Step 1

Step 2

Step 3

Step 2 description

Step 1

Step 2

Step 3

Step 2 description

Step 1

Step 2

Step 3

Step 2 description

Step 1

Step 2

Step 3

Step 2 description

Step 1

Step 2

Step 3

Step 2 description

Step 1

Step 2

Step 3

Step 2 description

import { Button, ButtonGroup, For, Stack, Steps } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"

const Demo = () => {
  return (
    <Stack gap="10" width="full">
      <For each={colorPalettes}>
        {(colorPalette) => (
          <Steps.Root
            key={colorPalette}
            defaultStep={1}
            count={steps.length}
            colorPalette={colorPalette}
          >
            <Steps.List>
              {steps.map((step, index) => (
                <Steps.Item key={index} index={index} title={step.title}>
                  <Steps.Indicator />
                  <Steps.Title>{step.title}</Steps.Title>
                  <Steps.Separator />
                </Steps.Item>
              ))}
            </Steps.List>

            {steps.map((step, index) => (
              <Steps.Content key={index} index={index}>
                {step.description}
              </Steps.Content>
            ))}
            <Steps.CompletedContent>
              All steps are complete!
            </Steps.CompletedContent>

            <ButtonGroup size="sm" variant="outline">
              <Steps.PrevTrigger asChild>
                <Button>Prev</Button>
              </Steps.PrevTrigger>
              <Steps.NextTrigger asChild>
                <Button>Next</Button>
              </Steps.NextTrigger>
            </ButtonGroup>
          </Steps.Root>
        )}
      </For>
    </Stack>
  )
}

const steps = [
  {
    title: "Step 1",
    description: "Step 1 description",
  },
  {
    title: "Step 2",
    description: "Step 2 description",
  },
  {
    title: "Step 3",
    description: "Step 3 description",
  },
]

触发

¥Trigger

使用 Steps.Trigger 组件使步骤可点击。

¥Use the Steps.Trigger component to make the step clickable.

Step 2 description

import { Button, ButtonGroup, Steps } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Steps.Root defaultStep={1} count={steps.length}>
      <Steps.List>
        {steps.map((step, index) => (
          <Steps.Item key={index} index={index} title={step.title}>
            <Steps.Trigger>
              <Steps.Indicator />
              <Steps.Title>{step.title}</Steps.Title>
            </Steps.Trigger>
            <Steps.Separator />
          </Steps.Item>
        ))}
      </Steps.List>

      {steps.map((step, index) => (
        <Steps.Content key={index} index={index}>
          {step.description}
        </Steps.Content>
      ))}
      <Steps.CompletedContent>All steps are complete!</Steps.CompletedContent>

      <ButtonGroup size="sm" variant="outline">
        <Steps.PrevTrigger asChild>
          <Button>Prev</Button>
        </Steps.PrevTrigger>
        <Steps.NextTrigger asChild>
          <Button>Next</Button>
        </Steps.NextTrigger>
      </ButtonGroup>
    </Steps.Root>
  )
}

const steps = [
  {
    title: "Step 1",
    description: "Step 1 description",
  },
  {
    title: "Step 2",
    description: "Step 2 description",
  },
  {
    title: "Step 3",
    description: "Step 3 description",
  },
]

垂直

¥Vertical

使用 orientation 属性更改步骤组件的方向。

¥Use the orientation prop to change the orientation of the steps component.

Step 1

Step 2

Step 3

Step 2 description

import { Button, ButtonGroup, Stack, Steps } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Steps.Root
      orientation="vertical"
      height="400px"
      defaultStep={1}
      count={steps.length}
    >
      <Steps.List>
        {steps.map((step, index) => (
          <Steps.Item key={index} index={index} title={step.title}>
            <Steps.Indicator />
            <Steps.Title>{step.title}</Steps.Title>
            <Steps.Separator />
          </Steps.Item>
        ))}
      </Steps.List>

      <Stack>
        {steps.map((step, index) => (
          <Steps.Content key={index} index={index}>
            {step.description}
          </Steps.Content>
        ))}
        <Steps.CompletedContent>All steps are complete!</Steps.CompletedContent>

        <ButtonGroup size="sm" variant="outline">
          <Steps.PrevTrigger asChild>
            <Button>Prev</Button>
          </Steps.PrevTrigger>
          <Steps.NextTrigger asChild>
            <Button>Next</Button>
          </Steps.NextTrigger>
        </ButtonGroup>
      </Stack>
    </Steps.Root>
  )
}

const steps = [
  {
    title: "Step 1",
    description: "Step 1 description",
  },
  {
    title: "Step 2",
    description: "Step 2 description",
  },
  {
    title: "Step 3",
    description: "Step 3 description",
  },
]

受控

¥Controlled

使用 step 和 onStepChange 属性控制步骤组件的当前步骤。

¥Use the step and onStepChange props to control the current step of the steps component.

Step 1

Step 2

Step 3

Step 2 description

"use client"

import { Button, ButtonGroup, Steps } from "@chakra-ui/react"
import { useState } from "react"

const Demo = () => {
  const [step, setStep] = useState(1)

  return (
    <Steps.Root
      step={step}
      onStepChange={(e) => setStep(e.step)}
      count={steps.length}
    >
      <Steps.List>
        {steps.map((step, index) => (
          <Steps.Item key={index} index={index} title={step.title}>
            <Steps.Indicator />
            <Steps.Title>{step.title}</Steps.Title>
            <Steps.Separator />
          </Steps.Item>
        ))}
      </Steps.List>

      {steps.map((step, index) => (
        <Steps.Content key={index} index={index}>
          {step.description}
        </Steps.Content>
      ))}
      <Steps.CompletedContent>All steps are complete!</Steps.CompletedContent>

      <ButtonGroup size="sm" variant="outline">
        <Steps.PrevTrigger asChild>
          <Button>Prev</Button>
        </Steps.PrevTrigger>
        <Steps.NextTrigger asChild>
          <Button>Next</Button>
        </Steps.NextTrigger>
      </ButtonGroup>
    </Steps.Root>
  )
}

const steps = [
  {
    title: "Step 1",
    description: "Step 1 description",
  },
  {
    title: "Step 2",
    description: "Step 2 description",
  },
  {
    title: "Step 3",
    description: "Step 3 description",
  },
]

商店

¥Store

控制步骤的另一种方法是使用 RootProvider 组件和 useSteps 存储钩子。

¥An alternative way to control the steps is to use the RootProvider component and the useSteps store hook.

这样，你就可以从步骤外部访问步骤状态和方法。

¥This way you can access the steps state and methods from outside the steps.

current step: 1

Step 1

Step 2

Step 3

Step 2 description

"use client"

import {
  Button,
  ButtonGroup,
  Code,
  Stack,
  Steps,
  useSteps,
} from "@chakra-ui/react"

const Demo = () => {
  const steps = useSteps({
    defaultStep: 1,
    count: items.length,
  })

  return (
    <Stack align="flex-start">
      <Code>current step: {steps.value}</Code>
      <Steps.RootProvider value={steps}>
        <Steps.List>
          {items.map((step, index) => (
            <Steps.Item key={index} index={index} title={step.title}>
              <Steps.Indicator />
              <Steps.Title>{step.title}</Steps.Title>
              <Steps.Separator />
            </Steps.Item>
          ))}
        </Steps.List>
        {items.map((step, index) => (
          <Steps.Content key={index} index={index}>
            {step.description}
          </Steps.Content>
        ))}
        <Steps.CompletedContent>All steps are complete!</Steps.CompletedContent>

        <ButtonGroup size="sm" variant="outline">
          <Steps.PrevTrigger asChild>
            <Button>Prev</Button>
          </Steps.PrevTrigger>
          <Steps.NextTrigger asChild>
            <Button>Next</Button>
          </Steps.NextTrigger>
        </ButtonGroup>
      </Steps.RootProvider>
    </Stack>
  )
}

const items = [
  {
    title: "Step 1",
    description: "Step 1 description",
  },
  {
    title: "Step 2",
    description: "Step 2 description",
  },
  {
    title: "Step 3",
    description: "Step 3 description",
  },
]

图标

¥Icon

将 icon 属性传递给 StepsItem 组件，即可显示图标。

¥Pass the icon prop to the StepsItem component to display an icon.

Payment

import { Button, ButtonGroup, Steps } from "@chakra-ui/react"
import { LuCalendar, LuCheck, LuUser, LuWallet } from "react-icons/lu"

const Demo = () => {
  return (
    <Steps.Root defaultStep={1} count={steps.length} size="sm">
      <Steps.List>
        {steps.map((step, index) => (
          <Steps.Item key={index} index={index}>
            <Steps.Indicator>
              <Steps.Status incomplete={step.icon} complete={<LuCheck />} />
            </Steps.Indicator>
            <Steps.Separator />
          </Steps.Item>
        ))}
      </Steps.List>

      {steps.map((step, index) => (
        <Steps.Content key={index} index={index}>
          {step.description}
        </Steps.Content>
      ))}
      <Steps.CompletedContent>All steps are complete!</Steps.CompletedContent>

      <ButtonGroup size="sm" variant="outline">
        <Steps.PrevTrigger asChild>
          <Button>Prev</Button>
        </Steps.PrevTrigger>
        <Steps.NextTrigger asChild>
          <Button>Next</Button>
        </Steps.NextTrigger>
      </ButtonGroup>
    </Steps.Root>
  )
}

const steps = [
  {
    icon: <LuUser />,
    description: "Contact Details",
  },
  {
    icon: <LuWallet />,
    description: "Payment",
  },
  {
    icon: <LuCalendar />,
    description: "Book an Appointment",
  },
]

描述

¥Description

将 description 属性传递给 StepsItem 组件，即可显示描述。

¥Pass the description prop to the StepsItem component to display a description.

Step 1

This step

Step 2

That step

Step 3

Final step

Step 2 content

import { Box, Button, ButtonGroup, Steps } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Steps.Root defaultStep={1} count={steps.length}>
      <Steps.List>
        {steps.map((step, index) => (
          <Steps.Item key={index} index={index} title={step.title}>
            <Steps.Indicator />
            <Box>
              <Steps.Title>{step.title}</Steps.Title>
              <Steps.Description>{step.description}</Steps.Description>
            </Box>
            <Steps.Separator />
          </Steps.Item>
        ))}
      </Steps.List>

      {steps.map((step, index) => (
        <Steps.Content key={index} index={index}>
          {step.content}
        </Steps.Content>
      ))}
      <Steps.CompletedContent>All steps are complete!</Steps.CompletedContent>

      <ButtonGroup size="sm" variant="outline">
        <Steps.PrevTrigger asChild>
          <Button>Prev</Button>
        </Steps.PrevTrigger>
        <Steps.NextTrigger asChild>
          <Button>Next</Button>
        </Steps.NextTrigger>
      </ButtonGroup>
    </Steps.Root>
  )
}

const steps = [
  {
    title: "Step 1",
    content: "Step 1 content",
    description: "This step",
  },
  {
    title: "Step 2",
    content: "Step 2 content",
    description: "That step",
  },
  {
    title: "Step 3",
    content: "Step 3 content",
    description: "Final step",
  },
]

属性

¥Props

根元素

¥Root

Prop	Default	Type
`orientation`	`'horizontal'`	`'vertical' \| 'horizontal'` The orientation of the component
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`variant`	`'solid'`	`'solid' \| 'subtle'` The variant of the component
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'` The size of the component
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`unstyled`		`boolean` Whether to remove the component's style.
`count`		`number` The total number of steps
`defaultStep`		`number` The initial value of the stepper when rendered. Use when you don't need to control the value of the stepper.
`ids`		`ElementIds` The custom ids for the stepper elements
`linear`		`boolean` If `true`, the stepper requires the user to complete the steps in order
`onStepChange`		`(details: StepChangeDetails) => void` Callback to be called when the value changes
`onStepComplete`		`VoidFunction` Callback to be called when a step is completed
`step`		`number` The controlled value of the stepper

分页

标签

步骤

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}用法

用法