DataList

DataList (데이터 목록)

DataList 컴포넌트는 라벨-값(label-value) 쌍을 설명 목록(description list)으로 보여 주는 컴포넌트예요. 시맨틱한 dt와 dd HTML 요소를 사용해요.

출처: 문서

본문

DataList 컴포넌트는 라벨-값 쌍으로 이루어진 설명 목록(dl) 요소를 렌더링해요. 시맨틱한 dt와 dd HTML 요소를 사용해요.

import { DataList } from '@mantine/core';

const data = [
  { label: 'Name', value: 'John Doe' },
  { label: 'Email', value: '[email protected]' },
  { label: 'Role', value: 'Software Engineer' },
  { label: 'Location', value: 'San Francisco, CA' },
];

function Demo() {
  return (
    <DataList>
      {data.map((item) => (
        <DataList.Item key={item.label}>
          <DataList.ItemLabel>{item.label}</DataList.ItemLabel>
          <DataList.ItemValue>{item.value}</DataList.ItemValue>
        </DataList.Item>
      ))}
    </DataList>
  );
}

구분선 추가 (With divider)

withDivider prop을 설정하면 항목 사이에 경계선(border)이 추가돼요.

import { DataList } from '@mantine/core';

function Demo() {
  return (
    <DataList withDivider>
      <DataList.Item>
        <DataList.ItemLabel>Name</DataList.ItemLabel>
        <DataList.ItemValue>John Doe</DataList.ItemValue>
      </DataList.Item>
      <DataList.Item>
        <DataList.ItemLabel>Email</DataList.ItemLabel>
        <DataList.ItemValue>[email protected]</DataList.ItemValue>
      </DataList.Item>
      <DataList.Item>
        <DataList.ItemLabel>Role</DataList.ItemLabel>
        <DataList.ItemValue>Software Engineer</DataList.ItemValue>
      </DataList.Item>
    </DataList>
  );
}

세로 방향 (Vertical orientation)

orientation="vertical"을 설정하면 각 항목 안에서 라벨이 값 위에 쌓이도록 배치할 수 있어요.

import { DataList } from '@mantine/core';

function Demo() {
  return (
    <DataList orientation="vertical" withDivider>
      <DataList.Item>
        <DataList.ItemLabel>Name</DataList.ItemLabel>
        <DataList.ItemValue>John Doe</DataList.ItemValue>
      </DataList.Item>
      <DataList.Item>
        <DataList.ItemLabel>Email</DataList.ItemLabel>
        <DataList.ItemValue>[email protected]</DataList.ItemValue>
      </DataList.Item>
      <DataList.Item>
        <DataList.ItemLabel>Role</DataList.ItemLabel>
        <DataList.ItemValue>Software Engineer</DataList.ItemValue>
      </DataList.Item>
    </DataList>
  );
}

더 알아보기 (Learn more)

• Table — 표 컴포넌트
• Divider — 구분선 컴포넌트