jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: update ready components pages

Browse Source
This commit is contained in:
Alexandr
2022-07-25 14:22:53 +03:00
parent f70aff0165
commit 6117a0ffaf
82 changed files with 100 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/components/accordion/accordion.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import AccordionExample from './examples/AccordionExample.vue'
</script>
# Accordion
```vue
<script setup>
import { Accordion } from 'flowbite-vue'
</script>
<template>
<Accordion></Accordion>
</template>
```
<AccordionExample />

8
docs/components/accordion/examples/AccordionExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Accordion></Accordion>
</div>
</template>
<script setup>
import { Accordion } from '../../../../src/index'
</script>

218
docs/components/alert/alert.md Normal file
View File

@@ -0,0 +1,218 @@
<script setup>
import AlertTypeExample from './examples/AlertTypeExample.vue';
import AlertTitleExample from './examples/AlertTitleExample.vue';
import AlertClosableExample from './examples/AlertClosableExample.vue';
import AlertBorderExample from './examples/AlertBorderExample.vue';
import AlertIconExample from './examples/AlertIconExample.vue';
import AlertInlineExample from './examples/AlertInlineExample.vue';
</script>
# Alert
#### Show contextual information to your users using alert elements based on Tailwind CSS
---
:::tip
Original reference: [https://flowbite.com/docs/components/alert/](https://flowbite.com/docs/components/alert/)
:::
The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.
Flowbite also includes dismissable alerts which can be hidden by the users by clicking on the close icon.
## Prop - type
```typescript
export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark'
defineProps({
type: {
type: String as PropType<AlertType>,
default: 'info',
},
})
```
<AlertTypeExample />
```vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" class="mb-2">Info</Alert>
<Alert type="warning" class="mb-2">Warning</Alert>
<Alert type="danger" class="mb-2">Danger</Alert>
<Alert type="dark" class="mb-2">Dark</Alert>
<Alert type="success">Success</Alert>
</div>
</template>
```
## Prop - title
```typescript
defineProps({
title: {
type: String,
default: '',
},
})
```
<AlertTitleExample />
```vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" title="Some info title" class="mb-2">Info</Alert>
<Alert type="warning" title="Some warning title" class="mb-2">Warning</Alert>
<Alert type="danger" title="Some danger title" class="mb-2">Danger</Alert>
<Alert type="dark" title="Some dark title" class="mb-2">Dark</Alert>
<Alert type="success" title="Some success title">Success</Alert>
</div>
</template>
```
## Prop - closable
```typescript
defineProps({
closable: {
type: Boolean,
default: false,
},
})
```
<AlertClosableExample />
```vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" closable class="mb-2">Info</Alert>
<Alert type="warning" closable class="mb-2">Warning</Alert>
<Alert type="danger" closable class="mb-2">Danger</Alert>
<Alert type="dark" closable class="mb-2">Dark</Alert>
<Alert type="success" closable>Success</Alert>
</div>
</template>
```
## Prop - border
```typescript
defineProps({
border: {
type: Boolean,
default: false,
},
})
```
<AlertBorderExample />
```vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" border class="mb-2">Info</Alert>
<Alert type="warning" border class="mb-2">Warning</Alert>
<Alert type="danger" border class="mb-2">Danger</Alert>
<Alert type="dark" border class="mb-2">Dark</Alert>
<Alert type="success" border>Success</Alert>
</div>
</template>
```
## Prop - icon
```typescript
defineProps({
icon: {
type: Boolean,
default: true,
},
})
```
<AlertIconExample />
```vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" :icon="false" class="mb-2">Info</Alert>
<Alert title="WARNING" type="warning" :icon="false" class="mb-2">Warning</Alert>
<Alert type="danger" :icon="false" class="mb-2">Danger</Alert>
<Alert type="dark" :icon="false" class="mb-2">Dark</Alert>
<Alert type="success" :icon="false">Success</Alert>
</div>
</template>
```
## Prop - inline
```typescript
defineProps({
inline: {
type: Boolean,
default: true,
},
})
```
<AlertInlineExample />
```vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" title="Info title" :inline="false" class="mb-2">
Lorem...
</Alert>
<Alert type="warning" title="Warning title" :inline="false" class="mb-2">
Lorem...
</Alert>
<Alert type="danger" title="Danger title" :inline="false" class="mb-2">
Lorem...
</Alert>
<Alert closable type="dark" title="Dark title" :inline="false" class="mb-2">
Lorem...
</Alert>
<Alert type="success" title="Success title" :inline="false">
Lorem...
<template #actions>
<Button size="sm" color="green" class="mr-2">
Buttons everywhere
</Button>
<Button size="sm" outline color="green">
<template #prefix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
</template>
And here
</Button>
</template>
</Alert>
</div>
</template>
```

12
docs/components/alert/examples/AlertBorderExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="vp-raw flex flex-col">
<Alert type="info" border class="mb-2">Info</Alert>
<Alert type="warning" border class="mb-2">Warning</Alert>
<Alert type="danger" border class="mb-2">Danger</Alert>
<Alert type="dark" border class="mb-2">Dark</Alert>
<Alert type="success" border>Success</Alert>
</div>
</template>
<script setup>
import { Alert } from '../../../../src/index'
</script>

12
docs/components/alert/examples/AlertClosableExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="vp-raw flex flex-col">
<Alert type="info" closable class="mb-2">Info</Alert>
<Alert type="warning" closable class="mb-2">Warning</Alert>
<Alert type="danger" closable class="mb-2">Danger</Alert>
<Alert type="dark" closable class="mb-2">Dark</Alert>
<Alert type="success" closable>Success</Alert>
</div>
</template>
<script setup>
import { Alert } from '../../../../src/index'
</script>

12
docs/components/alert/examples/AlertIconExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="vp-raw flex flex-col">
<Alert type="info" :icon="false" class="mb-2">Info</Alert>
<Alert title="WARNING" type="warning" :icon="false" class="mb-2">Warning</Alert>
<Alert type="danger" :icon="false" class="mb-2">Danger</Alert>
<Alert type="dark" :icon="false" class="mb-2">Dark</Alert>
<Alert type="success" :icon="false">Success</Alert>
</div>
</template>
<script setup>
import { Alert } from '../../../../src/index'
</script>

33
docs/components/alert/examples/AlertInlineExample.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="vp-raw flex flex-col">
<Alert type="info" title="Info title" :inline="false" class="mb-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda beatae eaque error est eveniet, facere illo labore libero minima molestiae neque nisi non officia quod sed temporibus unde vitae voluptates.
</Alert>
<Alert type="warning" title="Warning title" :inline="false" class="mb-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur cupiditate dicta dolore dolores hic sequi tenetur, vero! Blanditiis consequatur culpa nisi ratione repellat! Delectus dolore magni nemo placeat qui sequi.
</Alert>
<Alert type="danger" title="Danger title" :inline="false" class="mb-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus accusantium atque cupiditate, dignissimos dolorum, error inventore iste libero minus nihil possimus quasi quia quibusdam quisquam recusandae repellat reprehenderit temporibus.
</Alert>
<Alert closable type="dark" title="Dark title" :inline="false" class="mb-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam dolore et, fuga impedit, iusto nam numquam officiis quas, repellat sapiente sit unde vel? Adipisci delectus dolore eius optio sunt.
</Alert>
<Alert type="success" title="Success title" :inline="false">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias at culpa cupiditate deleniti eos ipsam ipsum, nostrum perspiciatis provident tempore? Aspernatur expedita praesentium voluptatibus. Accusamus explicabo iusto nobis reiciendis temporibus!
<template #actions>
<Button size="sm" color="green" class="mr-2">
Buttons everywhere
</Button>
<Button size="sm" outline color="green">
<template #prefix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
</template>
And here
</Button>
</template>
</Alert>
</div>
</template>
<script setup>
import { Alert, Button } from '../../../../src/index'
</script>

12
docs/components/alert/examples/AlertTitleExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="vp-raw flex flex-col">
<Alert type="info" title="Some info title" class="mb-2">Info</Alert>
<Alert type="warning" title="Some warning title" class="mb-2">Warning</Alert>
<Alert type="danger" title="Some danger title" class="mb-2">Danger</Alert>
<Alert type="dark" title="Some dark title" class="mb-2">Dark</Alert>
<Alert type="success" title="Some success title">Success</Alert>
</div>
</template>
<script setup>
import { Alert } from '../../../../src/index'
</script>

12
docs/components/alert/examples/AlertTypeExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="vp-raw flex flex-col">
<Alert type="info" class="mb-2">Info</Alert>
<Alert type="warning" class="mb-2">Warning</Alert>
<Alert type="danger" class="mb-2">Danger</Alert>
<Alert type="dark" class="mb-2">Dark</Alert>
<Alert type="success">Success</Alert>
</div>
</template>
<script setup>
import { Alert } from '../../../../src/index'
</script>

15
docs/components/avatar/avatar.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import AvatarExample from './examples/AvatarExample.vue'
</script>
# Avatar
```vue
<script setup>
import { Avatar } from 'flowbite-vue'
</script>
<template>
<Avatar></Avatar>
</template>
```
<AvatarExample />

8
docs/components/avatar/examples/AvatarExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Avatar></Avatar>
</div>
</template>
<script setup>
import { Avatar } from '../../../../src/index'
</script>

15
docs/components/badge/badge.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import BadgeExample from './examples/BadgeExample.vue'
</script>
# Badge
```vue
<script setup>
import { Badge } from 'flowbite-vue'
</script>
<template>
<Badge></Badge>
</template>
```
<BadgeExample />

8
docs/components/badge/examples/BadgeExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Badge></Badge>
</div>
</template>
<script setup>
import { Badge } from '../../../../src/index'
</script>

15
docs/components/breadcrumb/breadcrumb.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import BreadcrumbExample from './examples/BreadcrumbExample.vue'
</script>
# Breadcrumb
```vue
<script setup>
import { Breadcrumb } from 'flowbite-vue'
</script>
<template>
<Breadcrumb></Breadcrumb>
</template>
```
<BreadcrumbExample />

8
docs/components/breadcrumb/examples/BreadcrumbExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Breadcrumb></Breadcrumb>
</div>
</template>
<script setup>
import { Breadcrumb } from '../../../../src/index'
</script>

438
docs/components/button/button.md Normal file
View File

@@ -0,0 +1,438 @@
<script setup>
import ButtonColorExample from './examples/ButtonColorExample.vue';
import ButtonSizeExample from './examples/ButtonSizeExample.vue';
import ButtonPillExample from './examples/ButtonPillExample.vue';
import ButtonGradientMonochromeExample from './examples/ButtonGradientMonochromeExample.vue';
import ButtonGradientDuotoneExample from './examples/ButtonGradientDuotoneExample.vue';
import ButtonOutlineColorExample from './examples/ButtonOutlineColorExample.vue';
import ButtonPrefixExample from './examples/ButtonPrefixExample.vue';
import ButtonSuffixExample from './examples/ButtonSuffixExample.vue';
import ButtonOutlineGradientExample from './examples/ButtonOutlineGradientExample.vue';
import ButtonGradientShadowExample from './examples/ButtonGradientShadowExample.vue';
import ButtonIconExample from './examples/ButtonIconExample.vue';
import ButtonSquareExample from './examples/ButtonSquareExample.vue';
import ButtonDisabledExample from './examples/ButtonDisabledExample.vue';
import ButtonLoadingExample from './examples/ButtonLoadingExample.vue';
</script>
# Button
#### Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows
---
:::tip
Original reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/docs/components/buttons/)
:::
The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.
Flowbite provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more.
## Prop - color
```typescript
type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
defineProps({
color: {
type: String as PropType<ButtonVariant>,
default: 'default',
},
})
```
<ButtonColorExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button color="default">Default</Button>
<Button color="alternative">Alternative</Button>
<Button color="dark">Dark</Button>
<Button color="light">Light</Button>
<Button color="green">Green</Button>
<Button color="red">Red</Button>
<Button color="yellow">Yellow</Button>
<Button color="purple">Purple</Button>
</template>
```
## Prop - size
```typescript
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
defineProps({
size: {
type: String as PropType<ButtonSize>,
default: 'md',
},
})
```
<ButtonSizeExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button size="xs">XS</Button>
<Button size="sm">SM</Button>
<Button size="md">MD</Button>
<Button size="lg">LG</Button>
<Button size="xl">XL</Button>
</template>
```
## Prop - pill
```typescript
defineProps({
pill: {
type: Boolean,
default: false,
},
})
```
<ButtonPillExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button color="default" pill>Default</Button>
<Button color="alternative" pill>Alternative</Button>
<Button color="dark" pill>Dark</Button>
<Button color="light" pill>Light</Button>
<Button color="green" pill>Green</Button>
<Button color="red" pill>Red</Button>
<Button color="yellow" pill>Yellow</Button>
<Button color="purple" pill>Purple</Button>
</template>
```
## Prop - gradient (monochrome)
```typescript
type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
type ButtonDuotoneGradient = 'purple-blue' | 'cyan-blue' | 'green-blue' | 'purple-pink' | 'pink-orange' | 'teal-lime' | 'red-yellow'
type ButtonGradient = ButtonDuotoneGradient | ButtonMonochromeGradient
defineProps({
gradient: {
type: [String, null] as PropType<ButtonGradient | null>,
default: null,
},
})
```
<ButtonGradientMonochromeExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button gradient="blue">Blue</Button>
<Button gradient="cyan">Cyan</Button>
<Button gradient="green">Green</Button>
<Button gradient="lime">Lime</Button>
<Button gradient="pink">Pink</Button>
<Button gradient="purple">Purple</Button>
<Button gradient="red">Red</Button>
<Button gradient="teal">Teal</Button>
</template>
```
## Prop - gradient (duotone)
<ButtonGradientDuotoneExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button gradient="purple-blue">Purple to blue</Button>
<Button gradient="cyan-blue">Cyan to blue</Button>
<Button gradient="green-blue">Green to blue</Button>
<Button gradient="purple-pink">Purple to pink</Button>
<Button gradient="pink-orange">Pink to orange</Button>
<Button gradient="teal-lime">Teal to lime</Button>
<Button gradient="red-yellow">Red to yellow</Button>
</template>
```
## Prop - outline (color)
```typescript
defineProps({
outline: {
type: Boolean,
default: false,
},
})
```
<ButtonOutlineColorExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button gradient="purple-blue">Purple to blue</Button>
<Button gradient="cyan-blue">Cyan to blue</Button>
<Button gradient="green-blue">Green to blue</Button>
<Button gradient="purple-pink">Purple to pink</Button>
<Button gradient="pink-orange">Pink to orange</Button>
<Button gradient="teal-lime">Teal to lime</Button>
<Button gradient="red-yellow">Red to yellow</Button>
</template>
```
## Prop - outline (gradient)
<ButtonOutlineGradientExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button gradient="purple-blue" outline>Purple to blue</Button>
<Button gradient="cyan-blue" outline>Cyan to blue</Button>
<Button gradient="green-blue" outline>Green to blue</Button>
<Button gradient="purple-pink" outline>Purple to pink</Button>
<Button gradient="pink-orange" outline>Pink to orange</Button>
<Button gradient="teal-lime" outline>Teal to lime</Button>
<Button gradient="red-yellow" outline>Red to yellow</Button>
</template>
```
## Prop - shadow
```typescript
type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
defineProps({
shadow: {
type: [String, null] as PropType<ButtonMonochromeGradient | '' | null>,
default: null,
},
})
```
<ButtonGradientShadowExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button gradient="blue" shadow>Blue</Button>
<Button gradient="cyan" shadow>Cyan</Button>
<Button gradient="green" shadow>Green</Button>
<Button gradient="lime" shadow>Lime</Button>
<Button gradient="pink" shadow>Pink</Button>
<Button gradient="purple" shadow>Purple</Button>
<Button gradient="red" shadow>Red</Button>
<Button gradient="teal" shadow>Teal</Button>
</template>
```
## Prop - square
```typescript
defineProps({
square: {
type: Boolean,
default: false,
},
})
```
<ButtonSquareExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button gradient="red-yellow" square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="default" pill square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="dark" outline square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="yellow" pill outline square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
</template>
```
## Prop - loading
```typescript
defineProps({
loading: {
type: Boolean,
default: false,
},
loadingPosition: {
type: String as PropType<'suffix' | 'prefix'>,
default: 'prefix',
},
})
```
<ButtonLoadingExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
const loading = ref(false)
</script>
<template>
<Button gradient="purple-blue" outline :disabled="loading" :loading="loading" @click="loading = !loading" size="xs">
Click me
</Button>
<Button gradient="red-yellow" :loading="loading" @click="loading = !loading" size="sm">
Click me
</Button>
<Button outline color="default" loading-position="suffix" :loading="loading" @click="loading = !loading">
Click me
<template #suffix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</template>
</Button>
<Button gradient="green-blue" :loading="loading" @click="loading = !loading" size="lg">
Click me
</Button>
<Button gradient="pink" :loading="loading" @click="loading = !loading" size="xl">
Click me
</Button>
</template>
```
## Prop - disabled
```typescript
defineProps({
disabled: {
type: Boolean,
default: false,
},
})
```
<ButtonDisabledExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button gradient="red-yellow" square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="default" pill square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="dark" outline square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="yellow" pill outline square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
</template>
```
## Slot - default
<ButtonIconExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button gradient="purple-blue" square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="default" pill square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button gradient="green-blue" square>
Close something
</Button>
<Button color="default" pill outline square>
Open something
<template #suffix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</template>
</Button>
</template>
```
## Slot - prefix
<ButtonPrefixExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button color="default">
<template #prefix>
<svg class="w-5 h-5 mr-2 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
</template>
Buy
</Button>
</template>
```
## Slot - suffix
<ButtonSuffixExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button color="default">
Choose plan
<template #suffix>
<svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</template>
</Button>
</template>
```

