sun-parakeet

 v0.0.12

Steps 步骤条

示例

基础用法

<script lang="ts">
  let currentStep = $state(0)
</script>

<Steps bind:value={currentStep}>
  <Step status={status[0]} header="买家下单" />
  <Step status={status[1]} header="商家接单" />
  <Step status={status[2]} header="骑手取货" />
  <Step status={status[3]} header="骑手送达" />
</Steps>

自定义样式

<script lang="ts">
  let status = $state<StepStatus[]>([])
</script>

<Steps bind:value={currentStep}>
  <Step status={status[0]} header="买家下单" icon="consume" />
  <Step
    status={status[1]}
    header="商家接单"
    icon={status => (status !== 'wait' ? 'gift' : undefined)}
  />
  <Step
    status={status[2]}
    header="骑手取货"
    icon={status => (status !== 'wait' ? 'motobike' : undefined)}>取货备注</Step
  >
  <Step
    status={status[3]}
    header="骑手送达"
    icon={status => (status !== 'wait' ? 'check' : undefined)}
  />
</Steps>

纵向步骤条

<Steps bind:value={currentStep} direction="vertical">
  <Step status={status[0]} header="买家下单">
    <p>2025-04-11 12:40</p>
  </Step>
  <Step status={status[1]} header="商家接单">
    <p>2025-04-11 12:45</p>
  </Step>
  <Step status={status[2]} header="骑手取货">
    <p>2025-04-11 12:50</p>
  </Step>
  <Step status={status[3]} header="骑手送达">
    <p>2025-04-11 13:05</p>
  </Step>
</Steps>

纵向-自定义样式

<Steps bind:value={currentStep} direction="vertical">
  <Step status={status[0]} header="买家下单" icon="consume">
    <p>2025-04-11 12:40</p>
  </Step>
  <Step
    status={status[1]}
    header="商家接单"
    icon={status => (status !== 'wait' ? 'gift' : undefined)}
  >
    <p>2025-04-11 12:45</p>
  </Step>
  <Step
    status={status[2]}
    header="骑手取货"
    icon={status => (status !== 'wait' ? 'motobike' : undefined)}
    style="height: 100px"
  >
    <p>2025-04-11 12:50</p>
    <p>style="height: 100px"</p>
  </Step>
  <Step
    status={status[3]}
    header="骑手送达"
    icon={status => (status !== 'wait' ? 'check' : undefined)}
  >
    <p>2025-04-11 13:05</p>
  </Step>
</Steps>

Steps

属性

属性 说明 类型 默认值
value 当前步骤的索引 number $bindable(0)
direction 步骤条的方向 'horizontal' | 'vertical' 'horizontal'

Step

属性

属性 说明 类型 默认值
icon 步骤图标渲染函数 string | IconOption | ((status: StepStatus) => string | IconOption | undefined) 组件默认样式
header 标题 string | Snippet undefined
status 指定状态。通常只需要指定 'errer' 和 'skip' 状态 StepStatus 'wait'

StepStatus

/** 步骤状态 */
export type StepStatus =
  /** 未开始 */
  | 'wait'
  /** 进行中 */
  | 'process'
  /** 完成 */
  | 'finish'
  /** 失败 */
  | 'error'
  /** 跳过 */
  | 'skip'

CSS 变量

属性 说明 默认值
--sunp-size Steps 组件统一设置 Step 图标的尺寸 24px

后退

前进

PageIndicator 分页符

Swiper 轮播