en-US

Adjust components size by setting dSize.

zh-CN

通过设置 dSize 调整组件尺寸。

import { useState } from 'react';

import { DForm, FormControl, FormGroup, Validators, useForm, DInput, DButton, DRadio } from '@react-devui/ui';

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

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

  const [form, updateForm] = useForm(
    () =>
      new FormGroup({
        username: new FormControl('', Validators.required),
        password: new FormControl('', Validators.required),
      })
  );

  return (
    <>
      <DRadio.Group
        dList={['horizontal', 'vertical', 'inline'].map((layout) => ({
          label: layout,
          value: layout,
        }))}
        dModel={layout}
        dType="outline"
        onModelChange={setLayout}
      />
      <br />
      <DRadio.Group
        dList={['smaller', 'default', 'larger'].map((size) => ({
          label: size,
          value: size,
        }))}
        dModel={_size}
        dType="outline"
        onModelChange={setSize}
      />
      <br />
      <DForm dUpdate={updateForm} dLabelWidth={120} dLayout={layout} dSize={size}>
        <DForm.Group dFormGroup={form}>
          <DForm.Item dFormControls={{ username: 'Please input your username!' }} dLabel="Username">
            {({ username }) => <DInput dFormControl={username} dPlaceholder="Username" />}
          </DForm.Item>
          <DForm.Item dFormControls={{ password: 'Please input your password!' }} dLabel="Password">
            {({ password }) => <DInput dFormControl={password} dPlaceholder="Password" dType="password" />}
          </DForm.Item>
          <DForm.Item>
            <DButton type="submit" disabled={!form.valid}>
              Submit
            </DButton>
          </DForm.Item>
        </DForm.Group>
      </DForm>
    </>
  );
}