@ devtools-ds/表单

灵活表组件,以Chrome和FireFox的网络检查员为模型.

安装

npm i @devtools-ds/table
# or with yarn
yarn add @devtools-ds/table

然后使用代码中的组件 只需导入它!

import { Table } from "@devtools-ds/table";

无障碍办法

这种互动并不存在既定的模式,除了作为一个 数据网格然而,数据网格通常选择每个单元格而不是整行.

我观察了Chrome和FireFox的相互作用 但他们有一些问题 在两个执行中, 视图在移动时不选择新的节点,而 Tab vs 箭头行为可能无法预测。 由于这些原因,我简化了整个互动,并把焦点从表中选定的状态中分离出来. 用户可以使用分页,箭头键来导航焦点,或者页面导航键. 选择行需要点击或键盘条目 。 标记为选中的行 aria-selected 在网格图案内.

使用量

import { Table } from "@devtools-ds/table";

export const BasicUsage = () => {
  const [selected, setSelected] = React.useState("");
  return (
    <Table
      selected={selected}
      onSelected={(id) => {
        setSelected(id);
      }}
    >
      <Table.Head>
        <Table.Row>
          <Table.HeadCell style={{ width: "10%" }}>Status</Table.HeadCell>
          <Table.HeadCell style={{ width: "10%" }}>Method</Table.HeadCell>
          <Table.HeadCell>Domain</Table.HeadCell>
          <Table.HeadCell>Transferred</Table.HeadCell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row id="one">
          <Table.Cell>200</Table.Cell>
          <Table.Cell>GET</Table.Cell>
          <Table.Cell>localhost:6006</Table.Cell>
          <Table.Cell>4.6 KB</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
};

资源

• 数据网格
• 角网格
• 表列调整大小

贡献者

感谢这些伟大的人emoji 密钥:

泰勒克鲁皮卡 📖 🎨 💻 💡 ⚠️

安德鲁·利索夫斯基 💻

阿德里安·德拉罗萨 📖 💡 💻

本项目遵循 全部贡献者 规格。 任何捐款都欢迎!