en-US

The simplest usage.

zh-CN

最简单的用法。

import { useState } from 'react';

import { DSelect } from '@react-devui/ui';

const list = Array.from({ length: 100 }).map((_, index) => ({
  label: `Long item ${index}`,
  value: index,
  disabled: index === 3,
}));
export default function Demo() {
  const [select, setSelect] = useState(50);

  return (
    <>
      <DSelect style={{ width: 200 }} dList={list} dPlaceholder="Basic" />
      <DSelect style={{ width: 100 }} dList={list} dPlaceholder="No Monospaced" dMonospaced={false} />
      <DSelect style={{ width: 200 }} dList={list} dPlaceholder="Disabled" dDisabled />
      <DSelect style={{ width: 200 }} dList={list} dPlaceholder="Clearable" dModel={select} dClearable onModelChange={setSelect} />
    </>
  );
}