docs(borders): add missing borders page

vuetifyjs · Apr 3, 2024 · dd79276 · dd79276
1 parent 309de63
commit dd79276
Show file tree

Hide file tree

Showing 7 changed files with 345 additions and 0 deletions.
diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
@@ -60,6 +60,7 @@
       {
         "subheader": "utility-classes"
       },
+      "borders",
       "border-radius",
       "content",
       "cursor",

diff --git a/packages/docs/src/examples/border/all.vue b/packages/docs/src/examples/border/all.vue
@@ -0,0 +1,40 @@
+<template>
+  <v-container>
+    <v-row justify="space-around">
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border-thin" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-thin</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border-sm" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-sm</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border-md" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-md</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border-lg" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-lg</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border-xl" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-xl</div>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/border/card.vue b/packages/docs/src/examples/border/card.vue
@@ -0,0 +1,48 @@
+<template>
+  <v-container>
+    <v-card
+      border="opacity-50 sm"
+      class="mx-auto"
+      max-width="360"
+      rounded="xl"
+      variant="text"
+    >
+      <template v-slot:title>
+        <div class="text-caption font-weight-bold">Revenue</div>
+      </template>
+
+      <template v-slot:append>
+        <v-chip
+          border="success sm opacity-100"
+          color="green"
+          size="small"
+          variant="text"
+        >
+          <v-icon icon="mdi-arrow-up" start></v-icon> 13%
+        </v-chip>
+      </template>
+
+      <template v-slot:text>
+        <div class="text-h4 font-weight-black">$ 9,232,215</div>
+
+        <small class="text-caption text-medium-emphasis d-flex justify-space-between align-center">
+          <div>
+            <span class="text-green">
+              <v-avatar icon="mdi-arrow-up" size="small" variant="tonal"></v-avatar>
+              + $ 3,295
+            </span>
+
+            in the last week
+          </div>
+
+          <v-btn
+            icon="mdi-arrow-right"
+            size="x-small"
+            variant="text"
+            border
+          ></v-btn>
+        </small>
+      </template>
+    </v-card>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/border/colors.vue b/packages/docs/src/examples/border/colors.vue
@@ -0,0 +1,40 @@
+<template>
+  <v-container>
+    <v-row justify="space-around">
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-sheet border="primary thin" class="mx-auto" height="64" width="64" rounded></v-sheet>
+          <div class="text-caption">"primary thin"</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-sheet border="success sm" height="64" width="64" rounded></v-sheet>
+          <div class="text-caption">"sucess sm"</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-sheet border="info md" height="64" width="64" rounded></v-sheet>
+          <div class="text-caption">"info md"</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-sheet border="warning lg" height="64" width="64" rounded></v-sheet>
+          <div class="text-caption">"warning lg"</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-sheet border="error xl" height="64" width="64" rounded></v-sheet>
+          <div class="text-caption">"error xl"</div>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/border/sides.vue b/packages/docs/src/examples/border/sides.vue
@@ -0,0 +1,33 @@
+<template>
+  <v-container>
+    <v-row justify="space-around">
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border border-t-lg" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-t-lg</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border border-e-lg" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-e-lg</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border border-b-lg" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-b-lg</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border border-s-lg" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-s-lg</div>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/border/styles.vue b/packages/docs/src/examples/border/styles.vue
@@ -0,0 +1,33 @@
+<template>
+  <v-container>
+    <v-row justify="space-around">
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-btn text="Button A" variant="text" border></v-btn>
+          <div class="text-caption">border</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-btn border="dashed thin" text="Button A" variant="text"></v-btn>
+          <div class="text-caption">border-dashed</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-btn border="dotted thin" text="Button A" variant="text"></v-btn>
+          <div class="text-caption">border-dotted</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-btn border="double lg" text="Button A" variant="text"></v-btn>
+          <div class="text-caption">border-double</div>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/pages/en/styles/borders.md b/packages/docs/src/pages/en/styles/borders.md
@@ -0,0 +1,150 @@
+---
+emphasized: true
+meta:
+  title: Borders
+  description: Use border utilities to quickly style the border of any element.
+  keywords: border classes, border utilities, vuetify border helper classes
+related:
+  - /styles/border-radius/
+  - /styles/display/
+  - /styles/content/
+features:
+  report: true
+---
+
+# Borders
+
+Utilities for controlling the border of elements in your application.
+
+<PageFeatures />
+
+| Class | Properties |
+| - | - |
+| **border** | border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)); |
+| **border-thin** | border-width: thin; |
+| **border-sm** | border-width: 1px; |
+| **border-md** | border-width: 2px; |
+| **border-lg** | border-width: 4px; |
+| **border-xl** | border-width: 8px; |
+| **border-0** | border-width: 0; |
+| **border-t** | border-top-width: thin; |
+| **border-t-0** | border-top-width: 0; |
+| **border-t-thin** | border-top-width: thin; |
+| **border-t-sm** | border-top-width: 1px; |
+| **border-t-md** | border-top-width: 2px; |
+| **border-t-lg** | border-top-width: 4px; |
+| **border-t-xl** | border-top-width: 8px; |
+| **border-e** | border-inline-end-width: thin; |
+| **border-e-0** | border-inline-end-width: 0; |
+| **border-e-thin** | border-inline-end-width: thin; |
+| **border-e-sm** | border-inline-end-width: 1px; |
+| **border-e-md** | border-inline-end-width: 2px; |
+| **border-e-lg** | border-inline-end-width: 4px; |
+| **border-e-xl** | border-inline-end-width: 8px; |
+| **border-b** | border-bottom-width: thin; |
+| **border-b-0** | border-bottom-width: 0; |
+| **border-b-thin** | border-bottom-width: thin; |
+| **border-b-sm** | border-bottom-width: 1px; |
+| **border-b-md** | border-bottom-width: 2px; |
+| **border-b-lg** | border-bottom-width: 4px; |
+| **border-b-xl** | border-bottom-width: 8px; |
+| **border-s** | border-inline-start-width: thin; |
+| **border-s-0** | border-inline-start-width: 0; |
+| **border-s-thin** | border-inline-start-width: thin; |
+| **border-s-sm** | border-inline-start-width: 1px; |
+| **border-s-md** | border-inline-start-width: 2px; |
+| **border-s-lg** | border-inline-start-width: 4px; |
+| **border-s-xl** | border-inline-start-width: 8px; |
+| **border-opacity-0** | --v-border-opacity: 0; |
+| **border-opacity** | --v-border-opacity: .12; |
+| **border-opacity-25** | --v-border-opacity: .25; |
+| **border-opacity-50** | --v-border-opacity: .5; |
+| **border-opacity-75** | --v-border-opacity: .75; |
+| **border-opacity-100** | --v-border-opacity: 1; |
+| **border-dashed** | border-style: dashed; |
+| **border-dotted** | border-style: dotted; |
+| **border-double** | border-style: double; |
+| **border-solid** | border-style: solid; { style="max-height: 420px;" fixed-header } |
+
+<PromotedEntry />
+
+## Usage
+
+The `border` utilities allow you to quickly style the border of any element.
+
+### All sides
+
+Use the **border**, **border-0**, **border-sm**, **border-md**, **border-lg**, and **border-xl** classes to set the border width of an element.
+
+<ExamplesExample file="border/all" />
+
+### Individual sides
+
+Use the **border-\***, **border-\*-0**, **border-\*-sm**, **border-\*-md**, **border-\*-lg**, and **border-\*-xl** classes to set the border width of an element on a specific side.
+
+<ExamplesExample file="border/sides" />
+
+### Border styles
+
+Use the **border-dashed**, **border-dotted**, **border-double**, and **border-solid** classes to set the border style of an element.
+
+<ExamplesExample file="border/styles" />
+
+### Theme colors
+
+Components that support the **border** property can take advantage of all border utility classes. This includes colors generated by your theme.
+
+<ExamplesExample file="border/colors" />
+
+| Class | Properties |
+| - | - |
+| **border-primary** | --v-border-color: var(--v-theme-primary); |
+| **border-secondary** | --v-border-color: var(--v-theme-secondary); |
+| **border-accent** | --v-border-color: var(--v-theme-accent); |
+| **border-error** | --v-border-color: var(--v-theme-error); |
+| **border-info** | --v-border-color: var(--v-theme-info); |
+| **border-success** | --v-border-color: var(--v-theme-success); |
+| **border-warning** | --v-border-color: var(--v-theme-warning); |
+| **border-surface** | --v-border-color: var(--v-theme-surface); |
+| **border-background** | --v-border-color: var(--v-theme-background); |
+| **border-surface-light** | --v-border-color: var(--v-theme-surface-light); |
+| **border-surface-variant** | --v-border-color: var(--v-theme-surface-variant); |
+| **border-surface-bright** | --v-border-color: var(--v-theme-surface-bright); { style="max-height: 420px;" fixed-header } |
+
+### Components
+
+::: info
+
+When using the **border** property on components, omit the `border-` prefix. For example, use `border="sm"` instead of `border="border-sm"`.
+
+:::
+
+Setting the **border** property to true applies a component specific border class, such as `v-card--border`. This is to ensure that basic border usage persists even if the utility classes are disabled.
+
+<ExamplesExample file="border/card" />
+
+### SASS variables
+
+You can also use the following SASS variables to customize the border color and width:
+
+```sass { resource="src/styles/settings.scss" }
+@use 'vuetify/settings' with (
+  $borders: (
+    0: 0,
+    null: thin,
+    thin: thin,
+    sm: 1px,
+    md: 2px,
+    lg: 4px,
+    xl: 8px
+  )
+);
+```
+
+Disable border class generation by setting the $borders variable to **false**.
+
+```sass { resource="src/styles/settings.scss" }
+@use 'vuetify/settings' with (
+  $borders: false
+);
+```