데이터 리스트

데이터 리스트 (Data List)

메타데이터를 키-값(key-value) 쌍의 목록으로 표시해 주는 컴포넌트예요. dl 요소 기반으로 만들어졌어요.

출처: 문서

본문

메타데이터를 키-값(key-value) 쌍의 목록으로 표시해요.

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

이 컴포넌트는 dl 요소를 기반으로 하며 공통 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으로 데이터 리스트가 배치되는 방식을 바꿔요.

<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

size prop으로 데이터 리스트의 크기를 바꿔요.

<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

Label 부분에 color prop을 사용해 특정 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>

High-contrast

highContrast prop으로 배경과의 색 대비를 높여요.

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

더 알아보기 (Learn more)

Table 컴포넌트 — 표 형태의 데이터 표시
Description list — dl 요소 살펴보기