16
docs/components/button/examples/ButtonColorExample.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button color="default">Default</Button>
<Button color="alternative">Alternative</Button>
<Button color="dark">Dark</Button>
<Button color="light">Light</Button>
<Button color="green">Green</Button>
<Button color="red">Red</Button>
<Button color="yellow">Yellow</Button>
<Button color="purple">Purple</Button>
<Button color="pink">Pink</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

12
docs/components/button/examples/ButtonDisabledExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button color="default" disabled>Default</Button>
<Button color="default" outline disabled>Default outline</Button>
<Button gradient="red" disabled>Red gradient</Button>
<Button gradient="red-yellow" disabled>Red to yellow gradient</Button>
<Button gradient="red-yellow" outline disabled>Red to yellow outline</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

14
docs/components/button/examples/ButtonGradientDuotoneExample.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button gradient="purple-blue">Purple to blue</Button>
<Button gradient="cyan-blue">Cyan to blue</Button>
<Button gradient="green-blue">Green to blue</Button>
<Button gradient="purple-pink">Purple to pink</Button>
<Button gradient="pink-orange">Pink to orange</Button>
<Button gradient="teal-lime">Teal to lime</Button>
<Button gradient="red-yellow">Red to yellow</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

15
docs/components/button/examples/ButtonGradientMonochromeExample.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button gradient="blue">Blue</Button>
<Button gradient="cyan">Cyan</Button>
<Button gradient="green">Green</Button>
<Button gradient="lime">Lime</Button>
<Button gradient="pink">Pink</Button>
<Button gradient="purple">Purple</Button>
<Button gradient="red">Red</Button>
<Button gradient="teal">Teal</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

