Item
미디어, 본문, 메타데이터와 동작을 하나의 행으로 구성합니다.
- 성숙도
- 후보
- 소스 경로
components/ui/item.tsx- 소스
- 소스
실제 미리보기
lafetch
여러 제품에서 함께 쓰는 typed fetch 유틸리티입니다.
공개
사용할 때
사용 기준
저장소, 문서, 사람처럼 반복되는 개체를 카드 없이 나열할 때 씁니다.
사용하지 않을 때
열 비교가 핵심이면 Table을, 독립된 영역이면 Panel을 씁니다.
변형과 상태
default고정 예시제목, 설명, 메타데이터와 동작의 읽기 순서를 확인합니다.
lafetch
여러 제품에서 함께 쓰는 typed fetch 유틸리티입니다.
공개subtle고정 예시조용한 면이 인접 행 경계보다 강해지지 않는지 확인합니다.
lafetch
여러 제품에서 함께 쓰는 typed fetch 유틸리티입니다.
공개inverse고정 예시Ink 면에서 본문과 보조 문구 대비를 확인합니다.
lafetch
여러 제품에서 함께 쓰는 typed fetch 유틸리티입니다.
공개
접근성
주변 목록에 맞는 article, div, li 요소를 선택하고 제목으로 이름을 연결합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
as | "article" | "div" | "li" | 아니요 | 주변 문서 구조에 맞는 HTML 요소입니다. |
tone | "default" | "subtle" | "inverse" | 아니요 | 행의 표면 대비입니다. |
사용 예시
지원 importimport {
Item,
ItemMedia,
ItemContent,
ItemTitle,
ItemDescription,
ItemActions,
} from "@/components/ui/item"
<Item as="li">
<ItemMedia>LF</ItemMedia>
<ItemContent>
<ItemTitle>lafetch</ItemTitle>
<ItemDescription>Typed fetch utilities.</ItemDescription>
</ItemContent>
<ItemActions>Open</ItemActions>
</Item>