diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index e4b2f02..364e368 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -22,6 +22,7 @@ function getComponents() { { text: 'Badge', link: '/components/badge/badge' }, { text: 'Button', link: '/components/button/button' }, { text: 'Card', link: '/components/card/card' }, + { text: 'Divider', link: '/components/divider/divider' }, ]; } diff --git a/docs/components/divider/divider.md b/docs/components/divider/divider.md new file mode 100644 index 0000000..99adada --- /dev/null +++ b/docs/components/divider/divider.md @@ -0,0 +1,85 @@ + + +# bo-divider + +A divider is a thin line that groups content in a list or separates sections. + + + +## Basic usage + +The component to use is called `bo-divider`. + +```vue + +``` + +## Props + +| Prop name | Type | Default value | +| ---------------- | ------------------ | -------------------------- | +| `id` | `string` | `undefined` | +| `variant` | `BoDividerVariant` | `BoDividerVariant.primary` | +| `color-hex` | `string` | `undefined` | +| `tailwind-color` | `string` | `undefined` | + +## Variants + +To change the style of the divider, you can use the `variant` prop. + +The available values for the `variant` prop are: + +- `default` +- `dotted` +- `dashed` + +
+ + + +
+ +```vue + +``` + +## Colors + +There are two ways to change the color of the divider. + +- By using the `color-hex` prop +- By using the `tailwind-color` prop + +### Color by hex + +To change the color of the divider, you can use the `color-hex` prop. + +
+ + + +
+ +```vue + + + +``` + +### Color by tailwind + +To change the color of the divider, you can also use the `tailwind-color` prop. This accepts any valid border color from the [Tailwind CSS documentation](https://tailwindcss.com/docs/border-color). + +
+ + + +
+ +```vue + + + +``` diff --git a/src/components/bo_card/BoCard.vue b/src/components/bo_card/BoCard.vue index 2a1be94..8e415a5 100644 --- a/src/components/bo_card/BoCard.vue +++ b/src/components/bo_card/BoCard.vue @@ -1,7 +1,7 @@