en-US

Adjust the header size by setting dSize to larger and smaller.

zh-CN

通过设置 dSize 为 larger smaller 调整页头尺寸。

import { useState } from 'react';

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

const tabs = [1, 22, 333, 4444].map((n) => ({
  id: n,
  title: `Tab${n}`,
  panel: `Tab${n} Content...`,
  disabled: n === 333,
}));
export default function Demo() {
  const [placement, setPlacement] = useState('top');
  const [_size, setSize] = useState('default');

  const size = _size === 'default' ? undefined : _size;

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