Step 步骤条

import { Step } from "@finalx/components";

interface IProps {}
export const Index: FC<IProps> = () => {
  return (
    <Step
      activeColor='red'
      slotColor='#000000'
      proportion={80}
      items={[
        {
          title: "第一天",
          desc: "这是第一天的描述",
          process: 30
        },
        {
          title: "第二天",
          desc: "这是第二天的描述",
          process: 60
        },
        {
          title: "第三天",
          desc: "这是第三天的描述",
          process: 100
        }
      ]}
      pop={{ title: "目前进度在80%", onClick: () => console.log("浮窗被点击了") }}
    />
  );
};

属性

属性名	类型	默认值	必填	描述
proportion	number | string	-	否	初始化百分比
activeColor	string	-	否	当前节点的高亮颜色
slotColor	string	-	否	流程槽的背景颜色
pop	Pop	-	否	浮窗 有配置才显示
content	Content	-	否	内容的配置
round	ReactElement	-	否	自定义当前节点的元素
items	Item[]	-	是	流程项的配置

Pop 属性

属性名	类型	默认值	必填	描述
title	string	-	否	浮窗标题
style	CSSProperties	-	否	浮窗样式
offset	{ left?: number; right?: number }	-	否	浮窗偏移量
children	ReactElement	-	否	浮窗子元素
onClick	() => any	-	否	浮窗点击事件

Content 属性

属性名	类型	默认值	必填	描述
titleStyle	CSSProperties	-	否	标题样式
descStyle	CSSProperties	-	否	描述样式

Item 属性

属性名	类型	默认值	必填	描述
title	string	-	否	流程标题
desc	string	-	否	流程描述
process	number	-	否	流程进度值