-
Notifications
You must be signed in to change notification settings - Fork 120
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into toggle-size-fix
- Loading branch information
Showing
24 changed files
with
393 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
<script setup> | ||
import FwbBlockquoteExample from './typography/blockquote/FwbBlockquoteExample.vue' | ||
import FwbBlockquoteSolidExample from './typography/blockquote/FwbBlockquoteSolidExample.vue' | ||
import FwbBlockquoteAlignExample from './typography/blockquote/FwbBlockquoteAlignExample.vue' | ||
import FwbBlockquoteSizeExample from './typography/blockquote/FwbBlockquoteSizeExample.vue' | ||
</script> | ||
|
||
# Vue Blockquote - Flowbite | ||
--- | ||
|
||
:::tip | ||
Original reference: [https://flowbite.com/docs/typography/blockquote/](https://flowbite.com/docs/typography/blockquote/) | ||
::: | ||
|
||
## Get started with a collection of blockquote components when quoting external sources such as quotes inside an article, user reviews, and testimonials based on multiple examples of layouts, styles, and contexts. | ||
|
||
## Default blockquote | ||
|
||
Use this example to quote an external source inside a `<fwb-blockquote>` component. | ||
|
||
<fwb-blockquote-example/> | ||
|
||
```vue | ||
<fwb-blockquote> | ||
"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. | ||
Perfect choice for your next SaaS application." | ||
</fwb-blockquote> | ||
``` | ||
|
||
## Solid background | ||
This example can be used as an alternative style to the default style by applying a solid background color with `type="solid"`. | ||
|
||
<fwb-blockquote-solid-example /> | ||
|
||
```vue | ||
<fwb-blockquote type="solid"> | ||
"Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application." | ||
</fwb-blockquote> | ||
``` | ||
|
||
## Alignment | ||
|
||
Choose from the following examples the blockquote text alignment from starting from left, center to right based on the utility classes from Tailwind CSS. | ||
|
||
<fwb-blockquote-align-example /> | ||
```vue | ||
<fwb-blockquote class="text-left"> | ||
"Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application." | ||
</fwb-blockquote> | ||
<fwb-blockquote class="text-center"> | ||
"Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application." | ||
</fwb-blockquote> | ||
<fwb-blockquote class="text-right"> | ||
"Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application." | ||
</fwb-blockquote> | ||
``` | ||
|
||
## Size | ||
|
||
Choose from one of the multiple sizes for the default blockquote component based on the surrounding elements and sizes. | ||
|
||
<fwb-blockquote-size-example /> | ||
```vue | ||
<fwb-blockquote class="text-lg"> | ||
"Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application." | ||
</fwb-blockquote> | ||
<fwb-blockquote class="text-xl"> | ||
"Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application." | ||
</fwb-blockquote> | ||
<fwb-blockquote class="text-2xl"> | ||
"Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application." | ||
</fwb-blockquote> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 62 additions & 0 deletions
62
docs/components/modal/examples/FwbModalExamplePosition.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
<template> | ||
<div class="flex flex-wrap justify-start gap-2 vp-raw"> | ||
<span> | ||
<fwb-modal-example | ||
position="top-start" | ||
trigger-text="Top Start" | ||
/> | ||
</span> | ||
<span> | ||
<fwb-modal-example | ||
position="top-center" | ||
trigger-text="Top Center" | ||
/> | ||
</span> | ||
<span> | ||
<fwb-modal-example | ||
position="top-end" | ||
trigger-text="Top End" | ||
/> | ||
</span> | ||
<span> | ||
<fwb-modal-example | ||
position="center-start" | ||
trigger-text="Center Start" | ||
/> | ||
</span> | ||
<span> | ||
<fwb-modal-example | ||
position="center" | ||
trigger-text="Center" | ||
/> | ||
</span> | ||
<span> | ||
<fwb-modal-example | ||
position="center-end" | ||
trigger-text="Center End" | ||
/> | ||
</span> | ||
<span> | ||
<fwb-modal-example | ||
position="bottom-start" | ||
trigger-text="Bottom Start" | ||
/> | ||
</span> | ||
<span> | ||
<fwb-modal-example | ||
position="bottom-center" | ||
trigger-text="Bottom Center" | ||
/> | ||
</span> | ||
<span> | ||
<fwb-modal-example | ||
position="bottom-end" | ||
trigger-text="Bottom End" | ||
/> | ||
</span> | ||
</div> | ||
</template> | ||
|
||
<script setup> | ||
import FwbModalExample from './FwbModalExample.vue' | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<template> | ||
<div class="vp-raw grid gap-3"> | ||
<fwb-toggle label="Toggle me" /> | ||
<fwb-toggle | ||
label="Toggle me" | ||
reverse | ||
/> | ||
</div> | ||
</template> | ||
|
||
<script setup> | ||
import { FwbToggle } from '../../../../src/index' | ||
</script> |
21 changes: 21 additions & 0 deletions
21
docs/components/typography/blockquote/FwbBlockquoteAlignExample.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
<template> | ||
<div class="vp-raw flex flex-col gap-6"> | ||
<fwb-blockquote class="text-left"> | ||
"Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS | ||
application." | ||
</fwb-blockquote> | ||
<fwb-blockquote class="text-center"> | ||
"Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS | ||
application." | ||
</fwb-blockquote> | ||
<fwb-blockquote class="text-right"> | ||
"Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS | ||
application." | ||
</fwb-blockquote> | ||
</div> | ||
</template> | ||
|
||
<script setup> | ||
import { FwbBlockquote } from '../../../../src/index' | ||
</script> |
12 changes: 12 additions & 0 deletions
12
docs/components/typography/blockquote/FwbBlockquoteExample.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<template> | ||
<div class="vp-raw"> | ||
<fwb-blockquote> | ||
"Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application." | ||
</fwb-blockquote> | ||
</div> | ||
</template> | ||
|
||
<script setup> | ||
import { FwbBlockquote } from '../../../../src/index' | ||
</script> |
Oops, something went wrong.