리소스 목록

미리보기

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

사용법

• 리소스 목록으로 한 리소스의 제목, 보조 정보, 상태, 선택, 액션을 한 행에 담으세요. 기존 List 슬롯으로 구성합니다.
• 제목 링크와 행별 액션을 분리하세요.
• Checkbox가 선택 의미를 담습니다. List.Item.selected는 표면 전체에 시각적 강조만 더합니다.
• 기본 패딩은 세로 12px, 가로 16px이며 행 사이 간격은 8px입니다. 긴 식별자는 줄바꿈됩니다.

• li를 가짜 클릭 버튼이나 listbox로 만들지 마세요. 제목 링크와 행별 액션을 사용하세요.
• 제목 링크 안에 Checkbox나 Menu를 중첩하지 마세요. 각각 자체 슬롯에 두세요.
• 결과를 상태 색으로만 전달하지 마세요. 각 상태를 텍스트로 이름 붙이세요.
• 검색으로 숨겨진 선택을 조용히 지우지 마세요. 숨긴 ID를 유지하세요.
• 전체 선택 범위를 모호하게 두지 마세요. 보이는 행만 덮는지 전체 데이터셋을 덮는지 분명히 하세요.
• 프리미티브가 서버 요청, 권한, 페이지 내비게이션, 선택된 ID의 유효성을 처리하리라 기대하지 마세요. 제품이 소유합니다.

구성

FilterBar → result summary + optional visible-selection controls → List.Root(ul) → Item(li) → Checkbox + Content(Title link + Description) + Actions(StatusBadge + Menu)

키보드와 접근성

• Tab은 순서대로 선택 checkbox, 제목 링크, 액션 메뉴를 방문합니다.
• 메뉴는 Base UI의 화살표 키, Enter, Escape를 사용합니다. 메뉴를 닫으면 해당 행의 트리거로 포커스가 돌아갑니다.
• Space는 Checkbox를 토글합니다. 링크는 브라우저의 새 탭 열기와 뒤로 가기 동작을 유지합니다.
• 선택을 지우거나 오류에서 복구하면 남은 검색 입력으로 포커스가 돌아갑니다.
• 로딩, 오류, 제한된 접근, 첫 사용 빈 상태, 검색 결과 없음은 각각 고유 메시지를 가집니다.

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

예시 코드

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

import { List, Checkbox, StatusBadge, Menu } from '@surflane/ui'

<List.Root aria-label='Registered resources'>
  {resources.map((resource) => (
    <List.Item key={resource.id} selected={selected.has(resource.id)}>
      <Checkbox.Root
        aria-label={`Select ${resource.name}`}
        checked={selected.has(resource.id)}
        onCheckedChange={(value) => select(resource.id, value)}
      >
        <Checkbox.Indicator />
      </Checkbox.Root>
      <List.Content>
        <List.Title>
          <a href={resource.href}>{resource.name}</a>
        </List.Title>
        <List.Description>{resource.description}</List.Description>
      </List.Content>
      <List.Actions>
        <StatusBadge tone='success'>Ready</StatusBadge>
        <Menu.Root>
          <Menu.Trigger aria-label={`Actions for ${resource.name}`}>
            Actions
          </Menu.Trigger>
          <Menu.Portal>
            <Menu.Content>
              <Menu.Item onClick={() => inspect(resource.id)}>
                Inspect
              </Menu.Item>
            </Menu.Content>
          </Menu.Portal>
        </Menu.Root>
      </List.Actions>
    </List.Item>
  ))}
</List.Root>

주요 API

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

관련 토큰