List

List (목록)

List 컴포넌트는 순서 있는(ordered) 또는 순서 없는(unordered) 목록을 표시하는 컴포넌트예요. 아이콘, 중첩 목록, 순서 커스터마이즈를 지원해요.

출처: 문서

본문

List 컴포넌트로 순서 있는 또는 순서 없는 목록을 만들 수 있어요. type prop으로 unordered(기본) 또는 ordered를 지정할 수 있어요.

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

function Demo() {
  return (
    <List>
      <List.Item>Clone or download repository from GitHub</List.Item>
      <List.Item>Install dependencies with yarn</List.Item>
      <List.Item>To start development server run npm start command</List.Item>
      <List.Item>Run tests to make sure your changes do not break the build</List.Item>
      <List.Item>Submit a pull request once you are done</List.Item>
    </List>
  );
}

아이콘 사용 (With icons)

목록 불릿을 아이콘으로 바꿀 수 있어요. 다음 props를 제공하면 돼요.

  • List 컴포넌트의 icon은 모든 목록 요소의 기본 아이콘으로 사용돼요
  • List.Item 컴포넌트의 icon은 List에서 온 컨텍스트 아이콘을 덮어써요
  • spacing – 목록 항목 사이의 간격. 테마 값이나 유효한 CSS 값, 기본값은 0
  • center – 아이콘과 함께 항목 콘텐츠를 가운데 정렬해요
  • size – 테마에서 폰트 크기를 설정해요
import { List, ThemeIcon } from '@mantine/core';
import { CheckCircleIcon, CircleDashedIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <List
      spacing="xs"
      size="sm"
      center
      icon={
        <ThemeIcon color="teal" size={24} radius="xl">
          <CheckCircleIcon size={16} />
        </ThemeIcon>
      }
    >
      <List.Item>Clone or download repository from GitHub</List.Item>
      <List.Item>Install dependencies with yarn</List.Item>
      <List.Item>To start development server run npm start command</List.Item>
      <List.Item>Run tests to make sure your changes do not break the build</List.Item>
      <List.Item
        icon={
          <ThemeIcon color="blue" size={24} radius="xl">
            <CircleDashedIcon size={16} />
          </ThemeIcon>
        }
      >
        Submit a pull request once you are done
      </List.Item>
    </List>
  );
}

중첩 목록 (Nested lists)

withPadding prop으로 중첩 목록을 들여 쓰고, listStyleType으로 불릿 타입을 제어할 수 있어요.

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

function Demo() {
  return (
    <List listStyleType="disc">
      <List.Item>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      </List.Item>
      <List.Item>First order item</List.Item>
      <List.Item>
        First order item with list
        <List withPadding listStyleType="disc">
          <List.Item>Nested item</List.Item>
          <List.Item>Nested item</List.Item>
          <List.Item>
            Nested item with list
            <List withPadding listStyleType="disc">
              <List.Item>Even more nested</List.Item>
              <List.Item>Even more nested</List.Item>
            </List>
          </List.Item>
          <List.Item>Nested item</List.Item>
        </List>
      </List.Item>
      <List.Item>First order item</List.Item>
    </List>
  );
}

순서 있는 목록 번호 매기기

특정 숫자에서 시작

start prop으로 특정 값부터 번호를 매길 수 있어요.

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

function Demo() {
  return (
    <List type="ordered" start={5}>
      <List.Item>This is item #5</List.Item>
      <List.Item>This is item #6</List.Item>
      <List.Item>This is item #7</List.Item>
      <List.Item>This is item #8</List.Item>
    </List>
  );
}

역순 번호 매기기

reversed prop으로 카운트다운 목록을 만들 수 있어요.

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

function Demo() {
  return (
    <List type="ordered" reversed>
      <List.Item>This is item #3</List.Item>
      <List.Item>This is item #2</List.Item>
      <List.Item>This is item #1</List.Item>
    </List>
  );
}

커스텀 항목 값

개별 List.Item 컴포넌트의 value prop으로 특정 숫자를 설정할 수 있어요.

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

function Demo() {
  return (
    <List type="ordered">
      <List.Item>First item</List.Item>
      <List.Item value={5}>This item is #5</List.Item>
      <List.Item>This item is #6 (continues from previous)</List.Item>
      <List.Item value={10}>This item is #10</List.Item>
      <List.Item>This item is #11</List.Item>
    </List>
  );
}

더 알아보기 (Learn more)

  • Text — 텍스트 컴포넌트
  • ThemeIcon — 아이콘을 담는 컴포넌트