使用

FloatingSelect从功能上来说和RadioGroup是同一类组件. 但无论从视觉效果上还是易用性上都推荐使用FloatingSelect替代RadioGroup

受控与非受控模式

与原生input类似, value属性是受控属性, defaultValue为非受控属性. onChange为回调属性, 接受激活项的value作为参数.

Data属性

FloatingSelect的data属性支持两种数据结构:

• 字符串数组: 当value和label相同时使用
• 对象数组: 当value和label不相同时使用

import { FloatingSelect } from "@rtdui/core";

function ArrayOfStrings() {
  return <FloatingSelect data={["React", "Angular", "Svelte", "Vue"]} />;
}

function ArrayOfObjects() {
  return (
    <FloatingSelect
      data={[
        { value: "val1", label: "React" },
        { value: "val2", label: "Angular" },
        { value: "val3", label: "Svelte" },
        { value: "val4", label: "Vue" },
      ]}
    />
  );
}

React元素作为数据项的label

export default function Demo() {
  const data = [
    {
      value: "preview",
      label: (
        <div className="flex items-center gap-0.5">
          <IconEye size={16} />
          <span>Preview</span>
        </div>
      ),
    },
    {
      value: "code",
      label: (
        <div className="flex items-center gap-0.5">
          <IconCode size={16} />
          <span>Code</span>
        </div>
      ),
    },
    {
      value: "export",
      label: (
        <div className="flex items-center gap-0.5">
          <IconExternalLink size={16} />
          <span>Export</span>
        </div>
      ),
    },
  ];
  return <FloatingSelect data={data} />;
}