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

feat: initial dropdown and flowbite themable examples

Browse Source
This commit is contained in:
Alexandr
2022-07-08 21:13:05 +03:00
parent a5ffeffb82
commit 749732dbe7
7 changed files with 114 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
docs/guide/flowbiteThemable/flowbiteThemable.md
View File

@@ -2,6 +2,8 @@
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
@@ -12,12 +14,12 @@ You can use this wrapper for styling components with no color prop(like tabs, dr
```vue
<script setup>
import {Tabs, Tab, FlowbiteThemable} from 'flowbite-vue'
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" theme="blue">
<flowbite-themable :theme="theme">
<tabs :variant="variant" class="p-5">
...
</tabs>
@@ -59,4 +61,48 @@ const variant = 'default' // see tabs docs
<FlowbiteThemableTabsDefaultExample theme="purple" />
<FlowbiteThemableTabsDefaultExample theme="red" />
<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 />