Steps 步骤条

显示顺序步骤的可视进度指示器。

导入

import { Steps } from 'asterui'

示例

基础步骤

水平步骤进度。

</>

• Register
• Choose plan
• Purchase
• Receive Product

import { Steps } from 'asterui'

function App() {
  return (
      <Steps>
        <Steps.Step color="primary">Register</Steps.Step>
        <Steps.Step color="primary">Choose plan</Steps.Step>
        <Steps.Step>Purchase</Steps.Step>
        <Steps.Step>Receive Product</Steps.Step>
      </Steps>
    )
}

export default App

垂直步骤

垂直方向的步骤。

</>

• Register
• Choose plan
• Purchase
• Receive Product

import { Steps } from 'asterui'

function App() {
  return (
      <Steps direction="vertical">
        <Steps.Step color="primary">Register</Steps.Step>
        <Steps.Step color="primary">Choose plan</Steps.Step>
        <Steps.Step>Purchase</Steps.Step>
        <Steps.Step>Receive Product</Steps.Step>
      </Steps>
    )
}

export default App

不同颜色

具有各种语义颜色的步骤。

</>

• Research
• Design
• Develop
• Deploy

import { Steps } from 'asterui'

function App() {
  return (
      <Steps>
        <Steps.Step color="info">Research</Steps.Step>
        <Steps.Step color="info">Design</Steps.Step>
        <Steps.Step color="warning">Develop</Steps.Step>
        <Steps.Step color="success">Deploy</Steps.Step>
      </Steps>
    )
}

export default App

自定义内容

使用 dataContent 的自定义指示器。

</>

• Step 1
• Step 2
• Step 3
• Step 4

import { Steps } from 'asterui'

function App() {
  return (
      <Steps>
        <Steps.Step color="primary" dataContent="?">Step 1</Steps.Step>
        <Steps.Step color="primary" dataContent="!">Step 2</Steps.Step>
        <Steps.Step dataContent="✓">Step 3</Steps.Step>
        <Steps.Step dataContent="✕">Step 4</Steps.Step>
      </Steps>
    )
}

export default App

响应式布局

移动设备上垂直,桌面上水平。

</>

• Register
• Choose plan
• Purchase
• Receive Product

import { Steps } from 'asterui'

function App() {
  return (
      <Steps className="steps-vertical lg:steps-horizontal">
        <Steps.Step color="primary">Register</Steps.Step>
        <Steps.Step color="primary">Choose plan</Steps.Step>
        <Steps.Step>Purchase</Steps.Step>
        <Steps.Step>Receive Product</Steps.Step>
      </Steps>
    )
}

export default App

受控当前步骤

使用 current 属性控制步骤进度。

</>

• Register
• Verify Email
• Setup Profile
• Complete

PreviousNext

import { Steps, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  
  return (
      <div className="space-y-4">
        <Steps current={current}>
          <Steps.Step>Register</Steps.Step>
          <Steps.Step>Verify Email</Steps.Step>
          <Steps.Step>Setup Profile</Steps.Step>
          <Steps.Step>Complete</Steps.Step>
        </Steps>
        <div className="flex gap-2">
          <Button size="sm" onClick={() => setCurrent(Math.max(0, current - 1))} disabled={current === 0}>
            Previous
          </Button>
          <Button size="sm" color="primary" onClick={() => setCurrent(Math.min(3, current + 1))} disabled={current === 3}>
            Next
          </Button>
        </div>
      </div>
    )
}

export default App

数据驱动模式

使用 items 属性进行数据驱动的步骤,支持点击导航。

</>

• Cart
• Address
• Payment
• Confirm

import { Steps, notification } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  
  const items = [
    { key: 'cart', title: 'Cart' },
    { key: 'address', title: 'Address' },
    { key: 'payment', title: 'Payment' },
    { key: 'confirm', title: 'Confirm' },
  ];
  
  return (
      <Steps
        items={items}
        current={current}
        onChange={(step) => {
          setCurrent(step);
          notification.info({ message: `Navigated to step ${step + 1}` });
        }}
      />
    )
}

export default App

带图标

带有自定义图标的步骤。

</>

• Order Placed
• Processing
• Payment
• Delivery

import { Steps } from 'asterui'
import { CheckIcon, DocumentTextIcon, CreditCardIcon, TruckIcon } from '@aster-ui/icons'

function App() {
  return (
      <Steps>
        <Steps.Step color="primary" icon={<CheckIcon size="sm" />}>
          Order Placed
        </Steps.Step>
        <Steps.Step color="primary" icon={<DocumentTextIcon size="sm" />}>
          Processing
        </Steps.Step>
        <Steps.Step icon={<CreditCardIcon size="sm" />}>
          Payment
        </Steps.Step>
        <Steps.Step icon={<TruckIcon size="sm" />}>
          Delivery
        </Steps.Step>
      </Steps>
    )
}

export default App

API

Steps

属性	描述	类型	默认值
children	步骤项(复合模式)	React.ReactNode	-
items	步骤项(数据驱动模式)	StepItem[]	-
current	当前步骤索引(从 0 开始)	number	-
direction	布局方向	'horizontal' | 'vertical'	'horizontal'
vertical	垂直布局(已弃用,使用 direction)	boolean	false
onChange	点击步骤时的回调	(current: number) => void	-
className	额外的 CSS 类	string	-
data-testid	用于测试的测试 ID	string	-

StepItem(用于 items 属性)

属性	描述	类型	默认值
key	唯一标识符	string	-
title	步骤标题	React.ReactNode	-
description	步骤描述	React.ReactNode	-
icon	步骤图标	React.ReactNode	-
color	步骤颜色	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
disabled	步骤是否禁用	boolean	false
data-testid	用于测试的测试 ID	string	-

Steps.Step(复合模式)

属性	描述	类型	默认值
children	步骤内容	React.ReactNode	-
title	步骤标题(替代 children)	React.ReactNode	-
description	步骤描述	React.ReactNode	-
icon	步骤图标	React.ReactNode	-
color	步骤颜色	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
dataContent	步骤指示器的自定义内容	string	-
disabled	步骤是否禁用	boolean	false
className	额外的 CSS 类	string	-
data-testid	用于测试的测试 ID	string	-

可访问性

使用提示:

• 使用 current 属性控制哪个步骤处于活动状态
• current 之前的步骤会自动标记为已完成
• 使用 onChange 启用点击步骤进行导航
• 使用响应式类进行移动友好布局