en-US

Show a large number of tabs.

zh-CN

展示了大量标签页的情况。

import { useState } from 'react';

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

const tabs = Array.from({ length: 50 }).map((_, i) => ({
  id: i,
  title: `Tab${i}`,
  panel: `Tab${i} Content...`,
  disabled: i === 3,
}));
export default function Demo() {
  const [placement, setPlacement] = useState('top');

  const style = { maxHeight: placement === 'right' || placement === 'left' ? 240 : undefined };

  return (
    <>
      <DRadio.Group
        dList={['top', 'right', 'bottom', 'left'].map((placement) => ({
          label: placement,
          value: placement,
        }))}
        dModel={placement}
        dType="outline"
        onModelChange={setPlacement}
      />
      <br />
      <DTabs style={style} dList={tabs} dPlacement={placement} />
      <br />
      <DTabs style={style} dList={tabs} dPlacement={placement} dType="slider" />
      <br />
      <DTabs style={style} dList={tabs} dPlacement={placement} dType="wrap" />
    </>
  );
}