카드 (Card)
v-card 컴포넌트는 패널부터 스태틱 이미지까지 어떤 것에든 쓸 수 있는 다재다능한 컴포넌트입니다. card 컴포넌트엔 쉬운 마크업(markup)을 도와주는 여러 헬퍼 컴포넌트가 있습니다. 나열된 옵션 이 없는 컴포넌트들은 더 빠른 렌더링을 위해 Vue의 펑셔널 컴포넌트(functional component) 옵션을 사용하고 쉽게 만들기 위한 마크업 슈거로 작동합니다.
v-card-media is deprecated, use v-img instead.
API
컴포넌트가 활성화(active)되었을때 적용되는 클래스 경고 컴포넌트에 따라 사이드 이펙트가 있을 수 있습니다. 커스텀 클래스를 추가하는 방법은 다음 과 같음 `active-class="default-class your-class"
Vue 라우터의 router-link prop
컨트롤에 색상을 지정
다크 테마를 적용
라우트 아이템이 비활성화됨(disabled)
Components.Cards.
링크를 정확히 매치. 설정되지 않으면 '/'는 모든 라우트와 매치됨
Vue 라우터의 router-link prop
카드 박스의 그림자를 제거
카드의 높이를 설정
마우스를 올릴때 (hover) 더 높은 고도/높이(elevation)를 적용
컴포넌트의 태그가 <a>가 됩니다..
이미지 백그라운드 설정
라이트 테마를 적용
컨탠츠의 최대 높이를 설정
Components.Cards.
Components.Cards.
Components.Cards.
링크를 nuxt-link로 지정
기본 고도/높이(elevation) 보다 높게 설정
Vue 라우터의 router-link prop
Applies the v-ripple directive
컴포넌트 태그를 커스텀 태그로
target 어트리뷰트를 설정. 앵커(anchor) 태그의 경우만 작동합니다.
카드의 둥근 모서리(border radious) 를 제거하여 타일(tile)로 만듬
컴포넌트 태그가 <router-link>가 됩니다.
컨텐츠의 폭을 설정
예제
미디어와 텍스트 (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)
간단한 조건과 함께 열릴때 까지 보이지 않는 추가 텍스트를 쉽게 넣을 수 있습니다.
Twitter card
The v-card component has multiple children components that help you build complex examples without having to worry about spacing. This example is comprised of the v-card-title, v-card-text and v-card-actions components.