en-US

Customize selects and items.

zh-CN

自定义已选项和选项。

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

const list = Array.from({ length: 3 }).map((_, index1) => ({
  label: `Item ${index1}`,
  value: `${index1}`,
  children: Array.from({ length: 5 }).map((_, index2) => ({
    label: `Item ${index1}-${index2}`,
    value: `${index1}-${index2}`,
    disabled: index2 === 3,
    children: Array.from({ length: 20 }).map((_, index3) => ({
      label: `Item ${index1}-${index2}-${index3}`,
      value: `${index1}-${index2}-${index3}`,
    })),
  })),
}));
export default function Demo() {
  return (
    <>
      <DCascader
        style={{ width: 200 }}
        dList={list}
        dPlaceholder="Customize"
        dCustomSelected={(select) => `# ${select.label}`}
        dCustomItem={(item) => (
          <div style={{ display: 'flex', alignItems: 'center', gap: '0 8px' }}>
            {item.label}
            <InfoCircleOutlined />
          </div>
        )}
      ></DCascader>
      <DCascader
        style={{ width: 400 }}
        dList={list}
        dPlaceholder="Customize in multiple mode"
        dCustomSelected={(select) => `# ${select.label}`}
        dCustomItem={(item) => (
          <div style={{ display: 'flex', alignItems: 'center', gap: '0 8px' }}>
            {item.label}
            <InfoCircleOutlined />
          </div>
        )}
        dMultiple
      ></DCascader>
    </>
  );
}