en-US

Customize selects and list.

zh-CN

自定义已选项和选项。

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

const list = Array.from({ length: 100 }).map((_, index) => ({
  label: `Item ${index}`,
  value: index,
  disabled: index === 3,
}));
export default function Demo() {
  return (
    <>
      <DSelect
        style={{ width: 200 }}
        dList={list}
        dPlaceholder="Customize"
        dCustomSelected={(select) => `# ${select.label}`}
        dCustomItem={(item) => (
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            {item.label}
            <InfoCircleOutlined />
          </div>
        )}
      />
      <DSelect
        style={{ width: 400 }}
        dList={list}
        dPlaceholder="Customize in multiple mode"
        dCustomSelected={(select) => `# ${select.label}`}
        dCustomItem={(item) => (
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            {item.label}
            <InfoCircleOutlined />
          </div>
        )}
        dMultiple
      />
    </>
  );
}