Skip to content

Feature: improved Accordion component flexibility #351

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 19, 2025
Merged

Feature: improved Accordion component flexibility #351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4e53e06
WIP: accordion custom classes
Sqrcz Feb 1, 2025
7d666db
feature: custom classes added to accordion
Sqrcz Feb 18, 2025
9b4c227
Accordion documentation updated
Sqrcz Feb 19, 2025
8e08f47
fix: prop names fixed in the docs
Sqrcz Feb 19, 2025
126a52b
fix: extra line removed
Sqrcz Feb 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
387 changes: 213 additions & 174 deletions docs/components/accordion.md
View file
Open in desktop

Large diffs are not rendered by default.

89 changes: 50 additions & 39 deletions docs/components/accordion/examples/FwbAccordionExample.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,60 +2,71 @@
<div class="vp-raw">
<fwb-accordion>
<fwb-accordion-panel>
<fwb-accordion-header>header</fwb-accordion-header>
<fwb-accordion-header>What is Flowbite?</fwb-accordion-header>
<fwb-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
class="text-blue-600 hover:underline dark:text-blue-500"
href="/docs/getting-started/introduction/"
>get started</a> and start developing websites
even faster with components on top of Tailwind CSS.
</p>
</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 hover:underline dark:text-blue-500"
>get started</a> and start developing websites even faster with components on top of Tailwind CSS.
</p>
</fwb-accordion-content>
</fwb-accordion-panel>
<fwb-accordion-panel>
<fwb-accordion-header>another header</fwb-accordion-header>
<fwb-accordion-header>Is there a Figma file available?</fwb-accordion-header>
<fwb-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
class="text-blue-600 hover:underline dark:text-blue-500"
href="https://flowbite.com/figma/"
>Figma design system</a> based on the utility classes from Tailwind CSS and
components from Flowbite.
</p>
</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 hover:underline dark:text-blue-500"
>Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
</p>
</fwb-accordion-content>
</fwb-accordion-panel>
<fwb-accordion-panel>
<fwb-accordion-header>and one more header</fwb-accordion-header>
<fwb-accordion-header>What are the differences between Flowbite and Tailwind UI?</fwb-accordion-header>
<fwb-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
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Learn more about these technologies:
</p>
<ul class="list-disc ps-5 text-gray-500 dark:text-gray-400">
<li>
<a
href="https://flowbite.com/pro/"
class="text-blue-600 hover:underline dark:text-blue-500"
>Flowbite Pro</a>
</li>
<li>
<a
href="https://tailwindui.com/"
rel="nofollow"
class="text-blue-600 hover:underline dark:text-blue-500"
href="https://flowbite.com/figma/"
>Figma design system</a> based on the utility classes from Tailwind CSS and
components from Flowbite.
</p>
</div>
>Tailwind UI</a>
</li>
</ul>
</fwb-accordion-content>
</fwb-accordion-panel>
</fwb-accordion>
</div>
</template>

<script lang="ts" setup>
import { FwbAccordion, FwbAccordionContent, FwbAccordionHeader, FwbAccordionPanel } from '../../../../src/index'
import {
FwbAccordion,
FwbAccordionContent,
FwbAccordionHeader,
FwbAccordionPanel,
} from '../../../../src/index'
</script>
58 changes: 0 additions & 58 deletions docs/components/accordion/examples/FwbAccordionExampleAlwaysOpen.vue
View file
Open in desktop

This file was deleted.

67 changes: 67 additions & 0 deletions docs/components/accordion/examples/FwbAccordionExampleCollapsed.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<template>
<div class="vp-raw">
<fwb-accordion collapsed>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix prop inconsistency in the example code.

The example uses collapsed prop in the component (line 3) but shows persistent in the documentation code (line 217).

Apply this diff to fix the documentation code:

-  <fwb-accordion persistent>
+  <fwb-accordion collapsed>

Also applies to: 217-217

<fwb-accordion-panel>
<fwb-accordion-header>What is Flowbite?</fwb-accordion-header>
<fwb-accordion-content>
<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 hover:underline dark:text-blue-500"
>get started</a> and start developing websites even faster with components on top of Tailwind CSS.
</p>
</fwb-accordion-content>
</fwb-accordion-panel>
<fwb-accordion-panel>
<fwb-accordion-header>Is there a Figma file available?</fwb-accordion-header>
<fwb-accordion-content>
<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 hover:underline dark:text-blue-500"
>Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.
</p>
</fwb-accordion-content>
</fwb-accordion-panel>
<fwb-accordion-panel>
<fwb-accordion-header>What are the differences between Flowbite and Tailwind UI?</fwb-accordion-header>
<fwb-accordion-content>
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Learn more about these technologies:
</p>
<ul class="list-disc ps-5 text-gray-500 dark:text-gray-400">
<li>
<a
href="https://flowbite.com/pro/"
class="text-blue-600 hover:underline dark:text-blue-500"
>Flowbite Pro</a>
</li>
<li>
<a
href="https://tailwindui.com/"
rel="nofollow"
class="text-blue-600 hover:underline dark:text-blue-500"
>Tailwind UI</a>
</li>
</ul>
</fwb-accordion-content>
</fwb-accordion-panel>
</fwb-accordion>
</div>
</template>

<script lang="ts" setup>
import { FwbAccordion, FwbAccordionContent, FwbAccordionHeader, FwbAccordionPanel } from '../../../../src/index'
</script>
61 changes: 0 additions & 61 deletions docs/components/accordion/examples/FwbAccordionExampleFirstItemClosed.vue
View file
Open in desktop

This file was deleted.

58 changes: 0 additions & 58 deletions docs/components/accordion/examples/FwbAccordionExampleFlush.vue
View file
Open in desktop

This file was deleted.

Loading
Loading