en-US

Set the vertical layout via dVertical.

zh-CN

通过 dVertical 设置垂直排布。

import { useState } from 'react';

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

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

  return (
    <>
      <DSwitch dModel={labelBottom} onModelChange={setLabelBottom}>
        Label bottom
      </DSwitch>
      <br />
      <br />
      <DStepper
        style={{ width: 300 }}
        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.',
          },
        ]}
        dLabelBottom={labelBottom}
        dVertical
      ></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>
    </>
  );
}