en-US

The simplest usage.

zh-CN

最简单的用法。

import { useState } from 'react';

import { DStepper, DButton } from '@react-devui/ui';

export default function Demo() {
  const [active, setActive] = useState(1);

  return (
    <>
      <DStepper
        dActive={active}
        dList={[
          {
            title: 'This is a long long long long long title',
          },
          {
            title: 'Step 2',
          },
          {
            title: 'Step 3',
            description: 'This is a long long long long long description.',
          },
          {
            title: 'Step 4',
            description: 'This is 4 description.',
          },
        ]}
      ></DStepper>
      <br />
      <DButton disabled={active === 5} onClick={() => setActive((prevActive) => prevActive + 1)}>
        {active >= 4 ? 'Done' : 'Next'}
      </DButton>
      <DButton disabled={active === 1} dType="secondary" onClick={() => setActive((prevActive) => prevActive - 1)}>
        Previous
      </DButton>
    </>
  );
}