카드 (Card)

v-card 컴포넌트는 패널부터 스태틱 이미지까지 어떤 것에든 쓸 수 있는 다재다능한 컴포넌트입니다. card 컴포넌트엔 쉬운 마크업(markup)을 도와주는 여러 헬퍼 컴포넌트가 있습니다. 나열된 옵션 이 없는 컴포넌트들은 더 빠른 렌더링을 위해 Vue의 펑셔널 컴포넌트(functional component) 옵션을 사용하고 쉽게 만들기 위한 마크업 슈거로 작동합니다.

사용법

카드는 4가지 기본 컴포넌트를 가지고 있습니다. v-card-media, v-card-title, v-card-text and v-card-actions.

API

props
slots
v-card

예제

미디어와 텍스트 (Media with text)

레이아웃 시스템을 이용해 커스텀 텍스트를 백그라운드 위의 어느 곳에든 넣을 수 있습니다.

수평 카드(Horizontal cards)

v-flex를 이용해 커스텀 수평 카드를 만들 수 있습니다. v-card-media가 컨테이너를 덮지 않고 딱 맞게 들어갈 수 있도록 contain 속성(property)를 사용해서 크기를 줄이세요(shrink).

그리드 (Grids)

그리드 리스트(grid lists)를 사용하면 아름다운 레이아웃을 만들 수 있습니다.Using grid lists, you can create beautiful layouts.

커스텀 액션 (Custom Actions)

간단한 조건과 함께 열릴때 까지 보이지 않는 추가 텍스트를 쉽게 넣을 수 있습니다.