Description list

미리보기

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

사용법

• 리소스의 속성을 용어와 값으로 보여 주세요. 네이티브 dl이라서 스크린 리더는 이름과 값의 쌍으로 읽습니다. Item 하나에 Term 하나와 그 Value를 둡니다.
• inline은 값을 용어 옆, 고유 너비의 용어 열 오른쪽에 두고, 줄이 좁으면 용어 아래로 내립니다. stacked는 모든 값을 용어 아래에 둡니다. columns={2}는 두 열이 들어갈 때 항목을 두 열로 놓습니다.
• 휴대폰에서는 쌍이 자리를 덜 차지합니다. 내용만큼의 폭인 값은 맞으면 용어 옆에 남고, 긴 식별자처럼 맞지 않는 값은 통째로 용어 아래로 내려갑니다.
• 줄 높이는 그 크기의 메뉴 줄과 같고, compact 밀도에서는 작은 줄입니다. 줄 사이에 선은 없습니다. 용어 열과 리듬이 구조를 보여 줍니다.
• 긴 값은 어디서든 줄을 바꿔서 식별자가 레이아웃을 밀어내지 않습니다. truncate는 한 줄로 자르되 값 전체는 글자에, 글자 값이면 title에도 남깁니다. copy는 값 뒤에 복사 동작을 두는데, 줄 여백 안으로 들어가 줄 높이를 지키고, 스크린 리더에 용어 이름을 알립니다.
• 비어 있는 값은 대시나 0이 아니라 흐린 글자로 Not set이라고 적습니다. labels.empty로 바꾸세요.

• 같은 열을 나누는 표 형태의 기록에는 설명 목록 대신 Table을, 핵심 수치에는 Stat을 쓰세요.
• 값에 폼 전체를 넣지 마세요. 값에는 링크, Badge, time 요소를 둘 수 있고, 편집은 폼에서 합니다.
• 전체를 읽거나 비교해야 하는 값을 복사 동작이나 다른 확인 방법 없이 자르지 마세요.

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

구성

Root(dl) → Item(div) → Term(dt) + Value(dd: content, or text + CopyButton)

키보드와 접근성

• 목록은 글자이며 Tab 순서에 없습니다. 값 안의 링크와 복사 동작은 Tab 순서에 있습니다.
• 복사 동작에서 Enter나 Space를 누르면 값을 복사합니다. 결과는 CopyButton처럼 동작 자리에 나타납니다.

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

예시 코드

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

import { DescriptionList } from '@surflane/ui'

<DescriptionList.Root columns={2}>
  <DescriptionList.Item>
    <DescriptionList.Term>Region</DescriptionList.Term>
    <DescriptionList.Value>ap-northeast-2</DescriptionList.Value>
  </DescriptionList.Item>
  <DescriptionList.Item>
    <DescriptionList.Term>Cluster ID</DescriptionList.Term>
    <DescriptionList.Value truncate copy>
      cls-7f3a9c2e41b84d0f9a1e
    </DescriptionList.Value>
  </DescriptionList.Item>
  <DescriptionList.Item>
    <DescriptionList.Term>Description</DescriptionList.Term>
    <DescriptionList.Value>{description}</DescriptionList.Value>
  </DescriptionList.Item>
</DescriptionList.Root>

주요 API

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

관련 토큰