Key-value List
설치 확인속성 이름과 값 목록
1. 목적과 출처
속성 이름과 값 목록
- 출처
- 자체 제작
- 프로젝트
src/components/ui/key-value-list.tsx- Registry
@adcapsule/key-value-list
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| orientation | 모양 |
|---|---|
| 한 줄 horizontal |
|
| 위아래 vertical |
|
3. 속성 바꿔 보기
- 상태
- 진행 중
- 담당자
- 민김민서
- 라벨
- 버그
- 프로젝트
- 웹사이트 리뉴얼
orientation
4. 설치와 사용
- npm 패키지
- class-variance-authority
- 함께 설치
- @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- orientation: horizontal·vertical
- 값에는 아무 요소나(배지, 아바타, 상태)
- 의미상 <dl>·<dt>·<dd>
공통으로 유지할 토큰
- text.secondary (이름)
- text.primary (값)
- font.size.body