카드 (Card)

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

사용법

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


API

이름
active-class
디폴트
undefined
타입
string

컴포넌트가 활성화(active)되었을때 적용되는 클래스 경고 컴포넌트에 따라 사이드 이펙트가 있을 수 있습니다. 커스텀 클래스를 추가하는 방법은 다음 과 같음 `active-class="default-class your-class"

이름
append
디폴트
false
타입
boolean

Vue 라우터의 router-link prop

이름
color
디폴트
undefined
타입
string

컨트롤에 색상을 지정

이름
dark
디폴트
false
타입
boolean

다크 테마를 적용

이름
disabled
디폴트
false
타입
boolean

라우트 아이템이 비활성화됨(disabled)

이름
exact
디폴트
false
타입
boolean

링크를 정확히 매치. 설정되지 않으면 '/'는 모든 라우트와 매치됨

이름
exact-active-class
디폴트
undefined
타입
string

Vue 라우터의 router-link prop

이름
flat
디폴트
false
타입
boolean

카드 박스의 그림자를 제거

이름
height
디폴트
undefined
타입
number | string

카드의 높이를 설정

이름
hover
디폴트
false
타입
boolean

마우스를 올릴때 (hover) 더 높은 고도/높이(elevation)를 적용

이름
href
디폴트
undefined
타입
string | object

컴포넌트의 태그가 <a>가 됩니다..

이름
img
디폴트
undefined
타입
string

이미지 백그라운드 설정

이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
max-height
디폴트
undefined
타입
number | string

컨탠츠의 최대 높이를 설정

이름
max-width
디폴트
undefined
타입
number | string
이름
nuxt
디폴트
false
타입
boolean

링크를 nuxt-link로 지정

이름
raised
디폴트
false
타입
boolean

기본 고도/높이(elevation) 보다 높게 설정

이름
replace
디폴트
false
타입
boolean

Vue 라우터의 router-link prop

이름
ripple
디폴트
undefined
타입
boolean | object

Applies the v-ripple directive

이름
tag
디폴트
'div'
타입
string

컴포넌트 태그를 커스텀 태그로

이름
target
디폴트
undefined
타입
string

target 어트리뷰트를 설정. 앵커(anchor) 태그의 경우만 작동합니다.

이름
tile
디폴트
false
타입
boolean

카드의 둥근 모서리(border radious) 를 제거하여 타일(tile)로 만듬

이름
to
디폴트
undefined
타입
string | object

컴포넌트 태그가 <router-link>가 됩니다.

이름
width
디폴트
undefined
타입
number | string

The width of the content

예제

미디어와 텍스트 (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)

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