数据列表

以键值对的形式显示元数据列表。

查看源代码报告问题在 Playground 中查看

状态: 已授权
ID: u_2J89JSA4GJ
姓名: Vlad Moroz
电子邮件: [email protected]
公司: WorkOS

<DataList.Root>
  <DataList.Item align="center">
    <DataList.Label minWidth="88px">Status</DataList.Label>
    <DataList.Value>
      <Badge color="jade" variant="soft" radius="full">
        Authorized
      </Badge>
    </DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label minWidth="88px">ID</DataList.Label>
    <DataList.Value>
      <Flex align="center" gap="2">
        <Code variant="ghost">u_2J89JSA4GJ</Code>
        <IconButton
          size="1"
          aria-label="Copy value"
          color="gray"
          variant="ghost"
        >
          <CopyIcon />
        </IconButton>
      </Flex>
    </DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label minWidth="88px">Name</DataList.Label>
    <DataList.Value>Vlad Moroz</DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label minWidth="88px">Email</DataList.Label>
    <DataList.Value>
      <Link href="mailto:[email protected]">[email protected]</Link>
    </DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label minWidth="88px">Company</DataList.Label>
    <DataList.Value>
      <Link target="_blank" href="https://workos.com">
        WorkOS
      </Link>
    </DataList.Value>
  </DataList.Item>
</DataList.Root>

API 参考

此组件基于 dl 元素并支持通用边距属性.

根

包含数据列表的所有部分。

属性	类型	默认值
`orientation`	`Responsive<"horizontal" \| "vertical">`	`"horizontal"`
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`
`trim`	`Responsive<"normal" \| "start" \| "end" \| "both">`	无默认值

项目

包装一个键值对。

属性	类型	默认值
`align`	`Responsive<enum>`	无默认值

属性	类型	默认值
`width`	`Responsive<string>`	无默认值
`minWidth`	`Responsive<string>`	无默认值
`maxWidth`	`Responsive<string>`	无默认值
`color`	`enum`	无默认值
`highContrast`	`boolean`	无默认值

值

包含键值对的值。

示例

方向

使用 orientation 属性来更改数据列表的布局方式。

姓名: Vlad Moroz
电子邮件: [email protected]
公司: WorkOS

<DataList.Root orientation={{ initial: 'vertical', sm: 'horizontal' }}>
  <DataList.Item>
    <DataList.Label minWidth="88px">Name</DataList.Label>
    <DataList.Value>Vlad Moroz</DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label minWidth="88px">Email</DataList.Label>
    <DataList.Value>
      <Link href="mailto:[email protected]">[email protected]</Link>
    </DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label minWidth="88px">Company</DataList.Label>
    <DataList.Value>
      <Link target="_blank" href="https://workos.com">
        WorkOS
      </Link>
    </DataList.Value>
  </DataList.Item>
</DataList.Root>

尺寸

使用 size 属性来更改数据列表的尺寸。

姓名: Vlad Moroz
电子邮件: [email protected]
公司: WorkOS

姓名: Vlad Moroz
电子邮件: [email protected]
公司: WorkOS

姓名: Vlad Moroz
电子邮件: [email protected]
公司: WorkOS

<Flex direction="column" gap="6">
  <DataList.Root size="1">
    <DataList.Item>
      <DataList.Label minWidth="88px">Name</DataList.Label>
      <DataList.Value>Vlad Moroz</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label minWidth="88px">Email</DataList.Label>
      <DataList.Value>
        <Link href="mailto:[email protected]">[email protected]</Link>
      </DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label minWidth="88px">Company</DataList.Label>
      <DataList.Value>
        <Link target="_blank" href="https://workos.com">
          WorkOS
        </Link>
      </DataList.Value>
    </DataList.Item>
  </DataList.Root>

  <DataList.Root size="2">
    <DataList.Item>
      <DataList.Label minWidth="88px">Name</DataList.Label>
      <DataList.Value>Vlad Moroz</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label minWidth="88px">Email</DataList.Label>
      <DataList.Value>
        <Link href="mailto:[email protected]">[email protected]</Link>
      </DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label minWidth="88px">Company</DataList.Label>
      <DataList.Value>
        <Link target="_blank" href="https://workos.com">
          WorkOS
        </Link>
      </DataList.Value>
    </DataList.Item>
  </DataList.Root>

  <DataList.Root size="3">
    <DataList.Item>
      <DataList.Label minWidth="88px">Name</DataList.Label>
      <DataList.Value>Vlad Moroz</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label minWidth="88px">Email</DataList.Label>
      <DataList.Value>
        <Link href="mailto:[email protected]">[email protected]</Link>
      </DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label minWidth="88px">Company</DataList.Label>
      <DataList.Value>
        <Link target="_blank" href="https://workos.com">
          WorkOS
        </Link>
      </DataList.Value>
    </DataList.Item>
  </DataList.Root>
</Flex>

颜色

在标签部分使用 color 属性来分配特定的颜色.

姓名: 靛蓝色
姓名: 青色
姓名: 橙色
姓名: 猩红色

<DataList.Root orientation="vertical">
  <DataList.Item>
    <DataList.Label color="indigo">Name</DataList.Label>
    <DataList.Value>Indigo</DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label color="cyan">Name</DataList.Label>
    <DataList.Value>Cyan</DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label color="orange">Name</DataList.Label>
    <DataList.Value>Orange</DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label color="crimson">Name</DataList.Label>
    <DataList.Value>Crimson</DataList.Value>
  </DataList.Item>
</DataList.Root>

高对比度

使用 highContrast 属性来增加与背景的色彩对比度。

姓名: 靛蓝色
姓名: 青色
姓名: 橙色
姓名: 猩红色

姓名: 靛蓝色
姓名: 青色
姓名: 橙色
姓名: 猩红色

<Flex gap="9">
  <DataList.Root orientation="vertical">
    <DataList.Item>
      <DataList.Label color="indigo">Name</DataList.Label>
      <DataList.Value>Indigo</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label color="cyan">Name</DataList.Label>
      <DataList.Value>Cyan</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label color="orange">Name</DataList.Label>
      <DataList.Value>Orange</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label color="crimson">Name</DataList.Label>
      <DataList.Value>Crimson</DataList.Value>
    </DataList.Item>
  </DataList.Root>

  <DataList.Root orientation="vertical">
    <DataList.Item>
      <DataList.Label color="indigo" highContrast>
        Name
      </DataList.Label>
      <DataList.Value>Indigo</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label color="cyan" highContrast>
        Name
      </DataList.Label>
      <DataList.Value>Cyan</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label color="orange" highContrast>
        Name
      </DataList.Label>
      <DataList.Value>Orange</DataList.Value>
    </DataList.Item>
    <DataList.Item>
      <DataList.Label color="crimson" highContrast>
        Name
      </DataList.Label>
      <DataList.Value>Crimson</DataList.Value>
    </DataList.Item>
  </DataList.Root>
</Flex>

上一个上下文菜单

下一个对话框

在 GitHub 上编辑此页面。

概述

主题

布局

排版

组件

工具

数据列表