18
docs/components/button/examples/ButtonGradientShadowExample.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button gradient="blue" shadow>Blue with blue</Button>
<Button gradient="cyan" shadow>Cyan with cyan</Button>
<Button gradient="green" shadow>Green with green</Button>
<Button gradient="lime" shadow>Lime with lime</Button>
<Button gradient="pink" shadow>Pink with pink</Button>
<Button gradient="purple" shadow>Purple with purple</Button>
<Button gradient="red" shadow>Red with red</Button>
<Button gradient="teal" shadow>Teal with teal</Button>
<Button gradient="blue" shadow="red">Blue with red</Button>
<Button gradient="cyan" shadow="teal">Cyan with teal</Button>
<Button gradient="teal" shadow="purple">Teal with purple</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

22
docs/components/button/examples/ButtonIconExample.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button gradient="purple-blue" square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="default" pill square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button gradient="green-blue" square>
Close something
</Button>
<Button color="default" pill outline square>
Open something
<template #suffix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</template>
</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

32
docs/components/button/examples/ButtonLoadingExample.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<div class="vp-raw inline-flex items-center gap-2 flex-wrap">
<Button gradient="purple-blue" outline :disabled="loading" :loading="loading" @click="loading = !loading" size="xs">
Click me
</Button>
<Button gradient="red-yellow" :loading="loading" @click="loading = !loading" size="sm">
Click me
</Button>
<Button outline color="default" loading-position="suffix" :loading="loading" @click="loading = !loading">
Click me
<template #suffix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</template>
</Button>
<Button gradient="green-blue" :loading="loading" @click="loading = !loading" size="lg">
Click me
</Button>
<Button gradient="pink" :loading="loading" @click="loading = !loading" size="xl">
Click me
</Button>
</div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import {Button} from '../../../../src/index'
const loading = ref(false)
</script>

