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

Update to SEO friendly titles.

Browse Source
This commit is contained in:
Zoltán Szőgyényi
2022-09-19 18:42:15 +03:00
parent 773e075419
commit 4dc218cfad
28 changed files with 5125 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<script setup> <script setup>
import AccordionExample from './examples/AccordionExample.vue' import AccordionExample from './examples/AccordionExample.vue'
</script> </script>
# Accordion # Vue Accordion Component - Flowbite
```vue ```vue
<script setup> <script setup>

2
docs/components/alert/alert.md
View File

@@ -7,7 +7,7 @@ import AlertIconExample from './examples/AlertIconExample.vue';
import AlertInlineExample from './examples/AlertInlineExample.vue'; import AlertInlineExample from './examples/AlertInlineExample.vue';
</script> </script>
# Alert # Vue Alert Component - Flowbite
#### Show contextual information to your users using alert elements based on Tailwind CSS #### Show contextual information to your users using alert elements based on Tailwind CSS

2
docs/components/avatar/avatar.md
View File

@@ -10,7 +10,7 @@ import AvatarPlaceholderExample from './examples/AvatarPlaceholderExample.vue'
import AvatarPlaceholderInitialsExample from './examples/AvatarPlaceholderInitialsExample.vue' import AvatarPlaceholderInitialsExample from './examples/AvatarPlaceholderInitialsExample.vue'
</script> </script>
# Avatar # Vue Avatar Component - Flowbite
Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes
## Default avatar ## Default avatar

2
docs/components/badge/badge.md
View File

@@ -5,7 +5,7 @@ import BadgeLinksExample from './examples/BadgeLinksExample.vue'
import BadgeIconsExample from './examples/BadgeIconsExample.vue' import BadgeIconsExample from './examples/BadgeIconsExample.vue'
import BadgeOnlyIconsExample from './examples/BadgeOnlyIconsExample.vue' import BadgeOnlyIconsExample from './examples/BadgeOnlyIconsExample.vue'
</script> </script>
# Badge # Vue Badge Component - Flowbite
#### Use Tailwind CSS badges as elements to show counts or labels separately or inside other components #### Use Tailwind CSS badges as elements to show counts or labels separately or inside other components
--- ---

2
docs/components/breadcrumb/breadcrumb.md
View File

@@ -3,7 +3,7 @@ import BreadcrumbExample from './examples/BreadcrumbExample.vue'
import BreadcrumbSolidExample from './examples/BreadcrumbSolidExample.vue' import BreadcrumbSolidExample from './examples/BreadcrumbSolidExample.vue'
import BreadcrumbCustomIconsExample from './examples/BreadcrumbCustomIconsExample.vue' import BreadcrumbCustomIconsExample from './examples/BreadcrumbCustomIconsExample.vue'
</script> </script>
# Breadcrumb # Vue Breadcrumb Component - Flowbite
The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages. The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.
Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors. Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors.

6
docs/components/button/button.md
View File

@@ -15,7 +15,7 @@ import ButtonDisabledExample from './examples/ButtonDisabledExample.vue';
import ButtonLoadingExample from './examples/ButtonLoadingExample.vue'; import ButtonLoadingExample from './examples/ButtonLoadingExample.vue';
</script> </script>
# Button # Vue Button Component - Flowbite
#### Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows #### Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows
@@ -412,7 +412,7 @@ import { Button } from 'flowbite-vue'
<template> <template>
<Button color="default"> <Button color="default">
<template #prefix> <template #prefix>
<svg class="w-5 h-5 mr-2 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg> <svg class="mr-2 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
</template> </template>
Buy Buy
</Button> </Button>
@@ -431,7 +431,7 @@ import { Button } from 'flowbite-vue'
<Button color="default"> <Button color="default">
Choose plan Choose plan
<template #suffix> <template #suffix>
<svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg> <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</template> </template>
</Button> </Button>
</template> </template>

2
docs/components/buttonGroup/buttonGroup.md
View File

@@ -3,7 +3,7 @@ import ButtonGroupBasicExample from './examples/ButtonGroupBasicExample.vue';
import ButtonGroupIconExample from './examples/ButtonGroupIconExample.vue'; import ButtonGroupIconExample from './examples/ButtonGroupIconExample.vue';
</script> </script>
# Button Group # Vue Button Group Component - Flowbite
#### Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line #### Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line

