docs(VSheet): add images, improve content and examples

vuetifyjs · May 28, 2023 · 5235bea · 5235bea
1 parent e7b7326
commit 5235bea
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 9 deletions.
diff --git a/packages/docs/src/examples/v-sheet/misc-congratulations.vue b/packages/docs/src/examples/v-sheet/misc-congratulations.vue
@@ -1,6 +1,6 @@
 <template>
   <v-sheet
-    class="d-flex align-center justify-center flex-wrap text-center mx-auto"
+    class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4"
     elevation="4"
     height="250"
     rounded

diff --git a/packages/docs/src/examples/v-sheet/misc-referral-program.vue b/packages/docs/src/examples/v-sheet/misc-referral-program.vue
@@ -6,11 +6,11 @@
   >
     <v-container fluid>
       <v-row>
-        <v-col cols="3">
-          <v-img src="https://vuetifyjs.b-cdn.net/docs/images/graphics/img-placeholder.png" height="88" cover></v-img>
+        <v-col cols="12" md="3">
+          <v-img src="https://cdn.vuetifyjs.com/docs/images/graphics/img-placeholder.png" height="88" cover></v-img>
         </v-col>
 
-        <v-col cols="9">
+        <v-col cols="12" md="9">
           <p class="mb-4">
             This is part of our <a href="#">Most Comprehenseive Guide to Referral Programs</a> > <a href="#">Do I Need A Referral Program?</a> section. You may enjoy other related articles:
           </p>
@@ -37,7 +37,13 @@
             rounded="0"
             variant="flat"
           >
-            Explore our 38+ Referral Program Resources
+            <span class="hidden-sm-and-down">
+              Explore our 38+ Referral Program Resources
+            </span>
+
+            <span class="hidden-md-and-up">
+              Explore Referral Resources
+            </span>
           </v-btn>
         </v-col>
       </v-row>

diff --git a/packages/docs/src/examples/v-sheet/prop-elevation.vue b/packages/docs/src/examples/v-sheet/prop-elevation.vue
@@ -26,7 +26,7 @@
 <script>
   export default {
     data: () => ({
-      elevations: [6, 12, 18],
+      elevations: [0, 4, 8, 12, 16, 20],
     }),
   }
 </script>
diff --git a/packages/docs/src/examples/v-sheet/usage.vue b/packages/docs/src/examples/v-sheet/usage.vue
@@ -45,6 +45,13 @@
       <v-checkbox v-model="border" label="Border"></v-checkbox>
 
       <v-checkbox v-model="rounded" label="Rounded"></v-checkbox>
+
+      <v-slider
+        v-model="elevation"
+        label="Elevation"
+        min="0"
+        max="24"
+      ></v-slider>
     </template>
   </usage-example>
 </template>
@@ -67,11 +74,11 @@
   const props = computed(() => {
     return {
       elevation: elevation.value || undefined,
+      height: 200,
+      width: 200,
       border: border.value || undefined,
-      rounded: rounded.value || undefined,
-      height: 250,
-      width: 250,
       color: color.value || undefined,
+      rounded: rounded.value || undefined,
     }
   })
 

diff --git a/packages/docs/src/pages/en/components/sheets.md b/packages/docs/src/pages/en/components/sheets.md
@@ -14,6 +14,8 @@ related:
 
 The `v-sheet` component is a transformable piece of _paper_ that provides a basic foundation for Vuetify features.
 
+![Sheet Entry](https://cdn.vuetifyjs.com/docs/images/components/v-sheet/v-sheet-entry.png)
+
 ----
 
 ## Usage
@@ -32,6 +34,16 @@ The sheet component has support for elevation, rounded corners, color, and more.
 
 <api-inline hide-links />
 
+## Anatomy
+
+The `v-sheet` component contains only a default slot.
+
+![Sheet Anatomy](https://cdn.vuetifyjs.com/docs/images/components/v-sheet/v-sheet-anatomy.png)
+
+| Element / Area | Description |
+| - | - |
+| 1. Container | The main content area |
+
 ## Guide
 
 Often when building out a user interface, you will need to create a container for content and other custom components. The `v-sheet` component is a great way to do this. It provides a baseline for elevation, rounded corners, and color.