步骤条

位置

使用 top bottom left right 类名来控制组件位置.

演示

代码

HTML

代码

JSX/TSX

Choose plan

Purchase

Receive Product

<div class="steps success top">
	<div class="step active">Register</div>
	<div class="step active">Choose plan</div>
	<div class="step">Purchase</div>
	<div class="step">Receive Product</div>
</div>

<div className='steps success top'>
  <div className='step active'>
    Register
  </div>
  <div className='step active'>
    Choose plan
  </div>
  <div className='step'>
    Purchase
  </div>
  <div className='step'>
    Receive Product
  </div>
</div>

演示

代码

HTML

代码

JSX/TSX

Choose plan

Purchase

Receive Product

<div class="steps success bottom">
	<div class="step">Register</div>
	<div class="step active-point">Choose plan</div>
	<div class="step active">Purchase</div>
	<div class="step">Receive Product</div>
</div>

<div className='steps success bottom'>
  <div className='step'>
    Register
  </div>
  <div className='step active-point'>
    Choose plan
  </div>
  <div className='step active'>
    Purchase
  </div>
  <div className='step'>
    Receive Product
  </div>
</div>

演示

代码

HTML

代码

JSX/TSX

Choose plan

Purchase

Receive Product

<div class="steps success left">
	<div class="step">Register</div>
	<div class="step">Choose plan</div>
	<div class="step active-point">Purchase</div>
	<div class="step active">Receive Product</div>
</div>

<div className='steps success left'>
  <div className='step'>
    Register
  </div>
  <div className='step'>
    Choose plan
  </div>
  <div className='step active-point'>
    Purchase
  </div>
  <div className='step active'>
    Receive Product
  </div>
</div>

演示

代码

HTML

代码

JSX/TSX

Choose plan

Purchase

Receive Product

<div class="steps success right">
	<div class="step">Register</div>
	<div class="step active-point">Choose plan</div>
	<div class="step active">Purchase</div>
	<div class="step">Receive Product</div>
</div>

<div className='steps success right'>
  <div className='step'>
    Register
  </div>
  <div className='step active-point'>
    Choose plan
  </div>
  <div className='step active'>
    Purchase
  </div>
  <div className='step'>
    Receive Product
  </div>
</div>

仅激活步骤点

使用 active active-point 类名来控制步骤的激活样式.

active: 将激活步骤的条和点 .
active-point: 将仅激活步骤点部分.

演示

代码

HTML

代码

JSX/TSX

Choose plan

Purchase

Receive Product

<div class="steps danger bottom">
	<div class="step">Register</div>
	<div class="step active-point">Choose plan</div>
	<div class="step active">Purchase</div>
	<div class="step">Receive Product</div>
</div>

<div className='steps danger bottom'>
  <div className='step'>
    Register
  </div>
  <div className='step active-point'>
    Choose plan
  </div>
  <div className='step active'>
    Purchase
  </div>
  <div className='step'>
    Receive Product
  </div>
</div>

形状

使用 cornered square 类名来控制步骤点的形状样式. 默认是圆形。

演示

代码

HTML

代码

JSX/TSX

Choose plan

Purchase

Receive Product

Choose plan

Purchase

Receive Product

<div class="flex gap-4">
	<div class="steps success right">
		<div class="step square active">Register</div>
		<div class="step square active">Choose plan</div>
		<div class="step square">Purchase</div>
		<div class="step square">Receive Product</div>
	</div>
	<div class="steps danger left">
		<div class="step cornered active">Register</div>
		<div class="step cornered active">Choose plan</div>
		<div class="step cornered">Purchase</div>
		<div class="step cornered">Receive Product</div>
	</div>
</div>

<div className='flex gap-4'>
  <div className='steps success right'>
    <div className='step square active'>
      Register
    </div>
    <div className='step square active'>
      Choose plan
    </div>
    <div className='step square'>
      Purchase
    </div>
    <div className='step square'>
      Receive Product
    </div>
  </div>
  <div className='steps danger left'>
    <div className='step cornered active'>
      Register
    </div>
    <div className='step cornered active'>
      Choose plan
    </div>
    <div className='step cornered'>
      Purchase
    </div>
    <div className='step cornered'>
      Receive Product
    </div>
  </div>
</div>

自定义步骤点内容

您还可以自定义步骤点的内容。只需在其上添加 data-content 属性即可。

演示

代码

HTML

代码

JSX/TSX

Checked

Empty

Star

circle

emoji

<div class="steps success left">
	<div class="step active" data-content="✓">
		<p>Checked</p>
	</div>
	<div class="step active" data-content="">
		<p>Empty</p>
	</div>
	<div class="step" data-content="★">
		<p>Star</p>
	</div>
	<div class="step" data-content="●">
		<p>circle</p>
	</div>
	<div class="step" data-content="💪">
		<p>emoji</p>
	</div>
</div>

<div className='steps success left'>
  <div className='step active'
    data-content='✓'>
    <p>
      Checked
    </p>
  </div>
  <div className='step active'
    data-content=''>
    <p>
      Empty
    </p>
  </div>
  <div className='step'
    data-content='★'>
    <p>
      Star
    </p>
  </div>
  <div className='step'
    data-content='●'>
    <p>
      circle
    </p>
  </div>
  <div className='step'
    data-content='💪'>
    <p>
      emoji
    </p>
  </div>
</div>

选择器开关