步进

阶梯通过编号,项目符号,或以图标为基础的相继步骤传递进度.

它们支持各种状态,包括已完成、不完整、警告、错误和残疾.

图片参考

图片

步进用法

import { Stepper } from '@dt-dds/react-stepper';

export const App = () => {
  return (
    <Stepper>
      <Stepper.Step
        title='Completed Step'
        description='This step is done'
        state='completed'
      />
      <Stepper.Step
        title='Current Step'
        description='Working on this'
        state='incomplete'
        isActive={true}
      />
      <Stepper.Step
        title='Warning Step'
        description='Needs attention'
        state='warning'
      />
      <Stepper.Step
        title='Error Step'
        description='Something went wrong'
        state='error'
      />
      <Stepper.Step
        title='Disabled Step'
        description='Not available yet'
        state='disabled'
      />
    </Stepper>
  );
};

备选案文

数字变量( 默认)

<Stepper variant='number'>
  <Stepper.Step title='Step 1' />
  <Stepper.Step title='Step 2' />
  <Stepper.Step title='Step 3' />
</Stepper>

符号变量

<Stepper variant='bullet'>
  <Stepper.Step title='Step 1' />
  <Stepper.Step title='Step 2' />
  <Stepper.Step title='Step 3' />
</Stepper>

图标变量

import { Icon } from '@dt-dds/react-icon';

<Stepper variant='icon'>
  <Stepper.Step title='Upload' icon={<Icon code='upload' size='small' />} />
  <Stepper.Step title='Process' icon={<Icon code='settings' size='small' />} />
  <Stepper.Step
    title='Complete'
    icon={<Icon code='check_circle' size='small' />}
  />
</Stepper>;

使用Stepper Hook 软件

使用Stepper钩为后继器提供了一个完整的状态管理解决方案,包括导航,完成跟踪和边界检查.

import { useStepper } from '@dt-dds/react-stepper';

export const ControlledStepper = () => {
  const { activeStep, handleNext, handleBack, canGoNext, canGoBack } =
    useStepper({
      initialStep: 0,
      totalSteps: 3,
    });

  return (
    <>
      <Stepper activeStep={activeStep}>
        <Stepper.Step title='Step 1' description='First step' />
        <Stepper.Step title='Step 2' description='Second step' />
        <Stepper.Step title='Step 3' description='Third step' />
      </Stepper>

      <button onClick={handleBack} disabled={!canGoBack}>
        Back
      </button>
      <button onClick={handleNext} disabled={!canGoNext}>
        Next
      </button>
    </>
  );
};

使用Stepper Hook API 软件

选项

使用Stepper 返回值

属性

步进道具

步骤道具

堆栈

• 类型脚本 用于静态类型检查
• 反应 — JavaScript 用户界面库
• 情感 用于使用 JavaScript 写入 Css 样式
• 故事书 ——由Vite供电的UI组件环境
• 欢乐 - JavaScript 测试框架
• 反应测试库 - 以用户为中心测试用户界面组件
• ESLint 语录 代码林入
• 高级 用于代码格式
• 苏普 - 由Esbuild供电的脚本捆绑机
• 雅伦 从管理软件包

图标

• yarn build - 制作软件包
• yarn dev - 在当地运行软件包
• yarn lint - 将所有文件输入此软件包
• yarn test - 测试所有单位
• yarn test:report - 打开测试覆盖报告
• yarn test:update:snapshot - 进行所有单元测试并更新快照

汇编

运行 yarn build 从软件包的根部 齐声 将原始的 TypeScript 和 React 代码编译为普通 JavaScript .

这个 /dist 文件夹包含编译输出.

stepper
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...

版本

跟着 语义版本

许可证

许可证根据 MIT 许可证