Card
Card (카드)
출처: 문서
본문
Card
카드 컨테이너 안에 정보를 통합해요.
기본 사용법
Card는 제목, 내용, 동작을 포함해요. Card는 header, body, footer로 구성돼요. header와 footer는 선택 사항이며, 내용 분배는 named slot에 따라 달라져요.
심플 카드
header 부분을 생략할 수 있어요.
이미지와 함께
일부 설정을 추가해서 더 풍부한 내용을 표시해요.
body-style 속성은 커스텀 body의 CSS 스타일을 정의해요.
Shadow
카드 그림자를 표시할 시점을 정의할 수 있어요.
shadow 속성은 카드 그림자가 표시되는 시점을 결정해요. always, hover, never가 될 수 있어요.
API
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| header | 카드의 제목. slot#header로 전달된 DOM도 받아요 | string | — |
| footer 2.4.3 | 카드의 footer. slot#footer로 전달된 DOM도 받아요 | string | — |
| body-style | 카드 body의 CSS 스타일 | object | — |
| header-class 2.9.8 | 카드 header의 커스텀 클래스 이름 | string | — |
| body-class 2.3.10 | 카드 body의 커스텀 클래스 이름 | string | — |
| footer-class 2.9.8 | 카드 footer의 커스텀 클래스 이름 | string | — |
| shadow | 카드 그림자를 표시할 시점 | enum | always |
Slots
| Name | Description |
|---|---|
| default | 기본 내용을 커스터마이즈해요 |
| header | Card header의 내용 |
| footer | Card footer의 내용 |