List

미리보기

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

사용법

반복되는 독립 리소스나 기록 항목 집합을 보여주세요. 본문 텍스트는 Content에, 상태와 액션은 Actions에 두세요. 각 Item은 호버 표면에 가로 16px, 세로 12px 패딩을 줍니다.

• 항목 사이에 구분선을 추가하거나 카드를 중첩하지 마세요. 대신 List의 간격과 호버 표면이 항목을 분리하게 하세요.
• 전체 항목 클릭에 의존하지 마세요. 목적을 이름으로 드러내는 링크와 버튼을 사용하세요.
• List를 Listbox 선택 위젯으로 사용하지 마세요. 옵션 선택에는 Select, Combobox, CheckboxGroup을 사용하세요.

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

구성

Root(ul role=list) → Item(li) → Content(Title + Description) + Actions

키보드와 접근성

내부 액션만 Tab 순서에 들어갑니다. Root는 네이티브 목록 구조를 유지합니다. 작은 화면에서는 Actions가 다음 줄로 이동합니다.

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

예시 코드

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

import { List, Button } from '@surflane/ui'

<List.Root aria-label='Registered environments'>
  <List.Item>
    <List.Content>
      <List.Title>DEMO main</List.Title>
      <List.Description>3 discovered services</List.Description>
    </List.Content>
    <List.Actions>
      <Button variant='outline'>Inspect DEMO main</Button>
    </List.Actions>
  </List.Item>
</List.Root>

주요 API

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

관련 토큰