卡片

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

用例

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

Cards（卡片） - 图1

函数组件

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

API

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

Cards（卡片） - 图2

示例

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

轮廓卡片

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

template

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="344"
  5.     outlined
  6.   >
  7.     <v-list-item three-line>
  8.       <v-list-item-content>
  9.         <div class="overline mb-4">OVERLINE</div>
  10.         <v-list-item-title class="headline mb-1">Headline 5</v-list-item-title>
  11.         <v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
  12.       </v-list-item-content>
  14.       <v-list-item-avatar
  15.         tile
  16.         size="80"
  17.         color="grey"
  18.       ></v-list-item-avatar>
  19.     </v-list-item>
  21.     <v-card-actions>
  22.       <v-btn text>Button</v-btn>
  23.       <v-btn text>Button</v-btn>
  24.     </v-card-actions>
  25.   </v-card>
  26. </template>

Cards（卡片） - 图3

中间值

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

template

  1. <template>
  2.   <v-card class="d-inline-block mx-auto">
  3.     <v-container>
  4.       <v-row justify="space-between">
  5.         <v-col cols="auto">
  6.           <v-img
  7.             height="200"
  8.             width="200"
  9.             src="https://cdn.vuetifyjs.com/images/cards/store.jpg"
  10.           ></v-img>
  11.         </v-col>
  13.         <v-col
  14.           cols="auto"
  15.           class="text-center pl-0"
  16.         >
  17.           <v-row
  18.             class="flex-column ma-0 fill-height"
  19.             justify="center"
  20.           >
  21.             <v-col class="px-0">
  22.               <v-btn icon>
  23.                 <v-icon>mdi-heart</v-icon>
  24.               </v-btn>
  25.             </v-col>
  27.             <v-col class="px-0">
  28.               <v-btn icon>
  29.                 <v-icon>mdi-bookmark</v-icon>
  30.               </v-btn>
  31.             </v-col>
  33.             <v-col class="px-0">
  34.               <v-btn icon>
  35.                 <v-icon>mdi-share-variant</v-icon>
  36.               </v-btn>
  37.             </v-col>
  38.           </v-row>
  39.         </v-col>
  40.       </v-row>
  41.     </v-container>
  42.   </v-card>
  43. </template>

Cards（卡片） - 图4

信息卡片

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

template

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="344"
  5.   >
  6.     <v-card-text>
  7.       <div>Word of the Day</div>
  8.       <p class="display-1 text--primary">
  9.         be•nev•o•lent
  10.       </p>
  11.       <p>adjective</p>
  12.       <div class="text--primary">
  13.         well meaning and kindly.<br>
  14.         "a benevolent smile"
  15.       </div>
  16.     </v-card-text>
  17.     <v-card-actions>
  18.       <v-btn
  19.         text
  20.         color="deep-purple accent-4"
  21.       >
  22.         Learn More
  23.       </v-btn>
  24.     </v-card-actions>
  25.   </v-card>
  26. </template>

Cards（卡片） - 图5

带文本的媒体

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

template

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="400"
  5.   >
  6.     <v-img
  7.       class="white--text align-end"
  8.       height="200px"
  9.       src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
  10.     >
  11.       <v-card-title>Top 10 Australian beaches</v-card-title>
  12.     </v-img>
  14.     <v-card-subtitle class="pb-0">Number 10</v-card-subtitle>
  16.     <v-card-text class="text--primary">
  17.       <div>Whitehaven Beach</div>
  19.       <div>Whitsunday Island, Whitsunday Islands</div>
  20.     </v-card-text>
  22.     <v-card-actions>
  23.       <v-btn
  24.         color="orange"
  25.         text
  26.       >
  27.         Share
  28.       </v-btn>
  30.       <v-btn
  31.         color="orange"
  32.         text
  33.       >
  34.         Explore
  35.       </v-btn>
  36.     </v-card-actions>
  37.   </v-card>
  38. </template>

Cards（卡片） - 图6

