en-US

Supports configuring dSize as well as disabled .

zh-CN

支持配置 dSize 以及 disabled 。

import { useState } from 'react';

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

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

  const size = _size === 'default' ? undefined : _size;
  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={['No disabled', 'Disabled'].map((text) => ({
          label: text,
          value: text,
        }))}
        dModel={_disabled}
        dType="outline"
        onModelChange={setDisabled}
      />
      <br />
      <DCompose dSize={size} dDisabled={disabled}>
        <DInput dPlaceholder="Search" />
        <DButton dIcon={<SearchOutlined />}></DButton>
      </DCompose>
      <br />
      <DCompose dSize={size} dDisabled={disabled}>
        <DInput dPlaceholder="Setting" />
        <DCompose.Item>
          <SettingOutlined />
        </DCompose.Item>
      </DCompose>
      <br />
      <DCompose dSize={size} dDisabled={disabled}>
        <DCompose.Item dGray>http://</DCompose.Item>
        <DInput dPlaceholder="URL" />
        <DCompose.Item dGray>.com</DCompose.Item>
      </DCompose>
    </>
  );
}