2
docs/components/card/card.md
View File

@@ -1,7 +1,7 @@
<script setup> <script setup>
import CardExample from './examples/CardExample.vue' import CardExample from './examples/CardExample.vue'
</script> </script>
# Card # Vue Card Components - Flowbite
```vue ```vue
<script setup> <script setup>

2
docs/components/carousel/carousel.md
View File

@@ -1,7 +1,7 @@
<script setup> <script setup>
import CarouselExample from './examples/CarouselExample.vue' import CarouselExample from './examples/CarouselExample.vue'
</script> </script>
# Carousel # Vue Carousel Component - Flowbite
```vue ```vue
<script setup> <script setup>

4
docs/components/dropdown/dropdown.md
View File

@@ -4,7 +4,7 @@ import DropdownListGroupExample from './examples/DropdownListGroupExample.vue';
import DropdownTriggerExample from './examples/DropdownTriggerExample.vue'; import DropdownTriggerExample from './examples/DropdownTriggerExample.vue';
</script> </script>
# Dropdown # Vue Dropdown Component - Flowbite
#### Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements #### Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements
@@ -32,7 +32,7 @@ import { Dropdown } from 'flowbite-vue'
<Button @click="toggle"> <Button @click="toggle">
Top Top
<template #suffix> <template #suffix>
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</template> </template>
</Button> </Button>
</template> </template>

2
docs/components/flowbiteThemable/flowbiteThemable.md
View File

@@ -6,7 +6,7 @@ import FlowbiteThemableDropdownExample from './examples/dropdown/FlowbiteThemabl
import FlowbiteThemableButtonExample from './examples/button/FlowbiteThemableButtonExample.vue'; import FlowbiteThemableButtonExample from './examples/button/FlowbiteThemableButtonExample.vue';
</script> </script>
# Flowbite Themable # Vue Themable Configuration - Flowbite
You can use this wrapper for styling components with no color prop(like tabs, dropdown etc.) You can use this wrapper for styling components with no color prop(like tabs, dropdown etc.)

2
docs/components/footer/footer.md
View File

@@ -1,7 +1,7 @@
<script setup> <script setup>
import FooterExample from './examples/FooterExample.vue' import FooterExample from './examples/FooterExample.vue'
</script> </script>
# Footer # Vue Footer Component - Flowbite
```vue ```vue
<script setup> <script setup>

2
docs/components/input/input.md
View File

@@ -7,7 +7,7 @@ import InputPrefixExample from './examples/InputPrefixExample.vue';
import InputSuffixExample from './examples/InputSuffixExample.vue' import InputSuffixExample from './examples/InputSuffixExample.vue'
</script> </script>
# Input # Vue Input Components - Flowbite
#### Get started with a collection of input fields built with Tailwind CSS to start accepting data from the user based on multiple sizes, variants, and input types #### Get started with a collection of input fields built with Tailwind CSS to start accepting data from the user based on multiple sizes, variants, and input types

2
docs/components/listGroup/listGroup.md
View File

@@ -5,7 +5,7 @@ import ListGroupHoverIconExample from './examples/ListGroupHoverIconExample.vue'
import ListGroupHoverIconDisabledExample from './examples/ListGroupHoverIconDisabledExample.vue' import ListGroupHoverIconDisabledExample from './examples/ListGroupHoverIconDisabledExample.vue'
</script> </script>
# ListGroup # Vue List Group Component - Flowbite
#### Use the list group component to display a series of items, buttons or links inside a single element #### Use the list group component to display a series of items, buttons or links inside a single element

2
docs/components/modal/modal.md
View File

@@ -1,7 +1,7 @@
<script setup> <script setup>
import ModalExample from './examples/ModalExample.vue' import ModalExample from './examples/ModalExample.vue'
</script> </script>
# Modal # Vue Modal Component - Flowbite
```vue ```vue
<script setup> <script setup>

2
docs/components/navbar/navbar.md
View File

@@ -1,7 +1,7 @@
<script setup> <script setup>
import NavbarExample from './examples/NavbarExample.vue' import NavbarExample from './examples/NavbarExample.vue'
</script> </script>
# Navbar # Vue Navbar Component - Flowbite
```vue ```vue
<script setup> <script setup>

