en-US

All uses of Select components support Virtual Scroll!

zh-CN

Select 组件所有用法均支持虚拟滚动！

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

const list = Array.from({ length: 100000 }).map((_, index) => ({
  label: `Item ${index}`,
  value: index,
  disabled: index === 3,
}));
const listOfGroup = [
  {
    label: 'Group 1',
    value: 'Group1',
    children: Array.from({ length: 3 }).map((_, index) => ({
      label: `Item ${index}`,
      value: 'Group1-' + index,
    })),
  },
  {
    label: 'Group 2',
    value: 'Group2',
    children: [],
  },
  {
    label: 'Group 3',
    value: 'Group3',
    children: Array.from({ length: 100000 }).map((_, index) => ({
      label: `Item 3${index}`,
      value: 'Group3-' + index,
      disabled: index === 3,
    })),
  },
];
export default function Demo() {
  return (
    <>
      <DSelect style={{ width: 200 }} dList={list} dPlaceholder="Basic" dSearchable dClearable dVirtual />
      <DSelect style={{ width: 200 }} dList={listOfGroup} dPlaceholder="Group" dSearchable dClearable dVirtual />
      <DSelect style={{ width: 400 }} dList={list} dPlaceholder="Multiple" dSearchable dClearable dMultiple dVirtual />
    </>
  );
}