v-card 컴포넌트는 패널부터 스태틱 이미지까지 어떤 것에든 쓸 수 있는 다재다능한 컴포넌트입니다. card 컴포넌트엔 쉬운 마크업(markup)을 도와주는 여러 헬퍼 컴포넌트가 있습니다. 나열된 옵션 이 없는 컴포넌트들은 더 빠른 렌더링을 위해 Vue의 펑셔널 컴포넌트(functional component) 옵션을 사용하고 쉽게 만들기 위한 마크업 슈거로 작동합니다.
Functional components
v-card-actions: The container used for placing actions for a card, such as v-btn or v-menu. Also applies special margin to buttons so that they properly line up with other card content areas.v-card-text: Primarily used for text content in a card. Applies padding for text, reduces its font-size to .875rem and changes its color to grey.v-card-title: Provides a default font-size and padding for card titles. Font-size can be overwritten with typography classes, (/styles/typography).
예제
Outlined cards
An outlined card has 0 elevation and contains a soft border.
Intermediate
The v-card component is useful for wrapping content.
Information card
Cards are entry points to more detailed information. To keep things concise, ensure to limit the number of actions the user can take.
Media with text
Using the layout system, we can add custom text anywhere within the background.
그리드 (Grids)
그리드 리스트(grid lists)를 사용하면 아름다운 레이아웃을 만들 수 있습니다.Using grid lists, you can create beautiful layouts.
수평 카드(Horizontal cards)
v-flex를 이용해 커스텀 수평 카드를 만들 수 있습니다. v-card-media가 컨테이너를 덮지 않고 딱 맞게 들어갈 수 있도록 contain 속성(property)를 사용해서 크기를 줄이세요(shrink).
Custom actions
With a simple conditional, you can easily add supplementary text that is hidden until opened.
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.
Loading card
Cards can be set to a loading state when processing a user action. This disables further actions and provides visual feedback with an indeterminate v-progress-linear.
Weather card
Using v-list-items and a v-slider, we are able to create a unique weather card. The list components ensure that we have consistent spacing and functionality while the slider component allows us to provide a useful interface of selection to the user.
Advanced
Using v-list-item and v-img allows us to create unique card layouts in an advanced setting