Merge pull request #86 from selemondev/docs/divider

docs(app): #69 divider
selemondev · Aug 8, 2023 · b425c99 · b425c99
2 parents 8fb1aac + f1d6a43
commit b425c99
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 0 deletions.
diff --git a/docs/docs/.vitepress/config.ts b/docs/docs/.vitepress/config.ts
@@ -56,6 +56,7 @@ export default defineConfig({
             { text: 'Badge', link: '/guide/components/badge.md'},
             { text: 'Button', link: '/guide/components/button.md'},
             { text: 'Checkbox', link: '/guide/components/checkbox.md'},
+            { text: 'Divider', link: '/guide/components/divider.md'}
           ]
         }
       ],

diff --git a/docs/docs/components/Divider/dividerBasic.vue b/docs/docs/components/Divider/dividerBasic.vue
@@ -0,0 +1,9 @@
+<template>
+    <div class="grid place-items-center w-full">
+       <div>
+        <p class="dark:text-white">Nuxt.js is a popular open-source framework for building web applications with Vue.js. It simplifies the process of creating server-rendered Vue applications and provides various features to enhance development</p>
+        <WDivider/>
+        <p class="dark:text-white">Next.js is a popular open-source React framework for building web applications</p>
+       </div>
+    </div>
+</template>
diff --git a/docs/docs/components/Divider/dividerVertical.vue b/docs/docs/components/Divider/dividerVertical.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="grid place-items-center w-full">
+        <div class="space-x-2 flex items-center">
+            <span class="dark:text-white">Nuxt.js</span>
+            <WDivider vertical />
+            <span class="dark:text-white">Next.js</span>
+            <WDivider vertical />
+            <span class="dark:text-white">Vue.js</span>
+            <WDivider vertical />
+            <span class="dark:text-white">React.js</span>
+        </div>
+    </div>
+</template>
diff --git a/docs/docs/guide/components/divider.md b/docs/docs/guide/components/divider.md
@@ -0,0 +1,37 @@
+---
+title: Divider
+lang: en-US
+---
+
+# Divider
+
+A Divider is an element used to separate content or sections in a user interface.
+
+## Basic Usage
+
+You can use the `WDivider` component as shown below:
+
+<demo src="../../components/Divider/dividerBasic.vue" />
+
+## Vertical
+
+You can use the `vertical` prop to make the `WDivider` component align vertically as shown below:
+
+<demo src="../../components/Divider/dividerVertical.vue" />
+
+## Preset
+
+```js
+WDivider: {
+    base: {
+      root: 'w-full h-px',
+      dividerVertical: 'relative !w-px !h-4 !inline-block',
+    },
+    variants: {
+      default: {
+        root: 'bg-gray-400 dark:bg-zinc-600',
+      },
+    },
+},
+```
+