ScrollArea

자기 스크롤바를 가진 상자입니다. 브라우저의 스크롤바는 운영체제가 그리므로 기기마다 두께가 다르고, 자기가 파인 시트와 색도 다릅니다. 이쪽은 요소이므로 어디서나 같고 라이브러리의 토큰으로 만들어집니다.

import { ScrollArea } from 'neba';

<ScrollArea height={200} fade>
  …
</ScrollArea>;

Props

Prop	타입	기본값	설명
orientation공통	'vertical' | 'horizontal' | 'both'	'vertical'	스크롤할 수 있는 축. NebaOrientation에 값 하나를 더한 형태입니다. both는 그 타입을 쓰는 다른 컴포넌트에서는 의미가 없습니다
height	number | string	—	고정 높이. 세로 스크롤 영역은 무언가로 묶여야 스크롤할 것이 생깁니다. 숫자는 px입니다
maxHeight	number | string	—	같은 것을 상한으로
fade	boolean	false	내용이 더 남아 있는 가장자리에서만 내용을 서서히 지웁니다. 내용 위의 그러데이션이 아니라 mask라서 반투명한 표면 위에서도 성립합니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	레일의 두께. 스크롤바는 컨트롤이 아니므로 컨트롤 높이와는 다른 사다리입니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	thumb이 띠는 색 계열. 글 옆에서 두 번째 단처럼 보이지 않도록 낮춰 섞습니다
children	ReactNode	—	스크롤되는 내용

<div>의 기본 속성은 color를 제외하고 루트로 전달됩니다. 내부는 평범한 스크롤 컨테이너라 휠, 트랙패드, 관성, 키보드는 모두 브라우저의 것 그대로입니다.

ScrollZone과는 다릅니다. 그쪽은 레일입니다. 한 방향으로 늘어선 항목들과 그것을 넘기는 버튼, 카드 줄이나 칩 줄을 위한 것입니다. 이쪽은 평범한 경우입니다: 안에 든 것에 비해 작은 상자.

예시

height · maxHeight

세로 스크롤 영역은 무언가로 높이가 묶여야 스크롤할 것이 생깁니다. height는 고정 높이, maxHeight는 상한이며 둘 다 px 숫자나 임의의 CSS 길이를 받습니다. 가로 영역은 이미 컨테이너 너비에 묶여 있습니다.

orientation

기본값은 vertical입니다. horizontal은 아래쪽에 레일을 그리고, both는 둘 다와 그 사이의 모서리까지 그립니다.

import { Box, Chip, ScrollArea } from 'neba';

const TAGS = [
  'react',
  'typescript',
  'tailwind',
  'base-ui',
  'design-system',
  'components',
  'accessibility',
  'esm',
  'tree-shaking',
  'dark-mode'
];

export default function ScrollAreaOrientation() {
  return (
    <Box variant="outline" className="w-full max-w-sm">
      <ScrollArea orientation="horizontal" fade>
        <div className="flex w-max items-center gap-2 pb-3">
          {TAGS.map((tag) => (
            <Chip key={tag} size="sm">
              {tag}
            </Chip>
          ))}
        </div>
      </ScrollArea>
    </Box>
  );
}

fade

내용이 더 남아 있는 가장자리에서만 내용을 서서히 지웁니다. 맨 위에 있을 때 위쪽에는 fade가 없다는 뜻입니다. 내용 위에 덧칠한 그러데이션이 아니라 mask로 그리기 때문에 반투명한 표면 위에서도 성립합니다.

import { Box, ScrollArea, Typography } from 'neba';

const LINES = Array.from({ length: 14 }, (_, index) => `Line ${index + 1}`);

export default function ScrollAreaFade() {
  return (
    <div className="grid w-full max-w-lg grid-cols-1 gap-4 sm:grid-cols-2">
      {[false, true].map((fade) => (
        <Box key={String(fade)} variant="outline">
          <Typography level="caption" className="mb-2 block">
            {fade ? 'fade' : 'no fade'}
          </Typography>
          <ScrollArea height={140} fade={fade}>
            <div className="flex flex-col gap-1 pe-3">
              {LINES.map((line) => (
                <Typography key={line} level="body">
                  {line}
                </Typography>
              ))}
            </div>
          </ScrollArea>
        </Box>
      ))}
    </div>
  );
}

size · color

size는 레일의 두께입니다. 스크롤바는 컨트롤이 아니라 레일이므로 컨트롤 높이보다 훨씬 아래에 있는 자기만의 사다리를 씁니다. color는 thumb이 띠는 색 계열이며, 글 옆에서 두 번째 단처럼 보이지 않도록 낮춰 섞습니다.

import { Box, ScrollArea, Typography } from 'neba';

const sizes = ['xs', 'md', 'xl'] as const;
const LINES = Array.from({ length: 12 }, (_, index) => `Row ${index + 1}`);

export default function ScrollAreaSizes() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-3">
      {sizes.map((size) => (
        <Box key={size} variant="outline">
          <Typography level="caption" className="mb-2 block">
            {size}
          </Typography>
          <ScrollArea size={size} height={120} color="secondary">
            <div className="flex flex-col gap-1 pe-3">
              {LINES.map((line) => (
                <Typography key={line} level="body">
                  {line}
                </Typography>
              ))}
            </div>
          </ScrollArea>
        </Box>
      ))}
    </div>
  );
}

접근성

• viewport에 focus가 가며 방향키, Page Up/Down, Home, End로 스크롤됩니다.
• 스크롤바는 포인터가 영역 위에 있거나 스크롤 중일 때 나타납니다. 어느 경우에도 내용은 스크롤바 없이 도달할 수 있습니다.