主页

react 使用步骤条（Steps）

2024-07-09 11:40AM

1.安装组件

npm install antd

2.导入组件

import { Steps } from 'antd';

3.使用 Steps

import { Steps } from 'antd';

const { Step } = Steps;

function MySteps() {
  return (
    <Steps current={1}>
      <Step title="Step 1" description="This is the first step" />
      <Step title="Step 2" description="This is the second step" />
      <Step title="Step 3" description="This is the third step" />
    </Steps>
  );
}

1）Steps 组件包含多个 Step 子组件,每个 Step 表示一个步骤。

2）在 Steps 组件上设置 current 属性,指定当前处于哪个步骤。

3）在 Step 组件上设置 title 和 description 属性,定义步骤的标题和描述。

eg：

import { Steps } from 'antd';
const { Step } = Steps;
function MySteps() {
  return (
    <Steps current={0} type="navigation">
      <Step title="基本信息" />
      <Step title="活动数据" />
      <Step title="排放因子及相关参数" />
      <Step title="排放核算结果" />
    </Steps>
  );
}

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论