en-US

Support using DCompose for combination.

For more usage, please refer to DCompose.

zh-CN

支持使用 DCompose 进行组合。

更多用法请参考 DCompose。

import { useState } from 'react';

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

export default function Demo() {
  const [_size, setSize] = useState('default');
  const [_vertical, setVertical] = useState('Horizontal');
  const [_disabled, setDisabled] = useState('No disabled');

  const size = _size === 'default' ? undefined : _size;
  const vertical = _vertical === 'Vertical';
  const disabled = _disabled === 'Disabled';

  return (
    <>
      <DRadio.Group
        dList={['smaller', 'default', 'larger'].map((size) => ({
          label: size,
          value: size,
        }))}
        dModel={_size}
        dType="outline"
        onModelChange={setSize}
      />
      <br />
      <DRadio.Group
        dList={['Horizontal', 'Vertical'].map((text) => ({
          label: text,
          value: text,
        }))}
        dModel={_vertical}
        dType="outline"
        onModelChange={setVertical}
      />
      <br />
      <DRadio.Group
        dList={['No disabled', 'Disabled'].map((text) => ({
          label: text,
          value: text,
        }))}
        dModel={_disabled}
        dType="outline"
        onModelChange={setDisabled}
      />
      <br />
      <DCompose dSize={size} dVertical={vertical} dDisabled={disabled}>
        {['L', 'M', 'R'].map((text) => (
          <DButton key={text} dType="secondary">
            {text}
          </DButton>
        ))}
      </DCompose>
      <DCompose dSize={size} dVertical={vertical} dDisabled={disabled}>
        {['L', 'M', 'R'].map((text) => (
          <DButton key={text} dType={text === 'L' ? 'primary' : 'secondary'}>
            {text}
          </DButton>
        ))}
      </DCompose>
      <DCompose dSize={size} dVertical={vertical} dDisabled={disabled}>
        {['L', 'M', 'R'].map((text) => (
          <DButton key={text} dType="secondary" dVariant={text === 'M' ? undefined : 'round'}>
            {text}
          </DButton>
        ))}
      </DCompose>
    </>
  );
}