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

refactor: refactored classes logic

Browse Source
This commit is contained in:
victor
2022-12-11 23:01:35 +04:00
parent 5c59b6813d
commit e4b31bcfb2
12 changed files with 268 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.vitepress/config.ts
View File

@@ -51,7 +51,7 @@ function getComponents() {
{ text: 'Modal', link: 'components/modal/modal.md' },
{ text: 'Navbar', link: 'components/navbar/navbar.md' },
{ text: '- Accordion', link: 'components/accordion/accordion.md' },
{ text: 'Accordion', link: 'components/accordion/accordion.md' },
{ text: '- Carousel', link: 'components/carousel/carousel.md' },
{ text: '- Footer', link: 'components/footer/footer.md' },
{ text: '- Pagination', link: 'components/pagination/pagination.md' },

244
docs/components/accordion/accordion.md
View File

@@ -18,52 +18,40 @@ Use this example to basic accordion.
```vue
<script setup>
import { Accordion } from 'flowbite'
import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
import AccordionContent from '@/components/Accordion/AccordionContent.vue'
import AccordionPanel from 'flowbite'
import AccordionHeader from 'flowbite'
import AccordionContent from 'flowbite'
</script>
<template>
<Accordion>
<accordion-panel>
<template #header>
<accordion-header>header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</accordion-content>
</template>
<accordion-header>header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</accordion-content>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>another header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</template>
<accordion-header>another header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>and one more header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</template>
<accordion-header>and one more header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</accordion-panel>
</Accordion>
</template>
@@ -77,52 +65,40 @@ Always open prop to makes accordion able to open multiple elements.
```vue
<script setup>
import { Accordion } from 'flowbite'
import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
import AccordionContent from '@/components/Accordion/AccordionContent.vue'
import AccordionPanel from 'flowbite'
import AccordionHeader from 'flowbite'
import AccordionContent from 'flowbite'
</script>
<template>
<Accordion>
<Accordion always-open>
<accordion-panel>
<template #header>
<accordion-header>header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</accordion-content>
</template>
<accordion-header>header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</accordion-content>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>another header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</template>
<accordion-header>another header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>and one more header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</template>
<accordion-header>and one more header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</accordion-panel>
</Accordion>
</template>
@@ -136,52 +112,40 @@ Flush prop removes side borders, and rounded corners
```vue
<script setup>
import { Accordion } from 'flowbite'
import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
import AccordionContent from '@/components/Accordion/AccordionContent.vue'
import AccordionPanel from 'flowbite'
import AccordionHeader from 'flowbite'
import AccordionContent from 'flowbite'
</script>
<template>
<Accordion flush>
<accordion-panel>
<template #header>
<accordion-header>header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</accordion-content>
</template>
<accordion-header>header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</accordion-content>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>another header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</template>
<accordion-header>another header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>and one more header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</template>
<accordion-header>and one more header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</accordion-panel>
</Accordion>
</template>
@@ -195,52 +159,40 @@ You can style accordion content and headers by passing tailwind classes into the
```vue
<script setup>
import { Accordion } from 'flowbite'
import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
import AccordionContent from '@/components/Accordion/AccordionContent.vue'
import AccordionPanel from 'flowbite'
import AccordionHeader from 'flowbite'
import AccordionContent from 'flowbite'
</script>
<template>
<Accordion flush>
<Accordion >
<accordion-panel>
<template #header>
<accordion-header>header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</accordion-content>
</template>
<accordion-header>header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</accordion-content>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header class="bg-blue-800">another header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</template>
<accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">another header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>and one more header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</template>
<accordion-header>and one more header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</accordion-panel>
</Accordion>
</template>

54
docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
View File

@@ -9,43 +9,31 @@ import AccordionContent from '@/components/Accordion/AccordionContent.vue'
<template>
<Accordion always-open>
<accordion-panel>
<template #header>
<accordion-header>header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</accordion-content>
</template>
<accordion-header>header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</accordion-content>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>another header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</template>
<accordion-header>another header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>and one more header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</template>
<accordion-header>and one more header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</accordion-panel>
</Accordion>
</template>

54
docs/components/accordion/examples/AccordionExample.vue
View File

@@ -9,43 +9,31 @@ import AccordionContent from '@/components/Accordion/AccordionContent.vue'
<template>
<Accordion>
<accordion-panel>
<template #header>
<accordion-header>header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</accordion-content>
</template>
<accordion-header>header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</accordion-content>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>another header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</template>
<accordion-header>another header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>and one more header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</template>
<accordion-header>and one more header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</accordion-panel>
</Accordion>
</template>

54
docs/components/accordion/examples/AccordionFlushExample.vue
View File

@@ -9,43 +9,31 @@ import AccordionContent from '@/components/Accordion/AccordionContent.vue'
<template>
<Accordion flush>
<accordion-panel>
<template #header>
<accordion-header>header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</accordion-content>
</template>
<accordion-header>header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</accordion-content>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>another header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</template>
<accordion-header>another header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>and one more header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</template>
<accordion-header>and one more header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</accordion-panel>
</Accordion>
</template>

56
docs/components/accordion/examples/AccordionStyledHeadersExample.vue
View File

@@ -7,45 +7,33 @@ import AccordionContent from '@/components/Accordion/AccordionContent.vue'
</script>
<template>
<Accordion flush>
<Accordion >
<accordion-panel>
<template #header>
<accordion-header>header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</accordion-content>
</template>
<accordion-header>header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</accordion-content>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header class="bg-blue-800">another header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</template>
<accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">another header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</accordion-panel>
<accordion-panel>
<template #header>
<accordion-header>and one more header</accordion-header>
</template>
<template #content>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</template>
<accordion-header>and one more header</accordion-header>
<accordion-content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</accordion-content>
</accordion-panel>
</Accordion>
</template>