栅格

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

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="500"
  5.   >
  6.     <v-system-bar
  7.       color="indigo darken-2"
  8.       dark
  9.     >
  10.       <v-spacer></v-spacer>
  12.       <v-icon>mdi-window-minimize</v-icon>
  14.       <v-icon>mdi-window-maximize</v-icon>
  16.       <v-icon>mdi-close</v-icon>
  17.     </v-system-bar>
  19.     <v-toolbar
  20.       color="indigo"
  21.       dark
  22.     >
  23.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  25.       <v-toolbar-title>Discover</v-toolbar-title>
  27.       <v-spacer></v-spacer>
  29.       <v-btn icon>
  30.         <v-icon>mdi-magnify</v-icon>
  31.       </v-btn>
  32.     </v-toolbar>
  34.     <v-container fluid>
  35.       <v-row dense>
  36.         <v-col
  37.           v-for="card in cards"
  38.           :key="card.title"
  39.           :cols="card.flex"
  40.         >
  41.           <v-card>
  42.             <v-img
  43.               :src="card.src"
  44.               class="white--text align-end"
  45.               gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
  46.               height="200px"
  47.             >
  48.               <v-card-title v-text="card.title"></v-card-title>
  49.             </v-img>
  51.             <v-card-actions>
  52.               <v-spacer></v-spacer>
  54.               <v-btn icon>
  55.                 <v-icon>mdi-heart</v-icon>
  56.               </v-btn>
  58.               <v-btn icon>
  59.                 <v-icon>mdi-bookmark</v-icon>
  60.               </v-btn>
  62.               <v-btn icon>
  63.                 <v-icon>mdi-share-variant</v-icon>
  64.               </v-btn>
  65.             </v-card-actions>
  66.           </v-card>
  67.         </v-col>
  68.       </v-row>
  69.     </v-container>
  70.   </v-card>
  71. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       cards: [
  5.         { title: 'Pre-fab homes', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', flex: 12 },
  6.         { title: 'Favorite road trips', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', flex: 6 },
  7.         { title: 'Best airlines', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', flex: 6 },
  8.       ],
  9.     }),
  10.   }
  11. </script>

Cards（卡片） - 图7

水平的卡片

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

template script

  1. <template>
  2.   <v-card
  3.     max-width="400"
  4.     class="mx-auto"
  5.   >
  6.     <v-system-bar
  7.       color="pink darken-2"
  8.       dark
  9.     >
  10.       <v-spacer></v-spacer>
  12.       <v-icon>mdi-window-minimize</v-icon>
  14.       <v-icon>mdi-window-maximize</v-icon>
  16.       <v-icon>mdi-close</v-icon>
  17.     </v-system-bar>
  19.     <v-app-bar
  20.       dark
  21.       color="pink"
  22.     >
  23.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  25.       <v-toolbar-title>My Music</v-toolbar-title>
  27.       <v-spacer></v-spacer>
  29.       <v-btn icon>
  30.         <v-icon>mdi-magnify</v-icon>
  31.       </v-btn>
  32.     </v-app-bar>
  34.     <v-container>
  35.       <v-row dense>
  36.         <v-col cols="12">
  37.           <v-card
  38.             color="#385F73"
  39.             dark
  40.           >
  41.             <v-card-title class="headline">Unlimited music now</v-card-title>
  43.             <v-card-subtitle>Listen to your favorite artists and albums whenever and wherever, online and offline.</v-card-subtitle>
  45.             <v-card-actions>
  46.               <v-btn text>Listen Now</v-btn>
  47.             </v-card-actions>
  48.           </v-card>
  49.         </v-col>
  51.         <v-col
  52.           v-for="(item, i) in items"
  53.           :key="i"
  54.           cols="12"
  55.         >
  56.           <v-card
  57.             :color="item.color"
  58.             dark
  59.           >
  60.             <div class="d-flex flex-no-wrap justify-space-between">
  61.               <div>
  62.                 <v-card-title
  63.                   class="headline"
  64.                   v-text="item.title"
  65.                 ></v-card-title>
  67.                 <v-card-subtitle v-text="item.artist"></v-card-subtitle>
  68.               </div>
  70.               <v-avatar
  71.                 class="ma-3"
  72.                 size="125"
  73.                 tile
  74.               >
  75.                 <v-img :src="item.src"></v-img>
  76.               </v-avatar>
  77.             </div>
  78.           </v-card>
  79.         </v-col>
  80.       </v-row>
  81.     </v-container>
  82.   </v-card>
  83. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           color: '#1F7087',
  7.           src: 'https://cdn.vuetifyjs.com/images/cards/foster.jpg',
  8.           title: 'Supermodel',
  9.           artist: 'Foster the People',
  10.         },
  11.         {
  12.           color: '#952175',
  13.           src: 'https://cdn.vuetifyjs.com/images/cards/halcyon.png',
  14.           title: 'Halcyon Days',
  15.           artist: 'Ellie Goulding',
  16.         },
  17.       ],
  18.     }),
  19.   }
  20. </script>

Cards（卡片） - 图8

Vue Jobs

Sign up and post a job or create your personalized developer profile at vuejobs.com.

ads by Vuetify

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