13
docs/components/button/examples/ButtonOutlineColorExample.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button color="default" outline>Default</Button>
<Button color="dark" outline>Dark</Button>
<Button color="green" outline>Green</Button>
<Button color="red" outline>Red</Button>
<Button color="yellow" outline>Yellow</Button>
<Button color="purple" outline>Purple</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

14
docs/components/button/examples/ButtonOutlineGradientExample.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button gradient="purple-blue" outline>Purple to blue</Button>
<Button gradient="cyan-blue" outline>Cyan to blue</Button>
<Button gradient="green-blue" outline>Green to blue</Button>
<Button gradient="purple-pink" outline>Purple to pink</Button>
<Button gradient="pink-orange" outline>Pink to orange</Button>
<Button gradient="teal-lime" outline>Teal to lime</Button>
<Button gradient="red-yellow" outline>Red to yellow</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

15
docs/components/button/examples/ButtonPillExample.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button color="default" pill>Default</Button>
<Button color="alternative" pill>Alternative</Button>
<Button color="dark" pill>Dark</Button>
<Button color="light" pill>Light</Button>
<Button color="green" pill>Green</Button>
<Button color="red" pill>Red</Button>
<Button color="yellow" pill>Yellow</Button>
<Button color="purple" pill>Purple</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

13
docs/components/button/examples/ButtonPrefixExample.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button color="default">
<template #prefix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
</template>
Buy
</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

12
docs/components/button/examples/ButtonSizeExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="vp-raw inline-flex items-center gap-2 flex-wrap">
<Button size="xs">Extra small - xs</Button>
<Button size="sm">Small - sm</Button>
<Button size="md">Medium - md</Button>
<Button size="lg">Large - lg</Button>
<Button size="xl">Extra Large - xl</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

19
docs/components/button/examples/ButtonSquareExample.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button gradient="red-yellow" square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="default" pill square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="dark" outline square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="yellow" pill outline square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

13
docs/components/button/examples/ButtonSuffixExample.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button color="default">
Choose plan
<template #suffix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</template>
</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

57
docs/components/buttonGroup/buttonGroup.md Normal file
View File

