OverflowList

OverflowList

컨테이너에 맞지 않는 항목을 숨기고 하나의 접힌 항목으로 표시하는 컴포넌트예요.

출처: 문서

본문

사용법 (Usage)

OverflowList은 컨테이너에 맞지 않는 항목을 숨기고 접힌 항목으로 표시해요. data prop으로 항목 배열을, renderItem으로 각 항목을, renderOverflow로 접힌 항목을 렌더링해요.

import { Badge, OverflowList } from '@mantine/core';
import { data } from './data';

function Demo() {
  return (
    <OverflowList
      data={data}
      renderOverflow={(items) => <Badge>+{items.length} more</Badge>}
      renderItem={(item, index) => <Badge variant="light">{item}</Badge>}
    />
  );
}

데이터 타입 (Data type)

OverflowList의 data prop은 어떤 타입의 배열이든 지원해요. 기본적으로 OverflowList은 데이터 배열에서 데이터 타입을 자동으로 추론해요. 타입을 명시하려면 컴포넌트에 제네릭 타입 인자를 전달해요.

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

function Demo() {
  return (
    <OverflowList<{ value: string; label: string }>
      data={[{ value: '1', label: 'Item 1' }]}
      renderItem={(item) => <span>{item.label}</span>}
      renderOverflow={(items) => <span>+{items.length} more</span>}
    />
  );
}

최대 행 수 (Max rows)

maxRows로 보이는 행 수를 제한할 수 있어요. 기본적으로 1행이 보여요.

import { Badge, OverflowList } from '@mantine/core';
import { data } from './data';

function Demo() {
  return (
    <OverflowList
      data={data}
      maxRows={2}
      renderOverflow={(items) => <Badge>+{items.length} more</Badge>}
      renderItem={(item, index) => <Badge variant="light">{item}</Badge>}
    />
  );
}

최대 표시 항목 수 (Max visible items)

maxVisibleItems으로 표시할 항목 수를 제한할 수 있어요. 기본적으로 제한은 없어요.

import { Badge, OverflowList } from '@mantine/core';
import { data } from './data';

function Demo() {
  return (
    <OverflowList
      data={data}
      maxVisibleItems={5}
      renderOverflow={(items) => <Badge>+{items.length} more</Badge>}
      renderItem={(item, index) => <Badge variant="light">{item}</Badge>}
    />
  );
}

접는 방향 (Collapse from)

collapseFrom prop으로 항목이 넘칠 때 어느 방향에서 접을지 제어할 수 있어요. 기본적으로 항목은 끝에서부터 접혀요. collapseFrom="start"로 설정하면 처음부터 접혀요. 마지막 항목이 계속 보여야 하는 breadcrumb 같은 패턴에 유용해요.

import { Badge, OverflowList } from '@mantine/core';
import { data } from './data';

function Demo() {
  return (
    <OverflowList
      data={data}
      collapseFrom="start"
      renderOverflow={(items) => <Badge>+{items.length} more</Badge>}
      renderItem={(item, index) => <Badge variant="light">{item}</Badge>}
    />
  );
}

예시: hover card와 넘침 (Example: overflow with hover card)

renderOverflow 함수에는 어떤 React 컴포넌트든 사용할 수 있어요. 접힌 항목을 HoverCard 안에 표시하는 예시예요.

import { Badge, Center, HoverCard, OverflowList } from '@mantine/core';
import { data } from './data';

function Demo() {
  return (
    <OverflowList
      data={data}
      renderItem={(item) => <Badge variant="light">{item}</Badge>}
      renderOverflow={(items) => (
        <HoverCard>
          <HoverCard.Target>
            <Badge>+{items.length} more</Badge>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            {items.map((item, index) => (
              <Badge key={index} variant="light">{item}</Badge>
            ))}
          </HoverCard.Dropdown>
        </HoverCard>
      )}
    />
  );
}

더 알아보기 (Learn more)

• NumberFormatter
• RollingNumber
• HoverCard