Separator

미리보기

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

사용법

콘텐츠에서 가로 또는 세로로 의미 있는 경계를 표시하세요. 바깥 간격은 부모 Stack이나 Inline이 설정합니다. 통계 줄처럼 한 줄에 놓인 값 사이에는 variant='dot'이 양옆에 여백을 둔 작은 점을 둡니다. 보조 기술과 복사한 텍스트에는 그 자리에 쉼표가 들어가 값이 서로 붙지 않습니다.

모든 행 사이에 선을 반복하지 마세요. 대신 간격을 사용하세요. 순수 장식 선에는 CSS나 aria-hidden을 사용하세요.

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

구성

Separator(orientation, optional horizontal inset) | Separator variant='dot' (span holding a comma that shows as a dot)

키보드와 접근성

Separator는 비대화형이며 Tab 순서에 없습니다. aria-orientation이 방향을 전달합니다.

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

예시 코드

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

import { Separator } from '@surflane/ui'

<Separator />
<Separator inset />
<Separator orientation='vertical' />
<Text>dgx-001<Separator variant='dot' />24 GiB free</Text>

주요 API

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

관련 토큰