컴포넌트
Container Query Card
래퍼에 container-type: inline-size를 지정하고 useId로 스코프된 @container 규칙을 주입해, 뷰포트가 아니라 카드 자신의 폭이 임계값을 넘으면 세로 스택에서 가로 스플릿으로 전환합니다. pointer 캡처 드래그와 방향키(Home/End 포함) 양쪽으로 폭을 조절할 수 있는 slider 핸들을 포함합니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ContainerQueryCard-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| title | string | "반응형 카드" | 카드 제목. |
| subtitle | string | "자기 폭 기준으로 레이아웃이 바뀝니다" | 부제/설명 문구. |
| breakpoint | number | 340 | 가로↔세로 레이아웃이 전환되는 컨테이너 폭 임계값(px). |
| initialWidth | number | 260 | 리사이즈 데모 초기 폭(px). |
| className | string | undefined | 추가 CSS 클래스. |