docs(VCard): update examples (#18365)

vuetifyjs · Nov 6, 2023 · 622bfc8 · 622bfc8
1 parent 916471a
commit 622bfc8
Show file tree

Hide file tree

Showing 9 changed files with 202 additions and 3 deletions.
diff --git a/packages/docs/src/examples/v-card/misc-card-reveal.vue b/packages/docs/src/examples/v-card/misc-card-reveal.vue
@@ -10,7 +10,7 @@
       </p>
       <p>adjective</p>
       <div class="text--primary">
-        relating to or dependent on charity; charitable.<br>
+        relating to or dependent on charity; charitable; charitable donations. Pertaining to alms.<br>
         "an eleemosynary educational institution."
       </div>
     </v-card-text>

diff --git a/packages/docs/src/examples/v-card/prop-disabled.vue b/packages/docs/src/examples/v-card/prop-disabled.vue
@@ -0,0 +1,10 @@
+<template>
+  <v-card
+    class="mx-auto my-8"
+    max-width="344"
+    title="Disabled card"
+    subtitle="The card stays disabled"
+    link
+    disabled
+  ></v-card>
+</template>
diff --git a/packages/docs/src/examples/v-card/prop-elevation.vue b/packages/docs/src/examples/v-card/prop-elevation.vue
@@ -0,0 +1,20 @@
+<template>
+  <v-card
+    class="mx-auto my-8"
+    max-width="344"
+    elevation="16"
+  >
+    <v-card-item>
+      <v-card-title>
+        Card title
+      </v-card-title>
+      <v-card-subtitle>
+        Card subtitle secondary text
+      </v-card-subtitle>
+    </v-card-item>
+
+    <v-card-text>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </v-card-text>
+  </v-card>
+</template>
diff --git a/packages/docs/src/examples/v-card/prop-hover.vue b/packages/docs/src/examples/v-card/prop-hover.vue
@@ -0,0 +1,20 @@
+<template>
+  <v-card
+    class="mx-auto"
+    max-width="344"
+    hover
+  >
+    <v-card-item>
+      <v-card-title>
+        Card title
+      </v-card-title>
+      <v-card-subtitle>
+        Card subtitle secondary text
+      </v-card-subtitle>
+    </v-card-item>
+
+    <v-card-text>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </v-card-text>
+  </v-card>
+</template>
diff --git a/packages/docs/src/examples/v-card/prop-href.vue b/packages/docs/src/examples/v-card/prop-href.vue
@@ -0,0 +1,12 @@
+<template>
+  <v-card
+    class="mx-auto my-8"
+    max-width="344"
+    title="Vuetify on GitHub"
+    prepend-icon="mdi-github"
+    append-icon="mdi-open-in-new"
+    href="https://github.com/vuetifyjs/vuetify/"
+    target="_blank"
+    rel="noopener"
+  ></v-card>
+</template>
diff --git a/packages/docs/src/examples/v-card/prop-image.vue b/packages/docs/src/examples/v-card/prop-image.vue
@@ -0,0 +1,10 @@
+<template>
+  <v-card
+    class="mx-auto"
+    max-width="200"
+    height="200"
+    image="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
+    title="Card title"
+    theme="dark"
+  ></v-card>
+</template>
diff --git a/packages/docs/src/examples/v-card/prop-link.vue b/packages/docs/src/examples/v-card/prop-link.vue
@@ -0,0 +1,9 @@
+<template>
+  <v-card
+    class="mx-auto my-8"
+    max-width="344"
+    title="Hover and click me"
+    subtitle="Same looks, no anchor"
+    link
+  ></v-card>
+</template>
diff --git a/packages/docs/src/examples/v-card/slot-prepend-append.vue b/packages/docs/src/examples/v-card/slot-prepend-append.vue
@@ -0,0 +1,70 @@
+<template>
+  <v-row align="center" justify="center">
+    <v-col cols="auto">
+      <v-card
+        class="mx-auto"
+        max-width="344"
+        title="Icons"
+        subtitle="prepend-icon and append-icon"
+        prepend-icon="mdi-account"
+        append-icon="mdi-check"
+      >
+        <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</v-card-text>
+      </v-card>
+    </v-col>
+
+    <v-col cols="auto">
+      <v-card
+        class="mx-auto"
+        max-width="344"
+        title="Icons"
+        subtitle="prepend and append"
+      >
+        <template v-slot:prepend>
+          <v-icon icon="mdi-account" color="primary"></v-icon>
+        </template>
+        <template v-slot:append>
+          <v-icon icon="mdi-check" color="success"></v-icon>
+        </template>
+        <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</v-card-text>
+      </v-card>
+    </v-col>
+
+    <v-col cols="auto">
+      <v-card
+        class="mx-auto"
+        max-width="344"
+        title="Avatars"
+        subtitle="prepend-avatar and append-avatar"
+        prepend-avatar="https://cdn.vuetifyjs.com/images/logos/v-alt.svg"
+        append-avatar="https://cdn.vuetifyjs.com/images/john.jpg"
+      >
+        <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</v-card-text>
+      </v-card>
+    </v-col>
+
+    <v-col cols="auto">
+      <v-card
+        class="mx-auto"
+        max-width="344"
+        title="Avatars"
+        subtitle="prepend and append"
+      >
+        <template v-slot:prepend>
+          <v-avatar color="blue-darken-2">
+            <v-icon icon="mdi-alarm"></v-icon>
+          </v-avatar>
+        </template>
+        <template v-slot:append>
+          <v-avatar size="24">
+            <v-img
+              src="https://cdn.vuetifyjs.com/images/john.png"
+              alt="John"
+            ></v-img>
+          </v-avatar>
+        </template>
+        <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
diff --git a/packages/docs/src/pages/en/components/cards.md b/packages/docs/src/pages/en/components/cards.md
@@ -110,6 +110,54 @@ Cards can be colored by using any of the builtin colors and contextual names usi
 
 <example file="v-card/prop-color" />
 
+#### Elevation
+
+The **elevation** property provides up to 24 levels of shadow depth. By default, cards rest at 2dp.
+
+<example file="v-card/prop-elevation" />
+
+#### Hover
+
+When using the **hover** prop, the cards will increase its elevation when the mouse is hovered over them.
+
+<example file="v-card/prop-hover" />
+
+#### Href
+
+The card becomes an anchor with the **href** prop.
+
+<example file="v-card/prop-href" />
+
+#### Link
+
+Add the **link** prop for the same style without adding an anchor.
+
+<example file="v-card/prop-link" />
+
+#### Disabled
+
+The **disabled** prop can be added in order to prevent a user from interacting with the card.
+
+<example file="v-card/prop-disabled" />
+
+#### Image
+
+Apply a specific background image to the Card.
+
+<example file="v-card/prop-image" />
+
+### Slots
+
+The `v-card` component provides slots that enable you to customize content created by its props or to add additional content.
+
+Slots give you greater control to customize the content of the `v-card` component while still taking advantage of the easy-to-use props.
+
+#### Avatar and icon
+
+You can use the **prepend-avatar**, **append-avatar**, **prepend-icon** and **append-icon** props or the **prepend** and **append** slots to place a [v-icon](/components/icons/) that automatically injects the designated icon.
+
+<example file="v-card/slot-prepend-append" />
+
 ### Misc
 
 #### Card Reveal
@@ -132,13 +180,13 @@ With a simple conditional, you can easily add supplementary text that is hidden
 
 #### Grids
 
-Using grids, you can create beautiful layouts.
+Using [grids](/components/grids/), you can create beautiful layouts.
 
 <example file="v-card/misc-grids" />
 
 #### Horizontal cards
 
-TODO: better description
+You can also play with the card layout using [layout flex](/styles/flex/).
 
 <example file="v-card/misc-horizontal-cards" />