Skip to content

Commit 8e08f47

Browse files
SqrczSqrcz
committed
fix: prop names fixed in the docs
1 parent 9b4c227 commit 8e08f47

File tree

3 files changed

+77
-68
lines changed

3 files changed

+77
-68
lines changed

‎docs/components/accordion.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup>
22
import FwbAccordionExample from './accordion/examples/FwbAccordionExample.vue'
33
import FwbAccordionExampleCollapsed from './accordion/examples/FwbAccordionExampleCollapsed.vue'
4-
import FwbAccordionExampleFlush from './accordion/examples/FwbAccordionExampleFlush.vue'
4+
import FwbAccordionExampleFlushed from './accordion/examples/FwbAccordionExampleFlushed.vue'
55
import FwbAccordionExamplePersistent from './accordion/examples/FwbAccordionExamplePersistent.vue'
66
import FwbAccordionExampleStyling from './accordion/examples/FwbAccordionExampleStyling.vue'
77
</script>
@@ -144,13 +144,13 @@ import {
144144
</script>
145145
```
146146

147-
## Flush Accordion
148-
The `flush` prop removes background color, side borders, and rounded corners, creating a flush appearance.
147+
## Flushed Accordion
148+
The `flushed` prop removes background color, side borders, and rounded corners, creating a flush appearance.
149149

150-
<fwb-accordion-example-flush />
150+
<fwb-accordion-example-flushed />
151151
```vue
152152
<template>
153-
<fwb-accordion flush>
153+
<fwb-accordion flushed>
154154
<fwb-accordion-panel>
155155
<fwb-accordion-header>What is Flowbite?</fwb-accordion-header>
156156
<fwb-accordion-content>
@@ -214,7 +214,7 @@ The `collapsed` prop allows you to set an accordion to be fully collapsed by def
214214
<fwb-accordion-example-collapsed />
215215
```vue
216216
<template>
217-
<fwb-accordion persistent>
217+
<fwb-accordion collapsed>
218218
<fwb-accordion-panel>
219219
<fwb-accordion-header>What is Flowbite?</fwb-accordion-header>
220220
<fwb-accordion-content>
@@ -334,10 +334,10 @@ const panels = ref([
334334
| activeClass | String \| Object | `''` |
335335

336336
### FwbAccordionPanel Events
337-
| Name | Description |
338-
| ---- | ------------------------------------------------ |
339-
| show | Emitted when panel visibility changes to visible |
340-
| hide | Emitted when panel visibility changes to hidden |
337+
| Name | Description |
338+
| ---- | ------------------------------------------------- |
339+
| show | Emitted when panel visibility changes to visible. |
340+
| hide | Emitted when panel visibility changes to hidden. |
341341

342342
### FwbAccordionHeader Props
343343
| Name | Type | Default |

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

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

‎docs/components/accordion/examples/FwbAccordionExampleFlushed.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 flushed>
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>

0 commit comments

Comments
 (0)