自定义操作

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

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="344"
  5.   >
  6.     <v-img
  7.       src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
  8.       height="200px"
  9.     ></v-img>
  11.     <v-card-title>
  12.       Top western road trips
  13.     </v-card-title>
  15.     <v-card-subtitle>
  16.       1,000 miles of wonder
  17.     </v-card-subtitle>
  19.     <v-card-actions>
  20.       <v-btn text>Share</v-btn>
  22.       <v-btn
  23.         color="purple"
  24.         text
  25.       >
  26.         Explore
  27.       </v-btn>
  29.       <v-spacer></v-spacer>
  31.       <v-btn
  32.         icon
  33.         @click="show = !show"
  34.       >
  35.         <v-icon>{{ show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
  36.       </v-btn>
  37.     </v-card-actions>
  39.     <v-expand-transition>
  40.       <div v-show="show">
  41.         <v-divider></v-divider>
  43.         <v-card-text>
  44.           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.
  45.         </v-card-text>
  46.       </div>
  47.     </v-expand-transition>
  48.   </v-card>
  49. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       show: false,
  5.     }),
  6.   }
  7. </script>

Cards（卡片） - 图9

Twitter 卡片

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

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     color="#26c6da"
  5.     dark
  6.     max-width="400"
  7.   >
  8.     <v-card-title>
  9.       <v-icon
  10.         large
  11.         left
  12.       >
  13.         mdi-twitter
  14.       </v-icon>
  15.       <span class="title font-weight-light">Twitter</span>
  16.     </v-card-title>
  18.     <v-card-text class="headline font-weight-bold">
  19.       "Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as well."
  20.     </v-card-text>
  22.     <v-card-actions>
  23.       <v-list-item class="grow">
  24.         <v-list-item-avatar color="grey darken-3">
  25.           <v-img
  26.             class="elevation-6"
  27.             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"
  28.           ></v-img>
  29.         </v-list-item-avatar>
  31.         <v-list-item-content>
  32.           <v-list-item-title>Evan You</v-list-item-title>
  33.         </v-list-item-content>
  35.         <v-row
  36.           align="center"
  37.           justify="end"
  38.         >
  39.           <v-icon class="mr-1">mdi-heart</v-icon>
  40.           <span class="subheading mr-2">256</span>
  41.           <span class="mr-1">·</span>
  42.           <v-icon class="mr-1">mdi-share-variant</v-icon>
  43.           <span class="subheading">45</span>
  44.         </v-row>
  45.       </v-list-item>
  46.     </v-card-actions>
  47.   </v-card>
  48. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       //
  5.     }),
  6.   }
  7. </script>

Cards（卡片） - 图10

正在加载的卡片

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

template script

  1. <template>
  2.   <v-card
  3.     :loading="loading"
  4.     class="mx-auto my-12"
  5.     max-width="374"
  6.   >
  7.     <v-img
  8.       height="250"
  9.       src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
  10.     ></v-img>
  12.     <v-card-title>Cafe Badilico</v-card-title>
  14.     <v-card-text>
  15.       <v-row
  16.         align="center"
  17.         class="mx-0"
  18.       >
  19.         <v-rating
  20.           :value="4.5"
  21.           color="amber"
  22.           dense
  23.           half-increments
  24.           readonly
  25.           size="14"
  26.         ></v-rating>
  28.         <div class="grey--text ml-4">4.5 (413)</div>
  29.       </v-row>
  31.       <div class="my-4 subtitle-1">
  32.         $ • Italian, Cafe
  33.       </div>
  35.       <div>Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating.</div>
  36.     </v-card-text>
  38.     <v-divider class="mx-4"></v-divider>
  40.     <v-card-title>Tonight's availability</v-card-title>
  42.     <v-card-text>
  43.       <v-chip-group
  44.         v-model="selection"
  45.         active-class="deep-purple accent-4 white--text"
  46.         column
  47.       >
  48.         <v-chip>5:30PM</v-chip>
  50.         <v-chip>7:30PM</v-chip>
  52.         <v-chip>8:00PM</v-chip>
  54.         <v-chip>9:00PM</v-chip>
  55.       </v-chip-group>
  56.     </v-card-text>
  58.     <v-card-actions>
  59.       <v-btn
  60.         color="deep-purple lighten-2"
  61.         text
  62.         @click="reserve"
  63.       >
  64.         Reserve
  65.       </v-btn>
  66.     </v-card-actions>
  67.   </v-card>
  68. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       loading: false,
  5.       selection: 1,
  6.     }),
  8.     methods: {
  9.       reserve () {
  10.         this.loading = true
  12.         setTimeout(() => (this.loading = false), 2000)
  13.       },
  14.     },
  15.   }
  16. </script>

