Flowbite Vue 3Vue Themable Configuration - Flowbite
You can use this wrapper for styling components with no color prop(like tabs, dropdown etc.)
WARNING
WIP, Do not use it in production
Tabs
Select theme:
- First
- Second
- Third
- Fourth
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?
vue
<template>
<flowbite-themable :theme="theme">
<fwb-tabs :variant="variant">
...
</fwb-tabs>
</flowbite-themable>
</template>
<script setup>
import { FwbTabs, FwbTab, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
const variant = 'default' // see tabs docs
</script><template>
<flowbite-themable :theme="theme">
<fwb-tabs :variant="variant">
...
</fwb-tabs>
</flowbite-themable>
</template>
<script setup>
import { FwbTabs, FwbTab, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
const variant = 'default' // see tabs docs
</script>variant: pills
Select theme:
- First
- Second
- Third
- Fourth
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?
variant: underline
Select theme:
- First
- Second
- Third
- Fourth
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?
Dropdown
Select theme:
vue
<template>
<flowbite-themable :theme="theme">
<fwb-dropdown>
...
</fwb-dropdown>
</flowbite-themable>
</template>
<script setup>
import { FwbDropdown, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script><template>
<flowbite-themable :theme="theme">
<fwb-dropdown>
...
</fwb-dropdown>
</flowbite-themable>
</template>
<script setup>
import { FwbDropdown, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>Button
vue
<template>
<flowbite-themable :theme="theme">
<fwb-button>
...
</fwb-button>
</flowbite-themable>
</template>
<script setup>
import { FwbButton, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script><template>
<flowbite-themable :theme="theme">
<fwb-button>
...
</fwb-button>
</flowbite-themable>
</template>
<script setup>
import { FwbButton, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>