Scroll Area

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

테이블, diff, 로그 같은 긴 콘텐츠를 제한된 공간에 맞추세요. 스크롤바는 스크롤 중이거나 포인터가 가장자리 24px 안에 들어올 때 나타납니다. 드래그와 키보드 스크롤 중에도 계속 조작할 수 있습니다. 높이나 flex·grid 트랙을 받으면 영역이 그 높이를 채우고 스크롤하며, 없으면 내용의 높이를 따릅니다. 내용을 가리는 가장자리는 위아래까지 흐려져, 잘린 목록이 더 있다는 것을 보여 줍니다. AppShell의 콘텐츠처럼 페이지 자체를 스크롤하는 영역에는 fade="none"을 주세요.

페이지를 불필요한 중첩 스크롤 영역으로 나누지 마세요. 대신 단일 스크롤 영역을 사용하세요. 콘텐츠가 뷰 밖으로 스크롤되는 모든 영역에 label을 지정하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

ScrollArea(label) → Root / Viewport + Scrollbar / Thumb / Corner

키보드와 접근성

Tab이 영역에 포커스를 둡니다. 화살표 키와 Page Up 또는 Page Down으로 스크롤합니다. 휠과 터치 스크롤은 계속 동작합니다. label이 영역의 접근 가능한 이름을 제공합니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { ScrollArea } from '@surflane/ui'

<ScrollArea label='Build logs' orientation='both' style={{ maxHeight: 240 }}>
  <table>...</table>
</ScrollArea>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