IBest-UI-V2

Appearance

Steps 步骤条 ​

介绍 ​

用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入 ​

ts
import { IBestSteps } from "@ibestservices/ibest-ui-v2";

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local active: number = 0
  @Local groupId: string = 'steps'
  build() {
    Column(){
      IBestSteps({
        groupId: this.groupId,
        active: this.active
      }){
        IBestStep({groupId: this.groupId, title: "步骤一"})
        IBestStep({groupId: this.groupId, title: "步骤二"})
        IBestStep({groupId: this.groupId, title: "步骤三"})
      }
    }
  }
}

标记类型 ​

标记类型

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local active: number = 0
  @Local groupId: string = 'steps'
  build() {
    Column(){
      IBestSteps({
        groupId: this.groupId,
        active: this.active,
        type: 'dot'
      }){
        IBestStep({groupId: this.groupId, title: "步骤一"})
        IBestStep({groupId: this.groupId, title: "步骤二"})
        IBestStep({groupId: this.groupId, title: "步骤三"})
      }
    }
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local active: number = 0
  @Local groupId: string = 'steps'
  build() {
    Column(){
      IBestSteps({
        groupId: this.groupId,
        active: this.active,
        type: 'icon',
        inactiveIcon: "passed",
        activeIcon: "checked",
        activeColor: "#07c160"
      }){
        IBestStep({groupId: this.groupId, title: "步骤一", description: "一些描述信息"})
        IBestStep({groupId: this.groupId, title: "步骤二", description: "一些描述信息"})
        IBestStep({groupId: this.groupId, title: "步骤三", description: "一些描述信息"})
      }
    }
  }
}

竖向步骤条 ​

竖向步骤条

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local active: number = 0
  @Local groupId: string = 'steps'
  @Builder customStepContent(index: number){
    Column({space: 10}){
      Text("【城市】物流状态" + (index + 1))
        .fontColor(this.active >= index ? "#1989fa" : "#323233")
      Text("2025-05-01")
        .fontColor(this.active >= index ? "#1989fa" : "#323233")
    }
    .alignItems(HorizontalAlign.Start)
  }
  build() {
    Column(){
      IBestSteps({
        groupId: this.groupId,
        dotSize: 8,
        active: this.active,
        placeDirection: Axis.Vertical
      }){
        ForEach([0, 1, 2], (_: number, index: number) => {
          IBestStep({
            groupId: this.groupId,
            type: index == 1 ? "dot" : "icon",
            inactiveIcon: index == 0 ? "like-o" : "passed",
            activeIcon: index == 0 ? "like" : "checked",
          }){
            this.customStepContent(index)
          }
        })
      }
    }
  }
}

API ​

IBestSteps @Props ​

参数说明类型默认值
groupId分组id，通常为一个唯一的字符串，需具备全局唯一性或已入栈的页面唯一性string | number''
active当前激活的步骤索引number0
placeDirection步骤条方向AxisHorizontal
type步骤条标记类型, 可选值 num、dot、iconstringnum
dotSize点大小string | number6
inactiveIcon未激活底部图标, 仅type为 icon 时有效ResourceStr''
activeIcon激活底部图标, 仅type为 icon 时有效ResourceStr''
iconSize图标大小, 仅type为 icon 时有效string | number14
inactiveColor未激活颜色ResourceColor#969799
activeColor激活颜色ResourceColor#1989fa
bgColor背景颜色ResourceColor#fff

IBestSteps 插槽 ​

插槽名说明类型
defaultBuilder默认内容的插槽CustomBuilder

IBestStep @Props ​

参数说明类型默认值
groupId分组id，与IBestSteps的groupId 一致string | number''
title标题ResourceStr''
description描述ResourceStr''
type步骤条标记类型, 可选值 num、dot、iconstringnum
dotSize点大小string | number6
inactiveIcon未激活底部图标, 仅type为 icon 时有效ResourceStr''
activeIcon激活底部图标, 仅type为 icon 时有效ResourceStr''
iconSize图标大小, 仅type为 icon 时有效string | number14
inactiveColor未激活颜色ResourceColor#969799
activeColor激活颜色ResourceColor#1989fa

IBestStep 插槽 ​

插槽名说明类型
defaultBuilder默认内容的插槽CustomBuilder

主题定制 ​

组件提供了下列颜色变量，可用于自定义深色/浅色模式样式，使用方法请参考 颜色模式 章节，如需要其它颜色变量可提 issue。

名称描述默认值
ibest_step_background_color背景色#fff
ibest_step_text_color文字颜色#969799