SuperAPI AI 工具集

sgds-components-stepper

办公与效率

查看项目

更新于 10-15 21:54

技能介绍

用途:sgds-stepper 用于渲染步骤指示器并管理多步骤工作流,适用于多步表单、向导类界面。步骤及其关联内容组件通过 steps 属性声明,该属性为 IStepMetaData 对象数组。

主要能力:支持水平(默认)与垂直两种方向,通过 orientation 设置;clickable 属性允许用户点击步骤指示器跳转到对应步骤。每个步骤定义包含必填的 stepHeader(标签)和 component(内容引用,可为 Vue/React/Angular 组件或任意标识值),以及可选的 iconName(来自 SGDS 图标集,默认显示步骤编号)。

使用方式:steps 必须以 JavaScript 属性方式设置(.steps = [...]),不能作为 HTML 属性。通过公开方法导航:nextStep()、previousStep()、firstStep()、lastStep()、reset()。activeStep 为当前步骤索引(从 0 开始)。可监听 sgds-arrived 事件(在到达新步骤时触发,读取 activeStep 获取当前索引)来更新显示内容,另有 sgds-next-step、sgds-previous-step、sgds-first-step、sgds-last-step、sgds-reset 事件。上一步/下一步按钮应使用 stepper 外部的 sgds-button,在点击处理中调用 .previousStep() 和 .nextStep()。

限制:本组件不暴露自定义属性或 CSS parts,因此不支持 CSS 样式修改。安装与框架集成请参考 sgds-components-setup。文档未提供具体价格、平台等其它信息。