Skip to content

Commit 0a12572

Browse files
SqrczSqrcz
authored
Feature: improved Accordion component flexibility (#351)
* WIP: accordion custom classes * feature: custom classes added to accordion * Accordion documentation updated * fix: prop names fixed in the docs * fix: extra line removed
1 parent 476919b commit 0a12572

19 files changed

+875
-617
lines changed

‎docs/components/accordion.md‎

Lines changed: 213 additions & 174 deletions
Large diffs are not rendered by default.

‎docs/components/accordion/examples/FwbAccordionExample.vue‎

Lines changed: 50 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,60 +2,71 @@
22
<div class="vp-raw">
33
<fwb-accordion>
44
<fwb-accordion-panel>
5-
<fwb-accordion-header>header</fwb-accordion-header>
5+
<fwb-accordion-header>What is Flowbite?</fwb-accordion-header>
66
<fwb-accordion-content>
7-
<div>
8-
<p class="mb-2 text-gray-500 dark:text-gray-400">
9-
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
10-
</p>
11-
<p class="text-gray-500 dark:text-gray-400">
12-
Check out this guide to learn how to <a
13-
class="text-blue-600 hover:underline dark:text-blue-500"
14-
href="/docs/getting-started/introduction/"
15-
>get started</a> and start developing websites
16-
even faster with components on top of Tailwind CSS.
17-
</p>
18-
</div>
7+
<p class="mb-2 text-gray-500 dark:text-gray-400">
8+
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
9+
</p>
10+
<p class="text-gray-500 dark:text-gray-400">
11+
Check out this guide to learn how to <a
12+
href="/docs/getting-started/introduction/"
13+
class="text-blue-600 hover:underline dark:text-blue-500"
14+
>get started</a> and start developing websites even faster with components on top of Tailwind CSS.
15+
</p>
1916
</fwb-accordion-content>
2017
</fwb-accordion-panel>
2118
<fwb-accordion-panel>
22-
<fwb-accordion-header>another header</fwb-accordion-header>
19+
<fwb-accordion-header>Is there a Figma file available?</fwb-accordion-header>
2320
<fwb-accordion-content>
24-
<div>
25-
<p class="mb-2 text-gray-500 dark:text-gray-400">
26-
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.
27-
</p>
28-
<p class="text-gray-500 dark:text-gray-400">
29-
Check out the <a
30-
class="text-blue-600 hover:underline dark:text-blue-500"
31-
href="https://flowbite.com/figma/"
32-
>Figma design system</a> based on the utility classes from Tailwind CSS and
33-
components from Flowbite.
34-
</p>
35-
</div>
21+
<p class="mb-2 text-gray-500 dark:text-gray-400">
22+
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.
23+
</p>
24+
<p class="text-gray-500 dark:text-gray-400">
25+
Check out the <a
26+
href="https://flowbite.com/figma/"
27+
class="text-blue-600 hover:underline dark:text-blue-500"
28+
>Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
29+
</p>
3630
</fwb-accordion-content>
3731
</fwb-accordion-panel>
3832
<fwb-accordion-panel>
39-
<fwb-accordion-header>and one more header</fwb-accordion-header>
33+
<fwb-accordion-header>What are the differences between Flowbite and Tailwind UI?</fwb-accordion-header>
4034
<fwb-accordion-content>
41-
<div>
42-
<p class="mb-2 text-gray-500 dark:text-gray-400">
43-
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.
44-
</p>
45-
<p class="text-gray-500 dark:text-gray-400">
46-
Check out the <a
35+
<p class="mb-2 text-gray-500 dark:text-gray-400">
36+
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
37+
</p>
38+
<p class="mb-2 text-gray-500 dark:text-gray-400">
39+
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
40+
</p>
41+
<p class="mb-2 text-gray-500 dark:text-gray-400">
42+
Learn more about these technologies:
43+
</p>
44+
<ul class="list-disc ps-5 text-gray-500 dark:text-gray-400">
45+
<li>
46+
<a
47+
href="https://flowbite.com/pro/"
48+
class="text-blue-600 hover:underline dark:text-blue-500"
49+
>Flowbite Pro</a>
50+
</li>
51+
<li>
52+
<a
53+
href="https://tailwindui.com/"
54+
rel="nofollow"
4755
class="text-blue-600 hover:underline dark:text-blue-500"
48-
href="https://flowbite.com/figma/"
49-
>Figma design system</a> based on the utility classes from Tailwind CSS and
50-
components from Flowbite.
51-
</p>
52-
</div>
56+
>Tailwind UI</a>
57+
</li>
58+
</ul>
5359
</fwb-accordion-content>
5460
</fwb-accordion-panel>
5561
</fwb-accordion>
5662
</div>
5763
</template>
5864

5965
<script lang="ts" setup>
60-
import { FwbAccordion, FwbAccordionContent, FwbAccordionHeader, FwbAccordionPanel } from '../../../../src/index'
66+
import {
67+
FwbAccordion,
68+
FwbAccordionContent,
69+
FwbAccordionHeader,
70+
FwbAccordionPanel,
71+
} from '../../../../src/index'
6172
</script>

‎docs/components/accordion/examples/FwbAccordionExampleAlwaysOpen.vue‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎docs/components/accordion/examples/FwbAccordionExampleCollapsed.vue‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div class="vp-raw">
3+
<fwb-accordion collapsed>
4+
<fwb-accordion-panel>
5+
<fwb-accordion-header>What is Flowbite?</fwb-accordion-header>
6+
<fwb-accordion-content>
7+
<p class="mb-2 text-gray-500 dark:text-gray-400">
8+
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
9+
</p>
10+
<p class="text-gray-500 dark:text-gray-400">
11+
Check out this guide to learn how to <a
12+
href="/docs/getting-started/introduction/"
13+
class="text-blue-600 hover:underline dark:text-blue-500"
14+
>get started</a> and start developing websites even faster with components on top of Tailwind CSS.
15+
</p>
16+
</fwb-accordion-content>
17+
</fwb-accordion-panel>
18+
<fwb-accordion-panel>
19+
<fwb-accordion-header>Is there a Figma file available?</fwb-accordion-header>
20+
<fwb-accordion-content>
21+
<p class="mb-2 text-gray-500 dark:text-gray-400">
22+
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.
23+
</p>
24+
<p class="text-gray-500 dark:text-gray-400">
25+
Check out the <a
26+
href="https://flowbite.com/figma/"
27+
class="text-blue-600 hover:underline dark:text-blue-500"
28+
>Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
29+
</p>
30+
</fwb-accordion-content>
31+
</fwb-accordion-panel>
32+
<fwb-accordion-panel>
33+
<fwb-accordion-header>What are the differences between Flowbite and Tailwind UI?</fwb-accordion-header>
34+
<fwb-accordion-content>
35+
<p class="mb-2 text-gray-500 dark:text-gray-400">
36+
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
37+
</p>
38+
<p class="mb-2 text-gray-500 dark:text-gray-400">
39+
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
40+
</p>
41+
<p class="mb-2 text-gray-500 dark:text-gray-400">
42+
Learn more about these technologies:
43+
</p>
44+
<ul class="list-disc ps-5 text-gray-500 dark:text-gray-400">
45+
<li>
46+
<a
47+
href="https://flowbite.com/pro/"
48+
class="text-blue-600 hover:underline dark:text-blue-500"
49+
>Flowbite Pro</a>
50+
</li>
51+
<li>
52+
<a
53+
href="https://tailwindui.com/"
54+
rel="nofollow"
55+
class="text-blue-600 hover:underline dark:text-blue-500"
56+
>Tailwind UI</a>
57+
</li>
58+
</ul>
59+
</fwb-accordion-content>
60+
</fwb-accordion-panel>
61+
</fwb-accordion>
62+
</div>
63+
</template>
64+
65+
<script lang="ts" setup>
66+
import { FwbAccordion, FwbAccordionContent, FwbAccordionHeader, FwbAccordionPanel } from '../../../../src/index'
67+
</script>

‎docs/components/accordion/examples/FwbAccordionExampleFirstItemClosed.vue‎

Lines changed: 0 additions & 61 deletions
This file was deleted.

‎docs/components/accordion/examples/FwbAccordionExampleFlush.vue‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

0 commit comments

Comments
 (0)