Scroller

Scroller

네비게이션 컨트롤이 있는 가로 스크롤 컨테이너 컴포넌트예요. 콘텐츠가 컨테이너를 넘치면 네비게이션 컨트롤(치브론 버튼)을 표시해요.

출처: 문서

본문

사용법 (Usage)

Scroller은 콘텐츠가 컨테이너를 넘칠 때 네비게이션 컨트롤(치브론 버튼)을 표시하는 가로 스크롤 컨테이너예요. 트랙패드, shift + 마우스 휠, 또는 터치 제스처로 네이티브 스크롤을 지원해요.

import { Badge, Group, Scroller } from '@mantine/core';

function Demo() {
  return (
    <Scroller>
      <Group gap="xs">
        {Array.from({ length: 20 }).map((_, index) => (
          <Badge key={index}>Badge {index + 1}</Badge>
        ))}
      </Group>
    </Scroller>
  );
}

마우스 드래그 스크롤 (Mouse drag scrolling)

draggable prop을 설정하면 마우스로 클릭하고 드래그해서 스크롤할 수 있어요.

import { Badge, Group, Scroller } from '@mantine/core';

function Demo() {
  return (
    <Scroller draggable>
      <Group gap="xs">
        {Array.from({ length: 20 }).map((_, index) => (
          <Badge key={index}>Badge {index + 1}</Badge>
        ))}
      </Group>
    </Scroller>
  );
}

스크롤 양 (Scroll amount)

scrollAmount prop으로 네비게이션 버튼을 클릭할 때 컨테이너가 스크롤되는 픽셀 수를 제어할 수 있어요. 기본값은 200이에요.

import { Badge, Group, Scroller } from '@mantine/core';

function Demo() {
  return (
    <Scroller scrollAmount={400}>
      <Group gap="xs">
        {Array.from({ length: 30 }).map((_, index) => (
          <Badge key={index}>Badge {index + 1}</Badge>
        ))}
      </Group>
    </Scroller>
  );
}

컨트롤 크기 (Control size)

controlSize prop으로 네비게이션 버튼의 크기를 변경할 수 있어요. 유효한 Mantine 크기 값(xs, sm, md, lg, xl)이나 숫자(픽셀로 변환)를 받아요.

import { Badge, Group, Scroller } from '@mantine/core';

function Demo() {
  return (
    <Scroller controlSize="lg">
      <Group gap="xs">
        {Array.from({ length: 20 }).map((_, index) => (
          <Badge key={index}>Badge {index + 1}</Badge>
        ))}
      </Group>
    </Scroller>
  );
}

커스텀 아이콘 (Custom icons)

startControlIcon과 endControlIcon prop으로 기본 치브론 아이콘을 커스텀 아이콘으로 바꿀 수 있어요.

import { ArrowLeftIcon, ArrowRightIcon } from '@phosphor-icons/react';
import { Badge, Group, Scroller } from '@mantine/core';

function Demo() {
  return (
    <Scroller startControlIcon={<ArrowLeftIcon size={16} />} endControlIcon={<ArrowRightIcon size={16} />}>
      <Group gap="xs">
        {Array.from({ length: 20 }).map((_, index) => (
          <Badge key={index}>Badge {index + 1}</Badge>
        ))}
      </Group>
    </Scroller>
  );
}

Tabs와 함께 사용 (Usage with Tabs)

사용 가능한 공간에 맞지 않는 탭이 많을 때 탭 목록을 스크롤 가능하게 만들려면 Tabs.List 안에서 Scroller을 사용해요.

import { Scroller, Tabs } from '@mantine/core';

function Demo() {
  return (
    <Tabs defaultValue="first">
      <Tabs.List>
        <Scroller>
          <Tabs.Tab value="first">First tab</Tabs.Tab>
          <Tabs.Tab value="second">Second tab</Tabs.Tab>
          <Tabs.Tab value="third">Third tab</Tabs.Tab>
          <Tabs.Tab value="fourth">Fourth tab</Tabs.Tab>
          <Tabs.Tab value="fifth">Fifth tab</Tabs.Tab>
          <Tabs.Tab value="sixth">Sixth tab</Tabs.Tab>
          <Tabs.Tab value="seventh">Seventh tab</Tabs.Tab>
          <Tabs.Tab value="eighth">Eighth tab</Tabs.Tab>
          <Tabs.Tab value="ninth">Ninth tab</Tabs.Tab>
          <Tabs.Tab value="tenth">Tenth tab</Tabs.Tab>
        </Scroller>
      </Tabs.List>
    </Tabs>
  );
}

더 알아보기 (Learn more)

• ScrollArea
• Transition