List 列表

List 组件是一个灵活的选项列表组件，支持分组、选中状态和键盘导航。

安装

pnpm dlx shadcn@latest add https://matechat.noctisynth.org/r/suggestion.json

示例

Option 1
Option 2
Option 3

import { List } from "@matechat/react";

export default function () {
  return (
    <div className="w-full max-w-xs">
      <List
        optionLabel="label"
        options={[
          { label: "Option 1", value: "1" },
          { label: "Option 2", value: "2" },
          { label: "Option 3", value: "3" },
        ]}
      />
    </div>
  );
}

带分组的列表

Group 1
Item 1
Item 2
Group 2
Item 3
Item 4

import { List } from "@matechat/react";

export default function () {
  return (
    <div className="w-full max-w-xs">
      <List
        optionLabel="label"
        optionGroupLabel="label"
        optionGroupChildren="children"
        options={[
          {
            label: "Group 1",
            children: [
              { label: "Item 1", value: "1" },
              { label: "Item 2", value: "2" },
            ],
          },
          {
            label: "Group 2",
            children: [
              { label: "Item 3", value: "3" },
              { label: "Item 4", value: "4" },
            ],
          },
        ]}
      />
    </div>
  );
}

选中状态

Option 1
Option 2
Option 3

import { List } from "@matechat/react";
import { useState } from "react";

export default function () {
  const [value, setValue] = useState("option1");
  return (
    <div className="w-full max-w-xs">
      <List
        optionLabel="label"
        value={value}
        onChange={(e) => setValue(e.value as string)}
        options={[
          { label: "Option 1", value: "option1" },
          { label: "Option 2", value: "option2" },
          { label: "Option 3", value: "option3" },
        ]}
      />
    </div>
  );
}

参数

List

属性	说明	类型	默认值

#List 列表

#安装

#示例

#带分组的列表

#选中状态

#参数

#List

List 列表

安装

示例

带分组的列表

选中状态

参数

List