en-US

Add and close tabs by setting dClosable and onAddClick.

zh-CN

通过设置 dClosable 和 onAddClick 新增和关闭页签。

import { useState } from 'react';

import { useImmer } from '@react-devui/hooks';
import { DTabs, DRadio } from '@react-devui/ui';

export default function Demo() {
  const [placement, setPlacement] = useState('top');
  const [_type, setType] = useState('default');

  const type = _type === 'default' ? undefined : _type;

  const [data, setData] = useImmer(Array.from({ length: 4 }).map((_, index) => index + 1));

  return (
    <>
      <DRadio.Group
        dList={['top', 'right', 'bottom', 'left'].map((placement) => ({
          label: placement,
          value: placement,
        }))}
        dModel={placement}
        dType="outline"
        onModelChange={setPlacement}
      />
      <br />
      <DRadio.Group
        dList={['default', 'slider', 'wrap'].map((type) => ({
          label: type,
          value: type,
        }))}
        dModel={_type}
        dType="outline"
        onModelChange={setType}
      />
      <br />
      <DTabs
        style={{ maxHeight: placement === 'right' || placement === 'left' ? 240 : undefined }}
        dList={data.map((n) => ({
          id: n,
          title: `Tab${n}`,
          panel: `Tab${n} Content...`,
          closable: true,
        }))}
        dType={type}
        dPlacement={placement}
        onAddClick={() =>
          setData((draft) => {
            draft.push((draft.sort((a, b) => a - b)[draft.length - 1] ?? 0) + 1);
          })
        }
        onClose={(id) => {
          setData((draft) => {
            draft.splice(
              draft.findIndex((n) => n === id),
              1
            );
          });
        }}
      />
    </>
  );
}