@@ -0,0 +1,57 @@
<script setup>
import ButtonGroupBasicExample from './examples/ButtonGroupBasicExample.vue';
import ButtonGroupIconExample from './examples/ButtonGroupIconExample.vue';
</script>
# Button Group
#### Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line
---
:::tip
Original reference: [https://flowbite.com/docs/components/button-group/](https://flowbite.com/docs/components/button-group/)
:::
The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.
## Basic example
<ButtonGroupBasicExample />
```vue
<script setup>
import { ButtonGroup, Button } from 'flowbite-vue'
</script>
<template>
<button-group>
<Button>hello world</Button>
<Button color="purple">hello world</Button>
<Button color="alternative">hello world</Button>
<Button color="red">hello world</Button>
</button-group>
</template>
```
## Buttons with icons
<ButtonGroupIconExample />
```vue
<script setup>
import { ButtonGroup, Button } from 'flowbite-vue'
</script>
<template>
<button-group>
<Button outline>Button1</Button>
<Button outline>Button2</Button>
<Button outline>Button3</Button>
<Button outline>
hello world
<template #suffix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</template>
</Button>
</button-group>
</template>
```

13
docs/components/buttonGroup/examples/ButtonGroupBasicExample.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div class="vp-raw">
<button-group>
<Button>hello world</Button>
<Button color="purple">hello world</Button>
<Button color="alternative">hello world</Button>
<Button color="red">hello world</Button>
</button-group>
</div>
</template>
<script setup>
import { ButtonGroup, Button } from '../../../../src/index'
</script>

18
docs/components/buttonGroup/examples/ButtonGroupIconExample.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div class="vp-raw">
<button-group>
<Button outline>Button1</Button>
<Button outline>Button2</Button>
<Button outline>Button3</Button>
<Button outline>
hello world
<template #suffix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</template>
</Button>
</button-group>
</div>
</template>
<script setup>
import { ButtonGroup, Button } from '../../../../src/index'
</script>

15
docs/components/card/card.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import CardExample from './examples/CardExample.vue'
</script>
# Card
```vue
<script setup>
import { Card } from 'flowbite-vue'
</script>
<template>
<Card></Card>
</template>
```
<CardExample />

8
docs/components/card/examples/CardExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Card></Card>
</div>
</template>
<script setup>
import { Card } from '../../../../src/index'
</script>

15
docs/components/carousel/carousel.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import CarouselExample from './examples/CarouselExample.vue'
</script>
# Carousel
```vue
<script setup>
import { Carousel } from 'flowbite-vue'
</script>
<template>
<Carousel></Carousel>
</template>
```
<CarouselExample />

8
docs/components/carousel/examples/CarouselExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Carousel></Carousel>
</div>
</template>
<script setup>
import { Carousel } from '../../../../src/index'
</script>

92
docs/components/dropdown/dropdown.md Normal file
View File

@@ -0,0 +1,92 @@
<script setup>
import DropdownPlacementExample from './examples/DropdownPlacementExample.vue';
import DropdownListGroupExample from './examples/DropdownListGroupExample.vue';
</script>
# Dropdown
#### Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements
---
:::tip
Original reference: [https://flowbite.com/docs/components/dropdowns/](https://flowbite.com/docs/components/dropdowns/)
:::
The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element.
## Props - placement
```vue
<script setup>
import { Dropdown } from 'flowbite-vue'
</script>
<template>
<dropdown placement="bottom" text="Bottom">
Any content here
</dropdown>
<dropdown placement="top">
<template #trigger="{ toggle }">
<Button @click="toggle">
Top
<template #suffix>
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</template>
</Button>
</template>
<div class="p-2">
Padding content
</div>
</dropdown>
<dropdown placement="right" text="Right">
<Spinner size="6" class="m-4" />
</dropdown>
<dropdown placement="left" text="Left">
hello world
</dropdown>
</template>
```
<DropdownPlacementExample />
## List Group
```vue
<script setup>
import { Dropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
</script>
<template>
<dropdown text="Bottom">
<list-group>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
</template>
Profile
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
</template>
Settings
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
</template>
Messages
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
</template>
Download
</list-group-item>
</list-group>
</dropdown>
</template>
```
<DropdownListGroupExample />

35
docs/components/dropdown/examples/DropdownListGroupExample.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<dropdown text="Bottom">
<list-group>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
</template>
Profile
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
</template>
Settings
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
</template>
Messages
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
</template>
Download
</list-group-item>
</list-group>
</dropdown>
</div>
</template>
<script setup>
import { Dropdown, Button, ListGroup, ListGroupItem } from '../../../../src/index'
</script>

27
docs/components/dropdown/examples/DropdownPlacementExample.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<dropdown placement="bottom" text="Bottom">
Any content here
</dropdown>
<dropdown placement="top">
<template #trigger="{ toggle }">
<Button @click="toggle">
Top
<template #suffix>
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</template>
</Button>
</template>
content
</dropdown>
<dropdown placement="right" text="Right">
<Spinner size="6" class="m-4" />
</dropdown>
<dropdown placement="left" text="Left">
hello world
</dropdown>
</div>
</template>
<script setup>
import { Dropdown, Spinner, Button } from '../../../../src/index'
</script>

25
docs/components/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<div>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<flowbite-themable :key="theme" v-for="theme in themes" :theme="theme">
<Button>
{{ theme }}
</Button>
</flowbite-themable>
</div>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import { FlowbiteThemable, Button } from '../../../../../src/index'
import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
const themes: FlowbiteTheme[] = ['blue', 'green', 'red', 'pink', 'purple']
defineProps({
theme: {
type: String as PropType<FlowbiteTheme>,
default: 'blue',
},
})
</script>

29
docs/components/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<div>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<flowbite-themable :theme="theme">
<dropdown text="Text 1">
Content 1
</dropdown>
<dropdown text="Text 2">
Content 2
</dropdown>
<dropdown text="Text 3">
Content 3
</dropdown>
</flowbite-themable>
</div>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import { FlowbiteThemable, Dropdown } from '../../../../../src/index'
import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
defineProps({
theme: {
type: String as PropType<FlowbiteTheme>,
default: 'blue',
},
})
</script>

34
docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div class="vp-raw">
<flowbite-themable :theme="theme">
<tabs v-model="activeTab" class="p-5">
<tab name="first" title="First">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
</tab>
<tab name="second" title="Second">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
</tab>
<tab name="third" title="Third">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
</tab>
<tab name="fourth" title="Fourth" :disabled="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
</tab>
</tabs>
</flowbite-themable>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import { ref } from 'vue'
import { Tabs, Tab, FlowbiteThemable } from '../../../../../src/index'
import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
const activeTab = ref('first')
defineProps({
theme: {
type: String as PropType<FlowbiteTheme>,
default: 'blue',
},
})
</script>

34
docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div class="vp-raw">
<flowbite-themable :theme="theme">
<tabs variant="pills" v-model="activeTab" class="p-5">
<tab name="first" title="First">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
</tab>
<tab name="second" title="Second">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
</tab>
<tab name="third" title="Third">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
</tab>
<tab name="fourth" title="Fourth" :disabled="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
</tab>
</tabs>
</flowbite-themable>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import { ref } from 'vue'
import { Tabs, Tab, FlowbiteThemable } from '../../../../../src/index'
import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
const activeTab = ref('first')
defineProps({
theme: {
type: String as PropType<FlowbiteTheme>,
default: 'blue',
},
})
</script>

34
docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div class="vp-raw">
<flowbite-themable :theme="theme">
<tabs variant="underline" v-model="activeTab" class="p-5">
<tab name="first" title="First">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
</tab>
<tab name="second" title="Second">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
</tab>
<tab name="third" title="Third">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
</tab>
<tab name="fourth" title="Fourth" :disabled="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
</tab>
</tabs>
</flowbite-themable>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import { ref } from 'vue'
import { Tabs, Tab, FlowbiteThemable } from '../../../../../src/index'
import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
const activeTab = ref('first')
defineProps({
theme: {
type: String as PropType<FlowbiteTheme>,
default: 'blue',
},
})
</script>

108
docs/components/flowbiteThemable/flowbiteThemable.md Normal file
View File

@@ -0,0 +1,108 @@
<script setup>
import FlowbiteThemableTabsPillsExample from './examples/tabs/FlowbiteThemableTabsPillsExample.vue';
import FlowbiteThemableTabsUnderlineExample from './examples/tabs/FlowbiteThemableTabsUnderlineExample.vue';
import FlowbiteThemableTabsDefaultExample from './examples/tabs/FlowbiteThemableTabsDefaultExample.vue';
import FlowbiteThemableDropdownExample from './examples/dropdown/FlowbiteThemableDropdownExample.vue';
import FlowbiteThemableButtonExample from './examples/button/FlowbiteThemableButtonExample.vue';
</script>
# Flowbite Themable
You can use this wrapper for styling components with no color prop(like tabs, dropdown etc.)
## Tabs
```vue
<script setup>
import { Tabs, Tab, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
const variant = 'default' // see tabs docs
</script>
<template>
<flowbite-themable :theme="theme">
<tabs :variant="variant" class="p-5">
...
</tabs>
</flowbite-themable>
</template>
```
### **variant: pills**
---
<FlowbiteThemableTabsPillsExample theme="blue" />
<FlowbiteThemableTabsPillsExample theme="green" />
<FlowbiteThemableTabsPillsExample theme="pink" />
<FlowbiteThemableTabsPillsExample theme="purple" />
<FlowbiteThemableTabsPillsExample theme="red" />
### **variant: underline**
---
<FlowbiteThemableTabsUnderlineExample theme="blue" />
<FlowbiteThemableTabsUnderlineExample theme="green" />
<FlowbiteThemableTabsUnderlineExample theme="pink" />
<FlowbiteThemableTabsUnderlineExample theme="purple" />
<FlowbiteThemableTabsUnderlineExample theme="red" />
### **variant: default**
---
<FlowbiteThemableTabsDefaultExample theme="blue" />
<FlowbiteThemableTabsDefaultExample theme="green" />
<FlowbiteThemableTabsDefaultExample theme="pink" />
<FlowbiteThemableTabsDefaultExample theme="purple" />
<FlowbiteThemableTabsDefaultExample theme="red" />
## Dropdown
```vue
<script setup>
import { Dropdown, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>
<template>
<flowbite-themable :theme="theme">
<dropdown>
...
</dropdown>
</flowbite-themable>
</template>
```
<FlowbiteThemableDropdownExample theme="blue" class="mb-2" />
<FlowbiteThemableDropdownExample theme="green" class="mb-2" />
<FlowbiteThemableDropdownExample theme="pink" class="mb-2" />
<FlowbiteThemableDropdownExample theme="purple" class="mb-2" />
<FlowbiteThemableDropdownExample theme="red" />
## Button
```vue
<script setup>
import { Button, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>
<template>
<flowbite-themable :theme="theme">
<Button>
...
</Button>
</flowbite-themable>
</template>
```
<FlowbiteThemableButtonExample />

8
docs/components/footer/examples/FooterExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Footer></Footer>
</div>
</template>
<script setup>
import { Footer } from '../../../../src/index'
</script>

15
docs/components/footer/footer.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import FooterExample from './examples/FooterExample.vue'
</script>
# Footer
```vue
<script setup>
import { Footer } from 'flowbite-vue'
</script>
<template>
<Footer></Footer>
</template>
```
<FooterExample />

14
docs/components/listGroup/examples/ListGroupExample.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<div class="vp-raw flex flex-col">
<list-group>
<list-group-item :hover="false">Item 1</list-group-item>
<list-group-item :hover="false">Item 2</list-group-item>
<list-group-item :hover="false">Item 3</list-group-item>
<list-group-item :hover="false">Item 4</list-group-item>
<list-group-item :hover="false">Item 5</list-group-item>
</list-group>
</div>
</template>
<script setup>
import { ListGroup, ListGroupItem } from '../../../../src/index'
</script>

14
docs/components/listGroup/examples/ListGroupHoverExample.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<div class="vp-raw flex flex-col">
<list-group>
<list-group-item>Item 1</list-group-item>
<list-group-item>Item 2</list-group-item>
<list-group-item>Item 3</list-group-item>
<list-group-item>Item 4</list-group-item>
<list-group-item>Item 5</list-group-item>
</list-group>
</div>
</template>
<script setup>
import { ListGroup, ListGroupItem } from '../../../../src/index'
</script>

33
docs/components/listGroup/examples/ListGroupHoverIconDisabledExample.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="vp-raw flex flex-col">
<list-group>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
</template>
Profile
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
</template>
Settings
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
</template>
Messages
</list-group-item>
<list-group-item disabled>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
</template>
Download
</list-group-item>
</list-group>
</div>
</template>
<script setup>
import { ListGroup, ListGroupItem } from '../../../../src/index'
</script>

33
docs/components/listGroup/examples/ListGroupHoverIconExample.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="vp-raw flex flex-col">
<list-group>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
</template>
Profile
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
</template>
Settings
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
</template>
Messages
</list-group-item>
<list-group-item>
<template #suffix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
</template>
Download
</list-group-item>
</list-group>
</div>
</template>
<script setup>
import { ListGroup, ListGroupItem } from '../../../../src/index'
</script>

130
docs/components/listGroup/listGroup.md Normal file
View File

@@ -0,0 +1,130 @@
<script setup>
import ListGroupExample from './examples/ListGroupExample.vue'
import ListGroupHoverExample from './examples/ListGroupHoverExample.vue'
import ListGroupHoverIconExample from './examples/ListGroupHoverIconExample.vue'
import ListGroupHoverIconDisabledExample from './examples/ListGroupHoverIconDisabledExample.vue'
</script>
# ListGroup
#### Use the list group component to display a series of items, buttons or links inside a single element
---
:::tip
Original reference: [https://flowbite.com/docs/components/list-group/](https://flowbite.com/docs/components/list-group/)
:::
The list group component can be used to display a series of elements, buttons or links inside a single card component similar to a sidebar.
## No hover
```vue
<script setup>
import { ListGroup, ListGroupItem } from 'flowbite-vue'
</script>
<template>
<list-group>
<list-group-item :hover="false">Item 1</list-group-item>
<list-group-item :hover="false">Item 2</list-group-item>
<list-group-item :hover="false">Item 3</list-group-item>
<list-group-item :hover="false">Item 4</list-group-item>
<list-group-item :hover="false">Item 5</list-group-item>
</list-group>
</template>
```
<ListGroupExample />
## Hover
```vue
<script setup>
import { ListGroup, ListGroupItem } from 'flowbite-vue'
</script>
<template>
<list-group>
<list-group-item>Item 1</list-group-item>
<list-group-item>Item 2</list-group-item>
<list-group-item>Item 3</list-group-item>
<list-group-item>Item 4</list-group-item>
<list-group-item>Item 5</list-group-item>
</list-group>
</template>
```
<ListGroupHoverExample />
## Icon
```vue
<script setup>
import { ListGroup, ListGroupItem } from 'flowbite-vue'
</script>
<template>
<list-group>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
</template>
Profile
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
</template>
Settings
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
</template>
Messages
</list-group-item>
<list-group-item>
<template #suffix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
</template>
Download
</list-group-item>
</list-group>
</template>
```
<ListGroupHoverIconExample />
## Disabled
```vue
<script setup>
import { ListGroup, ListGroupItem } from 'flowbite-vue'
</script>
<template>
<list-group>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
</template>
Profile
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
</template>
Settings
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
</template>
Messages
</list-group-item>
<list-group-item disabled>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
</template>
Download
</list-group-item>
</list-group>
</template>
```
<ListGroupHoverIconDisabledExample />

8
docs/components/modal/examples/ModalExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Modal></Modal>
</div>
</template>
<script setup>
import { Modal } from '../../../../src/index'
</script>

15
docs/components/modal/modal.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import ModalExample from './examples/ModalExample.vue'
</script>
# Modal
```vue
<script setup>
import { Modal } from 'flowbite-vue'
</script>
<template>
<Modal></Modal>
</template>
```
<ModalExample />

8
docs/components/navbar/examples/NavbarExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Navbar></Navbar>
</div>
</template>
<script setup>
import { Navbar } from '../../../../src/index'
</script>

15
docs/components/navbar/navbar.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import NavbarExample from './examples/NavbarExample.vue'
</script>
# Navbar
```vue
<script setup>
import { Navbar } from 'flowbite-vue'
</script>
<template>
<Navbar></Navbar>
</template>
```
<NavbarExample />

8
docs/components/pagination/examples/PaginationExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Pagination></Pagination>
</div>
</template>
<script setup>
import { Pagination } from '../../../../src/index'
</script>

15
docs/components/pagination/pagination.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import PaginationExample from './examples/PaginationExample.vue'
</script>
# Pagination
```vue
<script setup>
import { Pagination } from 'flowbite-vue'
</script>
<template>
<Pagination></Pagination>
</template>
```
<PaginationExample />

8
docs/components/progress/examples/ProgressExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Progress></Progress>
</div>
</template>
<script setup>
import { Progress } from '../../../../src/index'
</script>

15
docs/components/progress/progress.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import ProgressExample from './examples/ProgressExample.vue'
</script>
# Progress
```vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
<Progress></Progress>
</template>
```
<ProgressExample />

8
docs/components/rating/examples/RatingExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Rating></Rating>
</div>
</template>
<script setup>
import { Rating } from '../../../../src/index'
</script>

15
docs/components/rating/rating.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import RatingExample from './examples/RatingExample.vue'
</script>
# Rating
```vue
<script setup>
import { Rating } from 'flowbite-vue'
</script>
<template>
<Rating></Rating>
</template>
```
<RatingExample />

8
docs/components/sidebar/examples/SidebarExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Sidebar></Sidebar>
</div>
</template>
<script setup>
import { Sidebar } from '../../../../src/index'
</script>

15
docs/components/sidebar/sidebar.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import SidebarExample from './examples/SidebarExample.vue'
</script>
# Sidebar
```vue
<script setup>
import { Sidebar } from 'flowbite-vue'
</script>
<template>
<Sidebar></Sidebar>
</template>
```
<SidebarExample />

8
docs/components/spinner/examples/SpinnerBasicExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<spinner />
</div>
</template>
<script setup>
import { Spinner } from '../../../../src/index'
</script>

15
docs/components/spinner/examples/SpinnerColorExample.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<spinner color="blue" size="6" />
<spinner color="pink" size="8" />
<spinner color="gray" size="10" />
<spinner color="green" size="12" />
<spinner color="purple" size="10" />
<spinner color="white" size="8" />
<spinner color="yellow" size="6" />
<spinner color="red" size="4" />
</div>
</template>
<script setup>
import { Spinner } from '../../../../src/index'
</script>

12
docs/components/spinner/examples/SpinnerSizeExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<spinner />
<spinner size="6" />
<spinner size="8" />
<spinner size="10" />
<spinner size="12" />
</div>
</template>
<script setup>
import { Spinner } from '../../../../src/index'
</script>

94
docs/components/spinner/spinner.md Normal file
View File

@@ -0,0 +1,94 @@
<script setup>
import SpinnerBasicExample from './examples/SpinnerBasicExample.vue';
import SpinnerSizeExample from './examples/SpinnerSizeExample.vue';
import SpinnerColorExample from './examples/SpinnerColorExample.vue';
</script>
# Spinner
#### Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG using the utility classes from Tailwind CSS
---
:::tip
Original reference: [https://flowbite.com/docs/components/spinner/](https://flowbite.com/docs/components/spinner/)
:::
The spinner component can be used as a loading indicator which comes in multiple colors, sizes, and styles separately or inside elements such as buttons to improve the user experience whenever data is being fetched from your server.
## Basic example
<SpinnerBasicExample />
```vue
<script setup>
import { Spinner } from 'flowbite-vue'
</script>
<template>
<spinner />
</template>
```
## Prop - size
```typescript
type SpinnerSize = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
defineProps({
size: {
type: String as PropType<SpinnerSize>, // any string for w-${size} and h-${size} tailwind classes
default: '4',
},
})
```
<SpinnerSizeExample />
```vue
<script setup>
import { Spinner } from 'flowbite-vue'
</script>
<template>
<spinner />
<spinner size="6" />
<spinner size="8" />
<spinner size="10" />
<spinner size="12" />
</template>
```
## Prop - color
```typescript
type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white'
defineProps({
color: {
type: String as PropType<SpinnerColor>,
default: 'blue',
},
})
```
<SpinnerColorExample />
```vue
<script setup>
import { Spinner } from 'flowbite-vue'
</script>
<template>
<spinner color="blue" size="6" />
<spinner color="pink" size="8" />
<spinner color="gray" size="10" />
<spinner color="green" size="12" />
<spinner color="purple" size="10" />
<spinner color="white" size="8" />
<spinner color="yellow" size="6" />
<spinner color="red" size="4" />
</template>
```

8
docs/components/table/examples/TableExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Table></Table>
</div>
</template>
<script setup>
import { Table } from '../../../../src/index'
</script>

15
docs/components/table/table.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import TableExample from './examples/TableExample.vue'
</script>
# Table
```vue
<script setup>
import { Table } from 'flowbite-vue'
</script>
<template>
<Table></Table>
</template>
```
<TableExample />

23
docs/components/tabs/examples/TabsDefaultExample.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<div class="vp-raw">
<tabs v-model="activeTab" class="p-5">
<tab name="first" title="First">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, id, nisi? Enim excepturi id minus molestias quaerat qui rem repudiandae sed tempore ullam voluptate, voluptatum. Consequuntur illum possimus tempora totam.
</tab>
<tab name="second" title="Second">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur expedita explicabo facere facilis fugit illo laboriosam minus molestias nulla placeat porro quaerat, quo repellat sapiente similique temporibus voluptate. Nemo!
</tab>
<tab name="third" title="Third">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias assumenda consequatur, dicta eius eos excepturi hic magnam maxime molestias nisi perferendis provident quia. Aliquam consequatur esse ex sit velit.
</tab>
<tab name="fourth" title="Fourth" :disabled="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi deleniti dolores ea eligendi quis, ratione repellat temporibus veniam veritatis voluptates. Distinctio enim eos illo incidunt ipsam provident, quaerat quia vel!
</tab>
</tabs>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from '../../../../src/index'
const activeTab = ref('first')
</script>

23
docs/components/tabs/examples/TabsPillsExample.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<div class="vp-raw">
<tabs variant="pills" v-model="activeTab" class="p-5">
<tab name="first" title="First">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
</tab>
<tab name="second" title="Second">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
</tab>
<tab name="third" title="Third">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
</tab>
<tab name="fourth" title="Fourth" :disabled="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
</tab>
</tabs>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from '../../../../src/index'
const activeTab = ref('first')
</script>

23
docs/components/tabs/examples/TabsUnderlineExample.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<div class="vp-raw">
<tabs variant="underline" v-model="activeTab" class="p-5">
<tab name="first" title="First">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
</tab>
<tab name="second" title="Second">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
</tab>
<tab name="third" title="Third">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
</tab>
<tab name="fourth" title="Fourth" :disabled="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
</tab>
</tabs>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from '../../../../src/index'
const activeTab = ref('first')
</script>

129
docs/components/tabs/tabs.md Normal file
View File

@@ -0,0 +1,129 @@
<script setup>
import TabsDefaultExample from './examples/TabsDefaultExample.vue';
import TabsPillsExample from './examples/TabsPillsExample.vue';
import TabsUnderlineExample from './examples/TabsUnderlineExample.vue';
</script>
# Tabs
#### Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container
---
:::tip
Original reference: [https://flowbite.com/docs/components/tabs/](https://flowbite.com/docs/components/tabs/)
:::
The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite.
## Prop - variant (default)
```typescript
export type TabsVariant = 'default' | 'underline' | 'pills'
defineProps({
variant: {
type: String as PropType<TabsVariant>,
default: 'default',
},
})
```
<TabsDefaultExample />
```vue
<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from 'flowbite-vue'
const activeTab = ref('first')
</script>
<template>
<tabs v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
<tab name="first" title="First">
Lorem...
</tab>
<tab name="second" title="Second">
Lorem...
</tab>
<tab name="third" title="Third">
Lorem...
</tab>
<tab name="fourth" title="Fourth" :disabled="true">
Lorem...
</tab>
</tabs>
</template>
```
## Prop - variant (underline)
<TabsUnderlineExample />
```vue
<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from 'flowbite-vue'
const activeTab = ref('first')
</script>
<template>
<tabs variant="underline" v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
<tab name="first" title="First">
Lorem...
</tab>
<tab name="second" title="Second">
Lorem...
</tab>
<tab name="third" title="Third">
Lorem...
</tab>
<tab name="fourth" title="Fourth" :disabled="true">
Lorem...
</tab>
</tabs>
</template>
```
## Prop - variant (pills)
<TabsPillsExample />
```vue
<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from 'flowbite-vue'
const activeTab = ref('first')
</script>
<template>
<tabs variant="pills" v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
<tab name="first" title="First">
Lorem...
</tab>
<tab name="second" title="Second">
Lorem...
</tab>
<tab name="third" title="Third">
Lorem...
</tab>
<tab name="fourth" title="Fourth" :disabled="true">
Lorem...
</tab>
</tabs>
</template>
```
## Prop - directive
Use this props if you want to control which directive to use for rendering every tab content
```typescript
export type TabsVariant = 'default' | 'underline' | 'pills'
defineProps({
directive: {
type: String as PropType<'if' | 'show'>,
default: 'if',
},
})
```

8
docs/components/timeline/examples/TimelineExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Timeline></Timeline>
</div>
</template>
<script setup>
import { Timeline } from '../../../../src/index'
</script>

15
docs/components/timeline/timeline.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import TimelineExample from './examples/TimelineExample.vue'
</script>
# Timeline
```vue
<script setup>
import { Timeline } from 'flowbite-vue'
</script>
<template>
<Timeline></Timeline>
</template>
```
<TimelineExample />

8
docs/components/toast/examples/ToastExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Toast></Toast>
</div>
</template>
<script setup>
import { Toast } from '../../../../src/index'
</script>

15
docs/components/toast/toast.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import ToastExample from './examples/ToastExample.vue'
</script>
# Toast
```vue
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<Toast></Toast>
</template>
```
<ToastExample />

8
docs/components/tooltip/examples/TooltipExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Tooltip></Tooltip>
</div>
</template>
<script setup>
import { Tooltip } from '../../../../src/index'
</script>

15
docs/components/tooltip/tooltip.md Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import TooltipExample from './examples/TooltipExample.vue'
</script>
# Tooltip
```vue
<script setup>
import { Tooltip } from 'flowbite-vue'
</script>
<template>
<Tooltip></Tooltip>
</template>
```
<TooltipExample />