数据列表

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

View source Report an issue View in Playground

状态: 已授权
ID: u_2J89JSA4GJ
姓名: 弗拉基米尔·莫若兹
邮箱: vlad@workos.com
公司: WorkOS

<DataList.Root>
	<DataList.Item align="center">
		<DataList.Label minWidth="88px">状态</DataList.Label>
		<DataList.Value>
			<Badge color="jade" variant="soft" radius="full">
				已授权
			</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="复制值"
					color="gray"
					variant="ghost"
				>
					<CopyIcon />
				</IconButton>
			</Flex>
		</DataList.Value>
	</DataList.Item>
	<DataList.Item>
		<DataList.Label minWidth="88px">姓名</DataList.Label>
		<DataList.Value>弗拉基米尔·莫若兹</DataList.Value>
	</DataList.Item>
	<DataList.Item>
		<DataList.Label minWidth="88px">邮箱</DataList.Label>
		<DataList.Value>
			<Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
		</DataList.Value>
	</DataList.Item>
	<DataList.Item>
		<DataList.Label minWidth="88px">公司</DataList.Label>
		<DataList.Value>
			<Link target="_blank" href="https://workos.com">
				WorkOS
			</Link>
		</DataList.Value>
	</DataList.Item>
</DataList.Root>

API 参考

该组件基于 dl 元素，并支持常见边距属性。

根节点

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

Prop	Type	Default
`orientation`	`Responsive<"horizontal" \| "vertical">`	`"horizontal"`
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`
`trim`	`Responsive<"normal" \| "start" \| "end" \| "both">`	No default value

项

包裹一个键值对。

Prop	Type	Default
`align`	`Responsive<enum>`	No default value

Prop	Type	Default
`width`	`Responsive<string>`	No default value
`minWidth`	`Responsive<string>`	No default value
`maxWidth`	`Responsive<string>`	No default value
`color`	`enum`	No default value
`highContrast`	`boolean`	No default value

值

包含键值对中的值。

示例

方向

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

姓名: 弗拉基米尔·莫若兹
邮箱: vlad@workos.com
公司: WorkOS

<DataList.Root orientation={{ initial: "vertical", sm: "horizontal" }}>
	<DataList.Item>
		<DataList.Label minWidth="88px">姓名</DataList.Label>
		<DataList.Value>弗拉基米尔·莫若兹</DataList.Value>
	</DataList.Item>
	<DataList.Item>
		<DataList.Label minWidth="88px">邮箱</DataList.Label>
		<DataList.Value>
			<Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
		</DataList.Value>
	</DataList.Item>
	<DataList.Item>
		<DataList.Label minWidth="88px">公司</DataList.Label>
		<DataList.Value>
			<Link target="_blank" href="https://workos.com">
				WorkOS
			</Link>
		</DataList.Value>
	</DataList.Item>
</DataList.Root>

尺寸

使用 size 属性来改变数据列表的大小。

姓名: 弗拉基米尔·莫若兹
邮箱: vlad@workos.com
公司: WorkOS

姓名: 弗拉基米尔·莫若兹
邮箱: vlad@workos.com
公司: WorkOS

姓名: 弗拉基米尔·莫若兹
邮箱: vlad@workos.com
公司: WorkOS

<Flex direction="column" gap="6">
	<DataList.Root size="1">
		<DataList.Item>
			<DataList.Label minWidth="88px">姓名</DataList.Label>
			<DataList.Value>弗拉基米尔·莫若兹</DataList.Value>
		</DataList.Item>
		<DataList.Item>
			<DataList.Label minWidth="88px">邮箱</DataList.Label>
			<DataList.Value>
				<Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
			</DataList.Value>
		</DataList.Item>
		<DataList.Item>
			<DataList.Label minWidth="88px">公司</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">姓名</DataList.Label>
			<DataList.Value>弗拉基米尔·莫若兹</DataList.Value>
		</DataList.Item>
		<DataList.Item>
			<DataList.Label minWidth="88px">邮箱</DataList.Label>
			<DataList.Value>
				<Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
			</DataList.Value>
		</DataList.Item>
		<DataList.Item>
			<DataList.Label minWidth="88px">公司</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">姓名</DataList.Label>
			<DataList.Value>弗拉基米尔·莫若兹</DataList.Value>
		</DataList.Item>
		<DataList.Item>
			<DataList.Label minWidth="88px">邮箱</DataList.Label>
			<DataList.Value>
				<Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
			</DataList.Value>
		</DataList.Item>
		<DataList.Item>
			<DataList.Label minWidth="88px">公司</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">姓名</DataList.Label>
		<DataList.Value>靛蓝</DataList.Value>
	</DataList.Item>
	<DataList.Item>
		<DataList.Label color="cyan">姓名</DataList.Label>
		<DataList.Value>青色</DataList.Value>
	</DataList.Item>
	<DataList.Item>
		<DataList.Label color="orange">姓名</DataList.Label>
		<DataList.Value>橙色</DataList.Value>
	</DataList.Item>
	<DataList.Item>
		<DataList.Label color="crimson">姓名</DataList.Label>
		<DataList.Value>深红色</DataList.Value>
	</DataList.Item>
</DataList.Root>

高对比度

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

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

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

<Flex gap="9">
	<DataList.Root orientation="vertical">
		<DataList.Item>
			<DataList.Label color="indigo">姓名</DataList.Label>
			<DataList.Value>靛蓝</DataList.Value>
		</DataList.Item>
		<DataList.Item>
			<DataList.Label color="cyan">姓名</DataList.Label>
			<DataList.Value>青色</DataList.Value>
		</DataList.Item>
		<DataList.Item>
			<DataList.Label color="orange">姓名</DataList.Label>
			<DataList.Value>橙色</DataList.Value>
		</DataList.Item>
		<DataList.Item>
			<DataList.Label color="crimson">姓名</DataList.Label>
			<DataList.Value>深红色</DataList.Value>
		</DataList.Item>
	</DataList.Root>

	<DataList.Root orientation="vertical">
		<DataList.Item>
			<DataList.Label color="indigo" highContrast>
				姓名
			</DataList.Label>
			<DataList.Value>靛蓝</DataList.Value>
		</DataList.Item>
		<DataList.Item>
			<DataList.Label color="cyan" highContrast>
				姓名
			</DataList.Label>
			<DataList.Value>青色</DataList.Value>
		</DataList.Item>
		<DataList.Item>
			<DataList.Label color="orange" highContrast>
				姓名
			</DataList.Label>
			<DataList.Value>橙色</DataList.Value>
		</DataList.Item>
		<DataList.Item>
			<DataList.Label color="crimson" highContrast>
				姓名
			</DataList.Label>
			<DataList.Value>深红色</DataList.Value>
		</DataList.Item>
	</DataList.Root>
</Flex>

上一篇上下文菜单 Context Menu

下一篇对话框 Dialog

在 GitHub 上编辑此页面

概览 Overview

主题 Theme

布局 Layout

排版

组件

通用工具 Utilities

数据列表