en-US

Support using DCompose for combination.

For more usage, please refer to DCompose.

zh-CN

支持使用 DCompose 进行组合。

更多用法请参考 DCompose。

import { useState } from 'react';

import { UserOutlined, SearchOutlined } from '@react-devui/icons';
import { DInput, DRadio, DButton, DCompose } 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="Username" dPrefix={<UserOutlined />} dClearable></DInput>
        <DButton dIcon={<SearchOutlined />}></DButton>
      </DCompose>
      <DCompose dSize={size} dDisabled={disabled}>
        <DCompose.Item dGray>http://</DCompose.Item>
        <DInput dPlaceholder="URL" />
        <DCompose.Item dGray>.com</DCompose.Item>
      </DCompose>
      <DCompose dSize={size} dDisabled={disabled}>
        <DCompose.Item dGray>$</DCompose.Item>
        <DInput dPlaceholder="Number" dType="number" dMax={1000} dMin={10} dStep={10} />
        <DCompose.Item dGray>K</DCompose.Item>
      </DCompose>
    </>
  );
}