DataList

비슷한 데이터 항목들의 목록을 표시할 때 사용하는 컴포넌트예요. 라벨-값 쌍으로 구성된 데이터 목록을 깔끔하게 보여줘요.

출처: 문서

본문

사용법 (Usage)

import { DataList } from "@chakra-ui/react"

<DataList.Root>
  {data.map((item) => (
    <DataList.Item key={item.label}>
      <DataList.ItemLabel>{item.label}</DataList.ItemLabel>
      <DataList.ItemValue>{item.value}</DataList.ItemValue>
    </DataList.Item>
  ))}
</DataList.Root>

:::info

폐쇄된 컴포넌트 구성(closed component composition)을 선호한다면 아래의 스니펫을 확인해 주세요.

:::

예시 (Examples)

크기 (Sizes)

size prop을 사용하면 데이터리스트 컴포넌트의 크기를 바꿀 수 있어요.

변형 (Variants)

variant prop을 사용하면 데이터리스트 컴포넌트의 변형을 바꿀 수 있어요.

v3.1.x에서 추가됨

방향 (Orientation)

orientation prop을 사용하면 데이터리스트 컴포넌트의 방향을 바꿀 수 있어요.

정보 팁 (Info Tip)

DataList.Item 안에서 InfoTip 컴포넌트를 렌더링하면 데이터리스트에 추가 컨텍스트를 제공할 수 있어요.

구분선 (Separator)

DataList.Root에 divideY prop을 사용하면 항목 사이에 구분선을 추가할 수 있어요.

폐쇄 컴포넌트 (Closed Component)

다음은 데이터 리스트를 폐쇄된 컴포넌트 구성으로 설정하는 방법이에요.

npx @chakra-ui/cli snippet add data-list

프로젝트에 폐쇄 컴포넌트를 자동으로 추가하려면 위의 명령을 실행해 주세요.

Props

Root

DataList 컴포넌트의 Root 부분에 전달할 수 있는 prop을 확인해 주세요.

Explorer

DataList 컴포넌트의 각 부분을 인터랙티브하게 탐색해 보세요. 사이드바에서 부분을 클릭하면 미리보기에서 강조 표시돼요.

더 알아보기 (Learn more)

Chakra UI의 DataList 컴포넌트에 대해 더 자세히 알아보려면 공식 문서를 확인해 보세요.