docs(sizing): add missing examples and SASS variables

packages/docs/src/examples/sizing/height.vue

@@ -1,5 +1,11 @@
 <template>
- <div>
- Sizing / Height example
+ <div class="d-flex justify-center align-end ga-2 text-caption pa-4" style="height: 300px;">
+ <div class="d-flex align-end bg-surface-variant pa-2 rounded h-25">.h-25</div>
+
+ <div class="d-flex align-end bg-surface-variant pa-2 rounded h-50">.h-50</div>
+
+ <div class="d-flex align-end bg-surface-variant pa-2 rounded h-75">.h-75</div>
+
+ <div class="d-flex align-end bg-surface-variant pa-2 rounded h-100">.h-100</div>
  </div>
 </template>

packages/docs/src/examples/sizing/width.vue

@@ -1,5 +1,15 @@
 <template>
- <div>
- Sizing / Width example
+ <div class="d-flex flex-column ga-2 text-caption pa-4">
+ <div class="d-flex align-end bg-surface-variant pa-2 rounded w-25">.w-25</div>
+
+ <div class="d-flex align-end bg-surface-variant pa-2 rounded w-33">.w-33</div>
+
+ <div class="d-flex align-end bg-surface-variant pa-2 rounded w-50">.w-50</div>
+
+ <div class="d-flex align-end bg-surface-variant pa-2 rounded w-66">.w-66</div>
+
+ <div class="d-flex align-end bg-surface-variant pa-2 rounded w-75">.w-75</div>
+
+ <div class="d-flex align-end bg-surface-variant pa-2 rounded w-100">.w-100</div>
  </div>
 </template>

packages/docs/src/pages/en/styles/sizing.md

@@ -17,35 +17,109 @@ Sizing utility classes are used to modify the dimensions of an element.
 
 <PageFeatures />
 
+| Class | Description |
+| ------------ |------------------|
+| **h-auto** | height: auto |
+| **h-screen** | height: 100vh |
+| **h-0** | height: 0 |
+| **h-25** | height: 25% |
+| **h-50** | height: 50% |
+| **h-75** | height: 75% |
+| **h-100** | height: 100% |
+| **fill-height** | height: 100% |
+| **height-screen** | height: 100dvh |
+| **w-auto** | width: auto |
+| **w-0** | width: 0 |
+| **w-33** | width: 33% |
+| **w-25** | width: 25% |
+| **w-50** | width: 50% |
+| **w-66** | width: 66% |
+| **w-75** | width: 75% |
+| **w-100** | width: 100% { style="max-height: 420px;" fixed-header } |
+
 <PromotedEntry />
 
-## Height
+## Usage
 
-Specify the `height` property of **block level elements** with a utility class. The following classes are applied using the format `.{prefix}-{size}` ; where _prefix_ is **h** and _size_ is the value.
+The sizing utility classes allow you to quickly style the dimensions of any element. These classes can be used to apply the `height` and `width` properties to an element.
 
-| Class | Description |
-| ------------ |------------------|
-| **h-auto** | `height: auto` |
-| **h-screen** | `height: 100dvh` |
-| **h-0** | `height: 0` |
-| **h-25** | `height: 25%` |
-| **h-50** | `height: 50%` |
-| **h-75** | `height: 75%` |
-| **h-100** | `height: 100%` |
+### Height
+
+Specify the `height` property of **block level elements** with a utility class. The following classes are applied using the format `.{prefix}-{size}` ; where _prefix_ is **h** and _size_ is the value.
 
 <ExamplesExample file="sizing/height" />
 
-## Width
+### Width
 
 Specify the `width` property of **block level elements** with a utility class. The following classes are applied using the format `.{prefix}-{size}` ; where _prefix_ is **w** and _size_ is the value.
 
 | Class | Description |
-| ------------ | --------------- |
-| **w-auto** | `width: auto` |
-| **w-0** | `width: 0` |
-| **w-25** | `width: 25%` |
-| **w-50** | `width: 50%` |
-| **w-75** | `width: 75%` |
-| **w-100** | `width: 100%` |
 
 <ExamplesExample file="sizing/width" />
+
+## SASS Variables
+
+You can also use the following SASS variables to customize the generated height and width classes:
+
+```scss { resource="src/styles/settings.scss" }
+@use 'vuetify/settings' with (
+ $utilities: (
+ "fill-height": (
+ property: height,
+ class: fill,
+ values: (
+ height: 100%
+ )
+ ),
+ "height": (
+ property: height,
+ responsive: true,
+ class: h,
+ values: (
+ auto: auto,
+ screen: 100vh,
+ 0: 0,
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%
+ )
+ ),
+ "height-screen": (
+ property: height,
+ class: h,
+ values: (
+ screen: 100dvh
+ )
+ ),
+ "width": (
+ property: width,
+ responsive: true,
+ class: w,
+ values: (
+ auto: auto,
+ 0: 0,
+ 25: 25%,
+ 33: 33%,
+ 50: 50%,
+ 66: 66%,
+ 75: 75%,
+ 100: 100%
+ )
+ )
+ )
+);
+```
+
+Disable height/width class generation by setting the the fill-height, height, height-screen, and, width variables to **false**.
+
+```scss { resource="src/styles/settings.scss" }
+@use 'vuetify/settings' with (
+ $utilities: (
+ "fill-height": false,
+ "height": false,
+ "height-screen": false,
+ "width": false
+ )
+);
+```