Cards（卡片） - 图11

天气卡片

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

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="400"
  5.   >
  6.     <v-list-item two-line>
  7.       <v-list-item-content>
  8.         <v-list-item-title class="headline">San Francisco</v-list-item-title>
  9.         <v-list-item-subtitle>Mon, 12:30 PM, Mostly sunny</v-list-item-subtitle>
  10.       </v-list-item-content>
  11.     </v-list-item>
  13.     <v-card-text>
  14.       <v-row align="center">
  15.         <v-col class="display-3" cols="6">
  16.           23&deg;C
  17.         </v-col>
  18.         <v-col cols="6">
  19.           <v-img
  20.             src="https://cdn.vuetifyjs.com/images/cards/sun.png"
  21.             alt="Sunny image"
  22.             width="92"
  23.           ></v-img>
  24.         </v-col>
  25.       </v-row>
  26.     </v-card-text>
  28.     <v-list-item>
  29.       <v-list-item-icon>
  30.         <v-icon>mdi-send</v-icon>
  31.       </v-list-item-icon>
  32.       <v-list-item-subtitle>23 km/h</v-list-item-subtitle>
  33.     </v-list-item>
  35.     <v-list-item>
  36.       <v-list-item-icon>
  37.         <v-icon>mdi-cloud-download</v-icon>
  38.       </v-list-item-icon>
  39.       <v-list-item-subtitle>48%</v-list-item-subtitle>
  40.     </v-list-item>
  42.     <v-slider
  43.       v-model="time"
  44.       :max="6"
  45.       :tick-labels="labels"
  46.       class="mx-4"
  47.       ticks
  48.     ></v-slider>
  50.     <v-list class="transparent">
  51.       <v-list-item
  52.         v-for="item in forecast"
  53.         :key="item.day"
  54.       >
  55.         <v-list-item-title>{{ item.day }}</v-list-item-title>
  57.         <v-list-item-icon>
  58.           <v-icon>{{ item.icon }}</v-icon>
  59.         </v-list-item-icon>
  61.         <v-list-item-subtitle class="text-right">
  62.           {{ item.temp }}
  63.         </v-list-item-subtitle>
  64.       </v-list-item>
  65.     </v-list>
  67.     <v-divider></v-divider>
  69.     <v-card-actions>
  70.       <v-btn text>Full Report</v-btn>
  71.     </v-card-actions>
  72.   </v-card>
  73. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         labels: ['SU', 'MO', 'TU', 'WED', 'TH', 'FR', 'SA'],
  6.         time: 0,
  7.         forecast: [
  8.           { day: 'Tuesday', icon: 'mdi-white-balance-sunny', temp: '24\xB0/12\xB0' },
  9.           { day: 'Wednesday', icon: 'mdi-white-balance-sunny', temp: '22\xB0/14\xB0' },
  10.           { day: 'Thursday', icon: 'mdi-cloud', temp: '25\xB0/15\xB0' },
  11.         ],
  12.       }
  13.     },
  14.   }
  15. </script>

Cards（卡片） - 图12

高级版

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

template

  1. <template>
  2.   <v-card
  3.     max-width="344"
  4.     class="mx-auto"
  5.   >
  6.     <v-list-item>
  7.       <v-list-item-avatar color="grey"></v-list-item-avatar>
  8.       <v-list-item-content>
  9.         <v-list-item-title class="headline">Our Changing Planet</v-list-item-title>
  10.         <v-list-item-subtitle>by Kurt Wagner</v-list-item-subtitle>
  11.       </v-list-item-content>
  12.     </v-list-item>
  14.     <v-img
  15.       src="https://cdn.vuetifyjs.com/images/cards/mountain.jpg"
  16.       height="194"
  17.     ></v-img>
  19.     <v-card-text>
  20.       Visit ten places on our planet that are undergoing the biggest changes today.
  21.     </v-card-text>
  23.     <v-card-actions>
  24.       <v-btn
  25.         text
  26.         color="deep-purple accent-4"
  27.       >
  28.         Read
  29.       </v-btn>
  30.       <v-btn
  31.         text
  32.         color="deep-purple accent-4"
  33.       >
  34.         Bookmark
  35.       </v-btn>
  36.       <v-spacer></v-spacer>
  37.       <v-btn icon>
  38.         <v-icon>mdi-heart</v-icon>
  39.       </v-btn>
  40.       <v-btn icon>
  41.         <v-icon>mdi-share-variant</v-icon>
  42.       </v-btn>
  43.     </v-card-actions>
  44.   </v-card>
  45. </template>

Cards（卡片） - 图13