Bars（栏） - Cards（卡片） - 《Vuetify.js 2.2.26 使用教程》 (2024)

卡片
- 用例
  - 函数组件
- API
- 示例
  - 轮廓卡片
  - 中间值
  - 信息卡片
  - 带文本的媒体
  - 栅格
  - 水平的卡片
  - 自定义操作
  - Twitter 卡片
  - 正在加载的卡片
  - 天气卡片
  - 高级版

v-card 组件是一种多功能组件，可用于从面板到静态图像的任何东西。 card 组件有许多助手组件，以使标记尽可能简单。没有列出选项的组件使用 Vue的 功能组件选项来加快渲染速度，并充当标记糖来简化构建。

用例

卡片有 4 个基本组件：v-card-title, v-card-subtitle, v-card-text 和 v-card-actions。

函数组件

v-card-actions：用于放置卡片的动作的容器，例如 v-btn 或 v-menu。也为按钮应用了 special margin 以使它们与其他卡的内容区域保持一致。
v-card-subtitle：为卡片字幕提供了一个默认的 字体大小 和间距，字体大小可以用 typography classes 覆盖。
v-card-text：主要用于卡片中的 文字内容。对文字进行填充，将其字体大小减少到 .875rem。
v-card-title：为卡片标题提供一个默认的 字体大小 和间距。字体大小可以用 typography classes 覆盖。

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

示例

下面是一些简单到复杂的例子。

轮廓卡片

outlined 卡片的海拔为0，并且包含边框。

template

<template>
 <v-card
 class="mx-auto"
 max-width="344"
 outlined
 >
 <v-list-item three-line>
 <v-list-item-content>
 <div class="overline mb-4">OVERLINE</div>
 <v-list-item-title class="headline mb-1">Headline 5</v-list-item-title>
 <v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
 </v-list-item-content>
 <v-list-item-avatar
 tile
 size="80"
 color="grey"
 ></v-list-item-avatar>
 </v-list-item>
 <v-card-actions>
 <v-btn text>Button</v-btn>
 <v-btn text>Button</v-btn>
 </v-card-actions>
 </v-card>
</template>

中间值

v-card 组件对于包装内容非常有用。

template

<template>
 <v-card class="d-inline-block mx-auto">
 <v-container>
 <v-row justify="space-between">
 <v-col cols="auto">
 <v-img
 height="200"
 width="200"
 src="https://cdn.vuetifyjs.com/images/cards/store.jpg"
 ></v-img>
 </v-col>
 <v-col
 cols="auto"
 class="text-center pl-0"
 >
 <v-row
 class="flex-column ma-0 fill-height"
 justify="center"
 >
 <v-col class="px-0">
 <v-btn icon>
 <v-icon>mdi-heart</v-icon>
 </v-btn>
 </v-col>
 <v-col class="px-0">
 <v-btn icon>
 <v-icon>mdi-bookmark</v-icon>
 </v-btn>
 </v-col>
 <v-col class="px-0">
 <v-btn icon>
 <v-icon>mdi-share-variant</v-icon>
 </v-btn>
 </v-col>
 </v-row>
 </v-col>
 </v-row>
 </v-container>
 </v-card>
</template>

信息卡片

卡片是更详细信息的入口点。为简洁起见，请确保限制用户可以执行的操作数量。

template

<template>
 <v-card
 class="mx-auto"
 max-width="344"
 >
 <v-card-text>
 <div>Word of the Day</div>
 <p class="display-1 text--primary">
 be•nev•o•lent
 </p>
 <p>adjective</p>
 <div class="text--primary">
 well meaning and kindly.<br>
 "a benevolent smile"
 </div>
 </v-card-text>
 <v-card-actions>
 <v-btn
 text
 color="deep-purple accent-4"
 >
 Learn More
 </v-btn>
 </v-card-actions>
 </v-card>
</template>

带文本的媒体

使用布局系统，我们可以在背景中的任何地方添加自定义文本。

template

<template>
 <v-card
 class="mx-auto"
 max-width="400"
 >
 <v-img
 class="white--text align-end"
 height="200px"
 src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
 >
 <v-card-title>Top 10 Australian beaches</v-card-title>
 </v-img>
 <v-card-subtitle class="pb-0">Number 10</v-card-subtitle>
 <v-card-text class="text--primary">
 <div>Whitehaven Beach</div>
 <div>Whitsunday Island, Whitsunday Islands</div>
 </v-card-text>
 <v-card-actions>
 <v-btn
 color="orange"
 text
 >
 Share
 </v-btn>
 <v-btn
 color="orange"
 text
 >
 Explore
 </v-btn>
 </v-card-actions>
 </v-card>
</template>

栅格

使用栅格，您可以创建美丽的布局。

template script

<template>
 <v-card
 class="mx-auto"
 max-width="500"
 >
 <v-system-bar
 color="indigo darken-2"
 dark
 >
 <v-spacer></v-spacer>
 <v-icon>mdi-window-minimize</v-icon>
 <v-icon>mdi-window-maximize</v-icon>
 <v-icon>mdi-close</v-icon>
 </v-system-bar>
 <v-toolbar
 color="indigo"
 dark
 >
 <v-app-bar-nav-icon></v-app-bar-nav-icon>
 <v-toolbar-title>Discover</v-toolbar-title>
 <v-spacer></v-spacer>
 <v-btn icon>
 <v-icon>mdi-magnify</v-icon>
 </v-btn>
 </v-toolbar>
 <v-container fluid>
 <v-row dense>
 <v-col
 v-for="card in cards"
 :key="card.title"
 :cols="card.flex"
 >
 <v-card>
 <v-img
 :src="card.src"
 class="white--text align-end"
 gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
 height="200px"
 >
 <v-card-title v-text="card.title"></v-card-title>
 </v-img>
 <v-card-actions>
 <v-spacer></v-spacer>
 <v-btn icon>
 <v-icon>mdi-heart</v-icon>
 </v-btn>
 <v-btn icon>
 <v-icon>mdi-bookmark</v-icon>
 </v-btn>
 <v-btn icon>
 <v-icon>mdi-share-variant</v-icon>
 </v-btn>
 </v-card-actions>
 </v-card>
 </v-col>
 </v-row>
 </v-container>
 </v-card>
</template>

