List

面板上 44px 的行，无分隔线，元数据在右侧，带分组标题，键盘优先。

查看源码
checkout-websk-kso-AbC123…wxyzInference8 分钟前
checkout-workersk-kso-Xm91Lq…4f2aInference22 分钟前
ci-runnersk-kso-Pz0Tt7…91cdPlatform16 小时前
stagingsk-kso-Hq55Ra…0b7eInference10月2日
load-testsk-kso-Ty8Kc2…aa31Inference9月18日
import { List, ListRow, GroupHeader } from "@logicplanes/kaeso-ui";

属性

  • aria-label
    string

    列表的无障碍名称。

  • data-force-row
    string

    为状态矩阵强制第一行的状态：hover、focus、selected。

  • density
    "default" | "compact" = default

    每行占用的空间。

  • empty
    ReactNode

    没有行且列表未在加载时显示：通常是 Empty（在设置栏中用 size="md"，位于列表的卡片内；在通栏页面上用 size="compact"）。

  • groups
    ListGroup[]

    ……分组标题下的行。

  • idWidth
    48 | 64 | 80 | 96 | 120

    ID 长度不一时为 ID 列设置固定宽度，使标题对齐。默认 ID 占用自身宽度。

  • items
    ListItemData[]

    不分组的行，或者……

  • loading
    boolean

    行数据未知时，显示与项目形状相同的加载占位行。

  • onOpen
    ((item: ListItemData) => void)

    通过点击或 Enter 打开行时调用。按住 ⌘ 或 Ctrl 的 Enter 交给外层表单处理。

  • onSelectedChange
    ((selected: Set<string>) => void)

    调用时传入所选行；此时行会显示复选框。

  • selectable
    boolean

    选择：悬停时出现复选框，选中任意项后每行都显示复选框。

  • selected
    Set<string>

    所选行的 ID。

  • selectionActions
    ReactNode

    浮动选择栏中的操作。

  • selectionBar
    boolean = true

    浮动选择栏；宿主自行显示数量时关闭，例如在对话框中。

  • virtualizeAbove
    number = 100

    超过此行数时启用虚拟化（100）。