2
docs/components/pagination/pagination.md
View File

@@ -1,7 +1,7 @@
<script setup> <script setup>
import PaginationExample from './examples/PaginationExample.vue' import PaginationExample from './examples/PaginationExample.vue'
</script> </script>
# Pagination # Vue Pagination Component - Flowbite
```vue ```vue
<script setup> <script setup>

2
docs/components/progress/progress.md
View File

@@ -1,7 +1,7 @@
<script setup> <script setup>
import ProgressExample from './examples/ProgressExample.vue' import ProgressExample from './examples/ProgressExample.vue'
</script> </script>
# Progress # Vue Progress Bar Component - Flowbite
```vue ```vue
<script setup> <script setup>

2
docs/components/rating/rating.md
View File

@@ -1,7 +1,7 @@
<script setup> <script setup>
import RatingExample from './examples/RatingExample.vue' import RatingExample from './examples/RatingExample.vue'
</script> </script>
# Rating # Vue Rating Component - Flowbite
```vue ```vue
<script setup> <script setup>

2
docs/components/sidebar/sidebar.md
View File

@@ -1,7 +1,7 @@
<script setup> <script setup>
import SidebarExample from './examples/SidebarExample.vue' import SidebarExample from './examples/SidebarExample.vue'
</script> </script>
# Sidebar # Vue Sidebar Component - Flowbite
```vue ```vue
<script setup> <script setup>

2
docs/components/spinner/spinner.md
View File

@@ -4,7 +4,7 @@ import SpinnerSizeExample from './examples/SpinnerSizeExample.vue';
import SpinnerColorExample from './examples/SpinnerColorExample.vue'; import SpinnerColorExample from './examples/SpinnerColorExample.vue';
</script> </script>
# Spinner # Vue Spinner Component - Flowbite
#### Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG using the utility classes from Tailwind CSS #### Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG using the utility classes from Tailwind CSS

2
docs/components/table/table.md
View File

@@ -1,7 +1,7 @@
<script setup> <script setup>
import TableExample from './examples/TableExample.vue' import TableExample from './examples/TableExample.vue'
</script> </script>
# Table # Vue Table Component - Flowbite
```vue ```vue
<script setup> <script setup>

2
docs/components/tabs/tabs.md
View File

@@ -4,7 +4,7 @@ import TabsPillsExample from './examples/TabsPillsExample.vue';
import TabsUnderlineExample from './examples/TabsUnderlineExample.vue'; import TabsUnderlineExample from './examples/TabsUnderlineExample.vue';
</script> </script>
# Tabs # Vue Tabs Component - Flowbite
#### Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container #### Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container

2
docs/components/timeline/timeline.md
View File

@@ -1,7 +1,7 @@
<script setup> <script setup>
import TimelineExample from './examples/TimelineExample.vue' import TimelineExample from './examples/TimelineExample.vue'
</script> </script>
# Timeline # Vue Timeline Component - Flowbite
```vue ```vue
<script setup> <script setup>

2
docs/components/toast/toast.md
View File

@@ -6,7 +6,7 @@ import ToastDivideExample from './examples/ToastDivideExample.vue';
import ToastMessageExample from './examples/ToastMessageExample.vue'; import ToastMessageExample from './examples/ToastMessageExample.vue';
import ToastInteractiveExample from './examples/ToastInteractiveExample.vue' import ToastInteractiveExample from './examples/ToastInteractiveExample.vue'
</script> </script>
# Toast # Vue Toast Component - Flowbite
#### Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positions #### Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positions

2
docs/components/toastProvider/toastProvider.md
View File

@@ -1,6 +1,6 @@
<script setup> <script setup>
import ToastProviderExample from './examples/ToastProviderExample.vue'; import ToastProviderExample from './examples/ToastProviderExample.vue';
</script> </script>
# Toast provider # Vue Toast Provider - Flowbite
<ToastProviderExample /> <ToastProviderExample />

2
docs/components/tooltip/tooltip.md
View File

@@ -1,7 +1,7 @@
<script setup> <script setup>
import TooltipExample from './examples/TooltipExample.vue' import TooltipExample from './examples/TooltipExample.vue'
</script> </script>
# Tooltip # Vue Tooltip Component - Flowbite
```vue ```vue
<script setup> <script setup>

5104
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff