en-US

Both DInput and DInput support setting size.

zh-CN

DInput 和 DInput 均支持设置尺寸。

import { useState } from 'react';

import { UserOutlined, InfoCircleOutlined } from '@react-devui/icons';
import { DInput, DRadio, DTooltip } from '@react-devui/ui';

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

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

  return (
    <>
      <DRadio.Group
        dList={['smaller', 'default', 'larger'].map((size) => ({
          label: size,
          value: size,
        }))}
        dModel={_size}
        dType="outline"
        onModelChange={setSize}
      />
      <br />
      <DInput dPlaceholder="Basic" dSize={size} />
      <DInput
        dPlaceholder="Icon"
        dPrefix={<UserOutlined />}
        dSuffix={<DTooltip dTitle="Info tooltip">{<InfoCircleOutlined />}</DTooltip>}
        dSize={size}
      ></DInput>
      <DInput dPlaceholder="Password" dType="password" dClearable dSize={size}></DInput>
      <DInput dPlaceholder="Decimal values" dType="number" dMax={100} dMin={0} dStep={0.01} dSuffix="%" dSize={size} />
    </>
  );
}