<script>
 export default {
 data: () => ({
 cards: [
 { title: 'Pre-fab homes', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', flex: 12 },
 { title: 'Favorite road trips', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', flex: 6 },
 { title: 'Best airlines', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', flex: 6 },
 ],
 }),
 }
</script>

水平的卡片

使用v-flex，您可以创建自定义的水平卡片。使用contain属性来缩小v-card-media以适应容器内部，而不是覆盖。

template script

<template>
 <v-card
 max-width="400"
 class="mx-auto"
 >
 <v-system-bar
 color="pink darken-2"
 dark
 >
 <v-spacer></v-spacer>
 <v-icon>mdi-window-minimize</v-icon>
 <v-icon>mdi-window-maximize</v-icon>
 <v-icon>mdi-close</v-icon>
 </v-system-bar>
 <v-app-bar
 dark
 color="pink"
 >
 <v-app-bar-nav-icon></v-app-bar-nav-icon>
 <v-toolbar-title>My Music</v-toolbar-title>
 <v-spacer></v-spacer>
 <v-btn icon>
 <v-icon>mdi-magnify</v-icon>
 </v-btn>
 </v-app-bar>
 <v-container>
 <v-row dense>
 <v-col cols="12">
 <v-card
 color="#385F73"
 dark
 >
 <v-card-title class="headline">Unlimited music now</v-card-title>
 <v-card-subtitle>Listen to your favorite artists and albums whenever and wherever, online and offline.</v-card-subtitle>
 <v-card-actions>
 <v-btn text>Listen Now</v-btn>
 </v-card-actions>
 </v-card>
 </v-col>
 <v-col
 v-for="(item, i) in items"
 :key="i"
 cols="12"
 >
 <v-card
 :color="item.color"
 dark
 >
 <div class="d-flex flex-no-wrap justify-space-between">
 <div>
 <v-card-title
 class="headline"
 v-text="item.title"
 ></v-card-title>
 <v-card-subtitle v-text="item.artist"></v-card-subtitle>
 </div>
 <v-avatar
 class="ma-3"
 size="125"
 tile
 >
 <v-img :src="item.src"></v-img>
 </v-avatar>
 </div>
 </v-card>
 </v-col>
 </v-row>
 </v-container>
 </v-card>
</template>

<script>
 export default {
 data: () => ({
 items: [
 {
 color: '#1F7087',
 src: 'https://cdn.vuetifyjs.com/images/cards/foster.jpg',
 title: 'Supermodel',
 artist: 'Foster the People',
 },
 {
 color: '#952175',
 src: 'https://cdn.vuetifyjs.com/images/cards/halcyon.png',
 title: 'Halcyon Days',
 artist: 'Ellie Goulding',
 },
 ],
 }),
 }
</script>

Vue Jobs

ads by Vuetify

](https://vuejobs.com/?ref=vuetifyjs.com&ref=vuetify)

自定义操作

使用简单的条件，您可以轻松添加隐藏的补充文本，直到被打开。

template script

<template>
 <v-card
 class="mx-auto"
 max-width="344"
 >
 <v-img
 src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
 height="200px"
 ></v-img>
 <v-card-title>
 Top western road trips
 </v-card-title>
 <v-card-subtitle>
 1,000 miles of wonder
 </v-card-subtitle>
 <v-card-actions>
 <v-btn text>Share</v-btn>
 <v-btn
 color="purple"
 text
 >
 Explore
 </v-btn>
 <v-spacer></v-spacer>
 <v-btn
 icon
 @click="show = !show"
 >
 <v-icon>{{ show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
 </v-btn>
 </v-card-actions>
 <v-expand-transition>
 <div v-show="show">
 <v-divider></v-divider>
 <v-card-text>
 I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Then we'll go with that data file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got to find a way to escape.
 </v-card-text>
 </div>
 </v-expand-transition>
 </v-card>
</template>

<script>
 export default {
 data: () => ({
 show: false,
 }),
 }
</script>

Twitter 卡片

v-card 组件有多个子组件帮助您建立复杂的示例，而不必担心间隔。此示例由 v-card-title、v-card-text 和 v-card-actions 组件组成。

template script

<template>
 <v-card
 class="mx-auto"
 color="#26c6da"
 dark
 max-width="400"
 >
 <v-card-title>
 <v-icon
 large
 left
 >
 mdi-twitter
 </v-icon>
 <span class="title font-weight-light">Twitter</span>
 </v-card-title>
 <v-card-text class="headline font-weight-bold">
 "Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as well."
 </v-card-text>
 <v-card-actions>
 <v-list-item class="grow">
 <v-list-item-avatar color="grey darken-3">
 <v-img
 class="elevation-6"
 src="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
 ></v-img>
 </v-list-item-avatar>
 <v-list-item-content>
 <v-list-item-title>Evan You</v-list-item-title>
 </v-list-item-content>
 <v-row
 align="center"
 justify="end"
 >
 <v-icon class="mr-1">mdi-heart</v-icon>
 <span class="subheading mr-2">256</span>
 <span class="mr-1">·</span>
 <v-icon class="mr-1">mdi-share-variant</v-icon>
 <span class="subheading">45</span>
 </v-row>
 </v-list-item>
 </v-card-actions>
 </v-card>
</template>

<script>
 export default {
 data: () => ({
 //
 }),
 }
</script>

正在加载的卡片

在处理用户动作时，可以将卡片设置为加载状态。这将禁用进一步的操作，并提供具有不确定的 v-progress-linear 的可视反馈。

template script

<template>
 <v-card
 :loading="loading"
 class="mx-auto my-12"
 max-width="374"
 >
 <v-img
 height="250"
 src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
 ></v-img>
 <v-card-title>Cafe Badilico</v-card-title>
 <v-card-text>
 <v-row
 align="center"
 class="mx-0"
 >
 <v-rating
 :value="4.5"
 color="amber"
 dense
 half-increments
 readonly
 size="14"
 ></v-rating>
 <div class="grey--text ml-4">4.5 (413)</div>
 </v-row>
 <div class="my-4 subtitle-1">
 $ • Italian, Cafe
 </div>
 <div>Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating.</div>
 </v-card-text>
 <v-divider class="mx-4"></v-divider>
 <v-card-title>Tonight's availability</v-card-title>
 <v-card-text>
 <v-chip-group
 v-model="selection"
 active-class="deep-purple accent-4 white--text"
 column
 >
 <v-chip>5:30PM</v-chip>
 <v-chip>7:30PM</v-chip>
 <v-chip>8:00PM</v-chip>
 <v-chip>9:00PM</v-chip>
 </v-chip-group>
 </v-card-text>
 <v-card-actions>
 <v-btn
 color="deep-purple lighten-2"
 text
 @click="reserve"
 >
 Reserve
 </v-btn>
 </v-card-actions>
 </v-card>
</template>

<script>
 export default {
 data: () => ({
 loading: false,
 selection: 1,
 }),
 methods: {
 reserve () {
 this.loading = true
 setTimeout(() => (this.loading = false), 2000)
 },
 },
 }
</script>

天气卡片

通过使用 v-list-items 和 v-slider，我们可以创建独特的天气卡片。列表组件确保我们具有一致的间距和功能，而滑块组件允许我们向用户提供有用的选择界面。

template script

<template>
 <v-card
 class="mx-auto"
 max-width="400"
 >
 <v-list-item two-line>
 <v-list-item-content>
 <v-list-item-title class="headline">San Francisco</v-list-item-title>
 <v-list-item-subtitle>Mon, 12:30 PM, Mostly sunny</v-list-item-subtitle>
 </v-list-item-content>
 </v-list-item>
 <v-card-text>
 <v-row align="center">
 <v-col class="display-3" cols="6">
 23&deg;C
 </v-col>
 <v-col cols="6">
 <v-img
 src="https://cdn.vuetifyjs.com/images/cards/sun.png"
 alt="Sunny image"
 width="92"
 ></v-img>
 </v-col>
 </v-row>
 </v-card-text>
 <v-list-item>
 <v-list-item-icon>
 <v-icon>mdi-send</v-icon>
 </v-list-item-icon>
 <v-list-item-subtitle>23 km/h</v-list-item-subtitle>
 </v-list-item>
 <v-list-item>
 <v-list-item-icon>
 <v-icon>mdi-cloud-download</v-icon>
 </v-list-item-icon>
 <v-list-item-subtitle>48%</v-list-item-subtitle>
 </v-list-item>
 <v-slider
 v-model="time"
 :max="6"
 :tick-labels="labels"
 class="mx-4"
 ticks
 ></v-slider>
 <v-list class="transparent">
 <v-list-item
 v-for="item in forecast"
 :key="item.day"
 >
 <v-list-item-title>{{ item.day }}</v-list-item-title>
 <v-list-item-icon>
 <v-icon>{{ item.icon }}</v-icon>
 </v-list-item-icon>
 <v-list-item-subtitle class="text-right">
 {{ item.temp }}
 </v-list-item-subtitle>
 </v-list-item>
 </v-list>
 <v-divider></v-divider>
 <v-card-actions>
 <v-btn text>Full Report</v-btn>
 </v-card-actions>
 </v-card>
</template>

<script>
 export default {
 data () {
 return {
 labels: ['SU', 'MO', 'TU', 'WED', 'TH', 'FR', 'SA'],
 time: 0,
 forecast: [
 { day: 'Tuesday', icon: 'mdi-white-balance-sunny', temp: '24\xB0/12\xB0' },
 { day: 'Wednesday', icon: 'mdi-white-balance-sunny', temp: '22\xB0/14\xB0' },
 { day: 'Thursday', icon: 'mdi-cloud', temp: '25\xB0/15\xB0' },
 ],
 }
 },
 }
</script>

高级版

使用 v-list-item 和 v-img 允许我们在高级设置中创建唯一的卡片布局

template

<template>
 <v-card
 max-width="344"
 class="mx-auto"
 >
 <v-list-item>
 <v-list-item-avatar color="grey"></v-list-item-avatar>
 <v-list-item-content>
 <v-list-item-title class="headline">Our Changing Planet</v-list-item-title>
 <v-list-item-subtitle>by Kurt Wagner</v-list-item-subtitle>
 </v-list-item-content>
 </v-list-item>
 <v-img
 src="https://cdn.vuetifyjs.com/images/cards/mountain.jpg"
 height="194"
 ></v-img>
 <v-card-text>
 Visit ten places on our planet that are undergoing the biggest changes today.
 </v-card-text>
 <v-card-actions>
 <v-btn
 text
 color="deep-purple accent-4"
 >
 Read
 </v-btn>
 <v-btn
 text
 color="deep-purple accent-4"
 >
 Bookmark
 </v-btn>
 <v-spacer></v-spacer>
 <v-btn icon>
 <v-icon>mdi-heart</v-icon>
 </v-btn>
 <v-btn icon>
 <v-icon>mdi-share-variant</v-icon>
 </v-btn>
 </v-card-actions>
 </v-card>
</template>