Themes

Advanced

Utils

Data List

메타데이터를 키-값 쌍의 목록으로 표시합니다.

View source Report an issue View in Playground

Status: Authorized
ID: u_2J89JSA4GJ
Name: Vlad Moroz
Email: vlad@workos.com
Company: 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:vlad@workos.com">vlad@workos.com</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 Reference

이 컴포넌트는 dl 요소를 기반으로 하며 common margin props를 지원합니다.

Root

데이터 목록의 모든 부분을 포함합니다.

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

Item

키-값 쌍을 감싸는 컴포넌트입니다.

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

Label

키-값 쌍의 키를 포함하는 컴포넌트입니다.

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

Value

키-값 쌍의 값을 포함하는 컴포넌트입니다.

Examples

Orientation

orientation prop을 사용하여 데이터 목록의 레이아웃 방식을 변경할 수 있습니다.

Name: Vlad Moroz
Email: vlad@workos.com
Company: 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:vlad@workos.com">vlad@workos.com</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

size prop을 사용하여 데이터 목록의 크기를 변경할 수 있습니다.

Name: Vlad Moroz
Email: vlad@workos.com
Company: WorkOS

Name: Vlad Moroz
Email: vlad@workos.com
Company: WorkOS

Name: Vlad Moroz
Email: vlad@workos.com
Company: 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:vlad@workos.com">vlad@workos.com</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:vlad@workos.com">vlad@workos.com</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:vlad@workos.com">vlad@workos.com</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

Label 부분에 color prop을 사용하여 특정 색상을 지정할 수 있습니다.

Name: Indigo
Name: Cyan
Name: Orange
Name: Crimson

<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>

High-contrast

highContrast prop을 사용하여 배경과의 색상 대비를 높일 수 있습니다.

Name: Indigo
Name: Cyan
Name: Orange
Name: Crimson

Name: Indigo
Name: Cyan
Name: Orange
Name: Crimson

<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>

PreviousContext Menu

NextDialog

Edit this page on GitHub.

Overview

Theme

Layout

Typography

Components

Utilities