From 6117a0ffaf624867b9ceec2057cddf663b51f1ce Mon Sep 17 00:00:00 2001 From: Alexandr Date: Mon, 25 Jul 2022 14:22:53 +0300 Subject: [PATCH] docs: update ready components pages --- docs/.vitepress/config.ts | 53 ++++++++++--------- .../accordion/accordion.md | 0 .../accordion/examples/AccordionExample.vue | 0 docs/{guide => components}/alert/alert.md | 14 ++++- .../alert/examples/AlertBorderExample.vue | 0 .../alert/examples/AlertClosableExample.vue | 0 .../alert/examples/AlertIconExample.vue | 0 .../alert/examples/AlertInlineExample.vue | 0 .../alert/examples/AlertTitleExample.vue | 0 .../alert/examples/AlertTypeExample.vue | 0 docs/{guide => components}/avatar/avatar.md | 0 .../avatar/examples/AvatarExample.vue | 0 docs/{guide => components}/badge/badge.md | 0 .../badge/examples/BadgeExample.vue | 0 .../breadcrumb/breadcrumb.md | 0 .../breadcrumb/examples/BreadcrumbExample.vue | 0 docs/{guide => components}/button/button.md | 14 ++++- .../button/examples/ButtonColorExample.vue | 0 .../button/examples/ButtonDisabledExample.vue | 0 .../examples/ButtonGradientDuotoneExample.vue | 0 .../ButtonGradientMonochromeExample.vue | 0 .../examples/ButtonGradientShadowExample.vue | 0 .../button/examples/ButtonIconExample.vue | 0 .../button/examples/ButtonLoadingExample.vue | 0 .../examples/ButtonOutlineColorExample.vue | 0 .../examples/ButtonOutlineGradientExample.vue | 0 .../button/examples/ButtonPillExample.vue | 0 .../button/examples/ButtonPrefixExample.vue | 0 .../button/examples/ButtonSizeExample.vue | 0 .../button/examples/ButtonSquareExample.vue | 0 .../button/examples/ButtonSuffixExample.vue | 0 .../buttonGroup/buttonGroup.md | 12 ++++- .../examples/ButtonGroupBasicExample.vue | 0 .../examples/ButtonGroupIconExample.vue | 0 docs/{guide => components}/card/card.md | 0 .../card/examples/CardExample.vue | 0 .../carousel/carousel.md | 0 .../carousel/examples/CarouselExample.vue | 0 .../dropdown/dropdown.md | 10 ++++ .../examples/DropdownListGroupExample.vue | 0 .../examples/DropdownPlacementExample.vue | 0 .../button/FlowbiteThemableButtonExample.vue | 0 .../FlowbiteThemableDropdownExample.vue | 0 .../FlowbiteThemableTabsDefaultExample.vue | 0 .../tabs/FlowbiteThemableTabsPillsExample.vue | 0 .../FlowbiteThemableTabsUnderlineExample.vue | 0 .../flowbiteThemable/flowbiteThemable.md | 0 .../footer/examples/FooterExample.vue | 0 docs/{guide => components}/footer/footer.md | 0 .../listGroup/examples/ListGroupExample.vue | 0 .../examples/ListGroupHoverExample.vue | 0 .../ListGroupHoverIconDisabledExample.vue | 0 .../examples/ListGroupHoverIconExample.vue | 0 .../listGroup/listGroup.md | 9 ++++ .../modal/examples/ModalExample.vue | 0 docs/{guide => components}/modal/modal.md | 0 .../navbar/examples/NavbarExample.vue | 0 docs/{guide => components}/navbar/navbar.md | 0 .../pagination/examples/PaginationExample.vue | 0 .../pagination/pagination.md | 0 .../progress/examples/ProgressExample.vue | 0 .../progress/progress.md | 0 .../rating/examples/RatingExample.vue | 0 docs/{guide => components}/rating/rating.md | 0 .../sidebar/examples/SidebarExample.vue | 0 docs/{guide => components}/sidebar/sidebar.md | 0 .../spinner/examples/SpinnerBasicExample.vue | 0 .../spinner/examples/SpinnerColorExample.vue | 0 .../spinner/examples/SpinnerSizeExample.vue | 0 docs/{guide => components}/spinner/spinner.md | 11 +++- .../table/examples/TableExample.vue | 0 docs/{guide => components}/table/table.md | 0 .../tabs/examples/TabsDefaultExample.vue | 0 .../tabs/examples/TabsPillsExample.vue | 0 .../tabs/examples/TabsUnderlineExample.vue | 0 docs/{guide => components}/tabs/tabs.md | 12 ++++- .../timeline/examples/TimelineExample.vue | 0 .../timeline/timeline.md | 0 .../toast/examples/ToastExample.vue | 0 docs/{guide => components}/toast/toast.md | 0 .../tooltip/examples/TooltipExample.vue | 0 docs/{guide => components}/tooltip/tooltip.md | 0 82 files changed, 100 insertions(+), 35 deletions(-) rename docs/{guide => components}/accordion/accordion.md (100%) rename docs/{guide => components}/accordion/examples/AccordionExample.vue (100%) rename docs/{guide => components}/alert/alert.md (90%) rename docs/{guide => components}/alert/examples/AlertBorderExample.vue (100%) rename docs/{guide => components}/alert/examples/AlertClosableExample.vue (100%) rename docs/{guide => components}/alert/examples/AlertIconExample.vue (100%) rename docs/{guide => components}/alert/examples/AlertInlineExample.vue (100%) rename docs/{guide => components}/alert/examples/AlertTitleExample.vue (100%) rename docs/{guide => components}/alert/examples/AlertTypeExample.vue (100%) rename docs/{guide => components}/avatar/avatar.md (100%) rename docs/{guide => components}/avatar/examples/AvatarExample.vue (100%) rename docs/{guide => components}/badge/badge.md (100%) rename docs/{guide => components}/badge/examples/BadgeExample.vue (100%) rename docs/{guide => components}/breadcrumb/breadcrumb.md (100%) rename docs/{guide => components}/breadcrumb/examples/BreadcrumbExample.vue (100%) rename docs/{guide => components}/button/button.md (95%) rename docs/{guide => components}/button/examples/ButtonColorExample.vue (100%) rename docs/{guide => components}/button/examples/ButtonDisabledExample.vue (100%) rename docs/{guide => components}/button/examples/ButtonGradientDuotoneExample.vue (100%) rename docs/{guide => components}/button/examples/ButtonGradientMonochromeExample.vue (100%) rename docs/{guide => components}/button/examples/ButtonGradientShadowExample.vue (100%) rename docs/{guide => components}/button/examples/ButtonIconExample.vue (100%) rename docs/{guide => components}/button/examples/ButtonLoadingExample.vue (100%) rename docs/{guide => components}/button/examples/ButtonOutlineColorExample.vue (100%) rename docs/{guide => components}/button/examples/ButtonOutlineGradientExample.vue (100%) rename docs/{guide => components}/button/examples/ButtonPillExample.vue (100%) rename docs/{guide => components}/button/examples/ButtonPrefixExample.vue (100%) rename docs/{guide => components}/button/examples/ButtonSizeExample.vue (100%) rename docs/{guide => components}/button/examples/ButtonSquareExample.vue (100%) rename docs/{guide => components}/button/examples/ButtonSuffixExample.vue (100%) rename docs/{guide => components}/buttonGroup/buttonGroup.md (77%) rename docs/{guide => components}/buttonGroup/examples/ButtonGroupBasicExample.vue (100%) rename docs/{guide => components}/buttonGroup/examples/ButtonGroupIconExample.vue (100%) rename docs/{guide => components}/card/card.md (100%) rename docs/{guide => components}/card/examples/CardExample.vue (100%) rename docs/{guide => components}/carousel/carousel.md (100%) rename docs/{guide => components}/carousel/examples/CarouselExample.vue (100%) rename docs/{guide => components}/dropdown/dropdown.md (87%) rename docs/{guide => components}/dropdown/examples/DropdownListGroupExample.vue (100%) rename docs/{guide => components}/dropdown/examples/DropdownPlacementExample.vue (100%) rename docs/{guide => components}/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue (100%) rename docs/{guide => components}/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue (100%) rename docs/{guide => components}/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue (100%) rename docs/{guide => components}/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue (100%) rename docs/{guide => components}/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue (100%) rename docs/{guide => components}/flowbiteThemable/flowbiteThemable.md (100%) rename docs/{guide => components}/footer/examples/FooterExample.vue (100%) rename docs/{guide => components}/footer/footer.md (100%) rename docs/{guide => components}/listGroup/examples/ListGroupExample.vue (100%) rename docs/{guide => components}/listGroup/examples/ListGroupHoverExample.vue (100%) rename docs/{guide => components}/listGroup/examples/ListGroupHoverIconDisabledExample.vue (100%) rename docs/{guide => components}/listGroup/examples/ListGroupHoverIconExample.vue (100%) rename docs/{guide => components}/listGroup/listGroup.md (93%) rename docs/{guide => components}/modal/examples/ModalExample.vue (100%) rename docs/{guide => components}/modal/modal.md (100%) rename docs/{guide => components}/navbar/examples/NavbarExample.vue (100%) rename docs/{guide => components}/navbar/navbar.md (100%) rename docs/{guide => components}/pagination/examples/PaginationExample.vue (100%) rename docs/{guide => components}/pagination/pagination.md (100%) rename docs/{guide => components}/progress/examples/ProgressExample.vue (100%) rename docs/{guide => components}/progress/progress.md (100%) rename docs/{guide => components}/rating/examples/RatingExample.vue (100%) rename docs/{guide => components}/rating/rating.md (100%) rename docs/{guide => components}/sidebar/examples/SidebarExample.vue (100%) rename docs/{guide => components}/sidebar/sidebar.md (100%) rename docs/{guide => components}/spinner/examples/SpinnerBasicExample.vue (100%) rename docs/{guide => components}/spinner/examples/SpinnerColorExample.vue (100%) rename docs/{guide => components}/spinner/examples/SpinnerSizeExample.vue (100%) rename docs/{guide => components}/spinner/spinner.md (75%) rename docs/{guide => components}/table/examples/TableExample.vue (100%) rename docs/{guide => components}/table/table.md (100%) rename docs/{guide => components}/tabs/examples/TabsDefaultExample.vue (100%) rename docs/{guide => components}/tabs/examples/TabsPillsExample.vue (100%) rename docs/{guide => components}/tabs/examples/TabsUnderlineExample.vue (100%) rename docs/{guide => components}/tabs/tabs.md (83%) rename docs/{guide => components}/timeline/examples/TimelineExample.vue (100%) rename docs/{guide => components}/timeline/timeline.md (100%) rename docs/{guide => components}/toast/examples/ToastExample.vue (100%) rename docs/{guide => components}/toast/toast.md (100%) rename docs/{guide => components}/tooltip/examples/TooltipExample.vue (100%) rename docs/{guide => components}/tooltip/tooltip.md (100%) diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index af09dcf..8818810 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -27,37 +27,37 @@ function buildSidebar() { function getComponents() { return [ - { text: 'Alert', link: '/guide/alert/alert.md' }, - { text: 'Button', link: '/guide/button/button.md' }, - { text: 'Button Group', link: '/guide/buttonGroup/buttonGroup.md' }, - { text: 'Dropdown', link: '/guide/dropdown/dropdown.md' }, - { text: 'Spinner', link: '/guide/spinner/spinner.md' }, - { text: 'Tabs', link: '/guide/tabs/tabs.md' }, - { text: 'ListGroup', link: 'guide/listGroup/listGroup.md' }, + { text: 'Alert', link: '/components/alert/alert.md' }, + { text: 'Button', link: '/components/button/button.md' }, + { text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' }, + { text: 'Dropdown', link: '/components/dropdown/dropdown.md' }, + { text: 'Spinner', link: '/components/spinner/spinner.md' }, + { text: 'Tabs', link: '/components/tabs/tabs.md' }, + { text: 'ListGroup', link: 'components/listGroup/listGroup.md' }, - { text: '- Accordion', link: 'guide/accordion/accordion.md' }, - { text: '- Avatar', link: 'guide/avatar/avatar.md' }, - { text: '- Badge', link: 'guide/badge/badge.md' }, - { text: '- Breadcrumb', link: 'guide/breadcrumb/breadcrumb.md' }, - { text: '- Card', link: 'guide/card/card.md' }, - { text: '- Carousel', link: 'guide/carousel/carousel.md' }, - { text: '- Footer', link: 'guide/footer/footer.md' }, - { text: '- Modal', link: 'guide/modal/modal.md' }, - { text: '- Navbar', link: 'guide/navbar/navbar.md' }, - { text: '- Pagination', link: 'guide/pagination/pagination.md' }, - { text: '- Progress', link: 'guide/progress/progress.md' }, - { text: '- Rating', link: 'guide/rating/rating.md' }, - { text: '- Sidebar', link: 'guide/sidebar/sidebar.md' }, - { text: '- Table', link: 'guide/table/table.md' }, - { text: '- Timeline', link: 'guide/timeline/timeline.md' }, - { text: '- Toast', link: 'guide/toast/toast.md' }, - { text: '- Tooltip', link: 'guide/tooltip/tooltip.md' }, + { text: '- Accordion', link: 'components/accordion/accordion.md' }, + { text: '- Avatar', link: 'components/avatar/avatar.md' }, + { text: '- Badge', link: 'components/badge/badge.md' }, + { text: '- Breadcrumb', link: 'components/breadcrumb/breadcrumb.md' }, + { text: '- Card', link: 'components/card/card.md' }, + { text: '- Carousel', link: 'components/carousel/carousel.md' }, + { text: '- Footer', link: 'components/footer/footer.md' }, + { text: '- Modal', link: 'components/modal/modal.md' }, + { text: '- Navbar', link: 'components/navbar/navbar.md' }, + { text: '- Pagination', link: 'components/pagination/pagination.md' }, + { text: '- Progress', link: 'components/progress/progress.md' }, + { text: '- Rating', link: 'components/rating/rating.md' }, + { text: '- Sidebar', link: 'components/sidebar/sidebar.md' }, + { text: '- Table', link: 'components/table/table.md' }, + { text: '- Timeline', link: 'components/timeline/timeline.md' }, + { text: '- Toast', link: 'components/toast/toast.md' }, + { text: '- Tooltip', link: 'components/tooltip/tooltip.md' }, ] } function getUtils() { return [ - { text: 'Flowbite Themable', link: '/guide/flowbiteThemable/flowbiteThemable.md' }, + { text: 'Flowbite Themable', link: '/components/flowbiteThemable/flowbiteThemable.md' }, ] } @@ -74,7 +74,8 @@ export default defineConfig({ sidebar: buildSidebar(), logo: '/assets/logo.svg', socialLinks: [ - { icon: 'github', link: 'https://github.com/themesberg/flowbite-vue' } + { icon: 'github', link: 'https://github.com/themesberg/flowbite-vue' }, + { icon: 'discord', link: 'https://discord.gg/4eeurUVvTy' } ], footer: { diff --git a/docs/guide/accordion/accordion.md b/docs/components/accordion/accordion.md similarity index 100% rename from docs/guide/accordion/accordion.md rename to docs/components/accordion/accordion.md diff --git a/docs/guide/accordion/examples/AccordionExample.vue b/docs/components/accordion/examples/AccordionExample.vue similarity index 100% rename from docs/guide/accordion/examples/AccordionExample.vue rename to docs/components/accordion/examples/AccordionExample.vue diff --git a/docs/guide/alert/alert.md b/docs/components/alert/alert.md similarity index 90% rename from docs/guide/alert/alert.md rename to docs/components/alert/alert.md index 18a3ca8..3c22dfe 100644 --- a/docs/guide/alert/alert.md +++ b/docs/components/alert/alert.md @@ -9,7 +9,17 @@ import AlertInlineExample from './examples/AlertInlineExample.vue'; # Alert -reference: [https://flowbite.com/docs/components/alert/](https://flowbite.com/docs/components/alert/) +#### Show contextual information to your users using alert elements based on Tailwind CSS + +--- + +:::tip +Original reference: [https://flowbite.com/docs/components/alert/](https://flowbite.com/docs/components/alert/) +::: + +The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page. + +Flowbite also includes dismissable alerts which can be hidden by the users by clicking on the close icon. ## Prop - type @@ -205,4 +215,4 @@ import { Alert } from 'flowbite-vue' -``` \ No newline at end of file +``` diff --git a/docs/guide/alert/examples/AlertBorderExample.vue b/docs/components/alert/examples/AlertBorderExample.vue similarity index 100% rename from docs/guide/alert/examples/AlertBorderExample.vue rename to docs/components/alert/examples/AlertBorderExample.vue diff --git a/docs/guide/alert/examples/AlertClosableExample.vue b/docs/components/alert/examples/AlertClosableExample.vue similarity index 100% rename from docs/guide/alert/examples/AlertClosableExample.vue rename to docs/components/alert/examples/AlertClosableExample.vue diff --git a/docs/guide/alert/examples/AlertIconExample.vue b/docs/components/alert/examples/AlertIconExample.vue similarity index 100% rename from docs/guide/alert/examples/AlertIconExample.vue rename to docs/components/alert/examples/AlertIconExample.vue diff --git a/docs/guide/alert/examples/AlertInlineExample.vue b/docs/components/alert/examples/AlertInlineExample.vue similarity index 100% rename from docs/guide/alert/examples/AlertInlineExample.vue rename to docs/components/alert/examples/AlertInlineExample.vue diff --git a/docs/guide/alert/examples/AlertTitleExample.vue b/docs/components/alert/examples/AlertTitleExample.vue similarity index 100% rename from docs/guide/alert/examples/AlertTitleExample.vue rename to docs/components/alert/examples/AlertTitleExample.vue diff --git a/docs/guide/alert/examples/AlertTypeExample.vue b/docs/components/alert/examples/AlertTypeExample.vue similarity index 100% rename from docs/guide/alert/examples/AlertTypeExample.vue rename to docs/components/alert/examples/AlertTypeExample.vue diff --git a/docs/guide/avatar/avatar.md b/docs/components/avatar/avatar.md similarity index 100% rename from docs/guide/avatar/avatar.md rename to docs/components/avatar/avatar.md diff --git a/docs/guide/avatar/examples/AvatarExample.vue b/docs/components/avatar/examples/AvatarExample.vue similarity index 100% rename from docs/guide/avatar/examples/AvatarExample.vue rename to docs/components/avatar/examples/AvatarExample.vue diff --git a/docs/guide/badge/badge.md b/docs/components/badge/badge.md similarity index 100% rename from docs/guide/badge/badge.md rename to docs/components/badge/badge.md diff --git a/docs/guide/badge/examples/BadgeExample.vue b/docs/components/badge/examples/BadgeExample.vue similarity index 100% rename from docs/guide/badge/examples/BadgeExample.vue rename to docs/components/badge/examples/BadgeExample.vue diff --git a/docs/guide/breadcrumb/breadcrumb.md b/docs/components/breadcrumb/breadcrumb.md similarity index 100% rename from docs/guide/breadcrumb/breadcrumb.md rename to docs/components/breadcrumb/breadcrumb.md diff --git a/docs/guide/breadcrumb/examples/BreadcrumbExample.vue b/docs/components/breadcrumb/examples/BreadcrumbExample.vue similarity index 100% rename from docs/guide/breadcrumb/examples/BreadcrumbExample.vue rename to docs/components/breadcrumb/examples/BreadcrumbExample.vue diff --git a/docs/guide/button/button.md b/docs/components/button/button.md similarity index 95% rename from docs/guide/button/button.md rename to docs/components/button/button.md index f34201e..a70a0d6 100644 --- a/docs/guide/button/button.md +++ b/docs/components/button/button.md @@ -17,7 +17,17 @@ import ButtonLoadingExample from './examples/ButtonLoadingExample.vue'; # Button -reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/docs/components/buttons/) +#### Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows + +--- + +:::tip +Original reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/docs/components/buttons/) +::: + +The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages. + +Flowbite provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more. ## Prop - color @@ -425,4 +435,4 @@ import { Button } from 'flowbite-vue' -``` \ No newline at end of file +``` diff --git a/docs/guide/button/examples/ButtonColorExample.vue b/docs/components/button/examples/ButtonColorExample.vue similarity index 100% rename from docs/guide/button/examples/ButtonColorExample.vue rename to docs/components/button/examples/ButtonColorExample.vue diff --git a/docs/guide/button/examples/ButtonDisabledExample.vue b/docs/components/button/examples/ButtonDisabledExample.vue similarity index 100% rename from docs/guide/button/examples/ButtonDisabledExample.vue rename to docs/components/button/examples/ButtonDisabledExample.vue diff --git a/docs/guide/button/examples/ButtonGradientDuotoneExample.vue b/docs/components/button/examples/ButtonGradientDuotoneExample.vue similarity index 100% rename from docs/guide/button/examples/ButtonGradientDuotoneExample.vue rename to docs/components/button/examples/ButtonGradientDuotoneExample.vue diff --git a/docs/guide/button/examples/ButtonGradientMonochromeExample.vue b/docs/components/button/examples/ButtonGradientMonochromeExample.vue similarity index 100% rename from docs/guide/button/examples/ButtonGradientMonochromeExample.vue rename to docs/components/button/examples/ButtonGradientMonochromeExample.vue diff --git a/docs/guide/button/examples/ButtonGradientShadowExample.vue b/docs/components/button/examples/ButtonGradientShadowExample.vue similarity index 100% rename from docs/guide/button/examples/ButtonGradientShadowExample.vue rename to docs/components/button/examples/ButtonGradientShadowExample.vue diff --git a/docs/guide/button/examples/ButtonIconExample.vue b/docs/components/button/examples/ButtonIconExample.vue similarity index 100% rename from docs/guide/button/examples/ButtonIconExample.vue rename to docs/components/button/examples/ButtonIconExample.vue diff --git a/docs/guide/button/examples/ButtonLoadingExample.vue b/docs/components/button/examples/ButtonLoadingExample.vue similarity index 100% rename from docs/guide/button/examples/ButtonLoadingExample.vue rename to docs/components/button/examples/ButtonLoadingExample.vue diff --git a/docs/guide/button/examples/ButtonOutlineColorExample.vue b/docs/components/button/examples/ButtonOutlineColorExample.vue similarity index 100% rename from docs/guide/button/examples/ButtonOutlineColorExample.vue rename to docs/components/button/examples/ButtonOutlineColorExample.vue diff --git a/docs/guide/button/examples/ButtonOutlineGradientExample.vue b/docs/components/button/examples/ButtonOutlineGradientExample.vue similarity index 100% rename from docs/guide/button/examples/ButtonOutlineGradientExample.vue rename to docs/components/button/examples/ButtonOutlineGradientExample.vue diff --git a/docs/guide/button/examples/ButtonPillExample.vue b/docs/components/button/examples/ButtonPillExample.vue similarity index 100% rename from docs/guide/button/examples/ButtonPillExample.vue rename to docs/components/button/examples/ButtonPillExample.vue diff --git a/docs/guide/button/examples/ButtonPrefixExample.vue b/docs/components/button/examples/ButtonPrefixExample.vue similarity index 100% rename from docs/guide/button/examples/ButtonPrefixExample.vue rename to docs/components/button/examples/ButtonPrefixExample.vue diff --git a/docs/guide/button/examples/ButtonSizeExample.vue b/docs/components/button/examples/ButtonSizeExample.vue similarity index 100% rename from docs/guide/button/examples/ButtonSizeExample.vue rename to docs/components/button/examples/ButtonSizeExample.vue diff --git a/docs/guide/button/examples/ButtonSquareExample.vue b/docs/components/button/examples/ButtonSquareExample.vue similarity index 100% rename from docs/guide/button/examples/ButtonSquareExample.vue rename to docs/components/button/examples/ButtonSquareExample.vue diff --git a/docs/guide/button/examples/ButtonSuffixExample.vue b/docs/components/button/examples/ButtonSuffixExample.vue similarity index 100% rename from docs/guide/button/examples/ButtonSuffixExample.vue rename to docs/components/button/examples/ButtonSuffixExample.vue diff --git a/docs/guide/buttonGroup/buttonGroup.md b/docs/components/buttonGroup/buttonGroup.md similarity index 77% rename from docs/guide/buttonGroup/buttonGroup.md rename to docs/components/buttonGroup/buttonGroup.md index 66b13e2..7296465 100644 --- a/docs/guide/buttonGroup/buttonGroup.md +++ b/docs/components/buttonGroup/buttonGroup.md @@ -5,7 +5,15 @@ import ButtonGroupIconExample from './examples/ButtonGroupIconExample.vue'; # Button Group -reference: [https://flowbite.com/docs/components/button-group/](https://flowbite.com/docs/components/button-group/) +#### Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line + +--- + +:::tip +Original reference: [https://flowbite.com/docs/components/button-group/](https://flowbite.com/docs/components/button-group/) +::: + +The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element. ## Basic example @@ -46,4 +54,4 @@ import { ButtonGroup, Button } from 'flowbite-vue' -``` \ No newline at end of file +``` diff --git a/docs/guide/buttonGroup/examples/ButtonGroupBasicExample.vue b/docs/components/buttonGroup/examples/ButtonGroupBasicExample.vue similarity index 100% rename from docs/guide/buttonGroup/examples/ButtonGroupBasicExample.vue rename to docs/components/buttonGroup/examples/ButtonGroupBasicExample.vue diff --git a/docs/guide/buttonGroup/examples/ButtonGroupIconExample.vue b/docs/components/buttonGroup/examples/ButtonGroupIconExample.vue similarity index 100% rename from docs/guide/buttonGroup/examples/ButtonGroupIconExample.vue rename to docs/components/buttonGroup/examples/ButtonGroupIconExample.vue diff --git a/docs/guide/card/card.md b/docs/components/card/card.md similarity index 100% rename from docs/guide/card/card.md rename to docs/components/card/card.md diff --git a/docs/guide/card/examples/CardExample.vue b/docs/components/card/examples/CardExample.vue similarity index 100% rename from docs/guide/card/examples/CardExample.vue rename to docs/components/card/examples/CardExample.vue diff --git a/docs/guide/carousel/carousel.md b/docs/components/carousel/carousel.md similarity index 100% rename from docs/guide/carousel/carousel.md rename to docs/components/carousel/carousel.md diff --git a/docs/guide/carousel/examples/CarouselExample.vue b/docs/components/carousel/examples/CarouselExample.vue similarity index 100% rename from docs/guide/carousel/examples/CarouselExample.vue rename to docs/components/carousel/examples/CarouselExample.vue diff --git a/docs/guide/dropdown/dropdown.md b/docs/components/dropdown/dropdown.md similarity index 87% rename from docs/guide/dropdown/dropdown.md rename to docs/components/dropdown/dropdown.md index 8b32b8e..a4c2746 100644 --- a/docs/guide/dropdown/dropdown.md +++ b/docs/components/dropdown/dropdown.md @@ -5,6 +5,16 @@ import DropdownListGroupExample from './examples/DropdownListGroupExample.vue'; # Dropdown +#### 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 + +--- + +:::tip +Original reference: [https://flowbite.com/docs/components/dropdowns/](https://flowbite.com/docs/components/dropdowns/) +::: + +The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element. + ## Props - placement diff --git a/docs/guide/dropdown/examples/DropdownListGroupExample.vue b/docs/components/dropdown/examples/DropdownListGroupExample.vue similarity index 100% rename from docs/guide/dropdown/examples/DropdownListGroupExample.vue rename to docs/components/dropdown/examples/DropdownListGroupExample.vue diff --git a/docs/guide/dropdown/examples/DropdownPlacementExample.vue b/docs/components/dropdown/examples/DropdownPlacementExample.vue similarity index 100% rename from docs/guide/dropdown/examples/DropdownPlacementExample.vue rename to docs/components/dropdown/examples/DropdownPlacementExample.vue diff --git a/docs/guide/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue b/docs/components/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue similarity index 100% rename from docs/guide/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue rename to docs/components/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue diff --git a/docs/guide/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue b/docs/components/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue similarity index 100% rename from docs/guide/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue rename to docs/components/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue diff --git a/docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue b/docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue similarity index 100% rename from docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue rename to docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue diff --git a/docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue b/docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue similarity index 100% rename from docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue rename to docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue diff --git a/docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue b/docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue similarity index 100% rename from docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue rename to docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue diff --git a/docs/guide/flowbiteThemable/flowbiteThemable.md b/docs/components/flowbiteThemable/flowbiteThemable.md similarity index 100% rename from docs/guide/flowbiteThemable/flowbiteThemable.md rename to docs/components/flowbiteThemable/flowbiteThemable.md diff --git a/docs/guide/footer/examples/FooterExample.vue b/docs/components/footer/examples/FooterExample.vue similarity index 100% rename from docs/guide/footer/examples/FooterExample.vue rename to docs/components/footer/examples/FooterExample.vue diff --git a/docs/guide/footer/footer.md b/docs/components/footer/footer.md similarity index 100% rename from docs/guide/footer/footer.md rename to docs/components/footer/footer.md diff --git a/docs/guide/listGroup/examples/ListGroupExample.vue b/docs/components/listGroup/examples/ListGroupExample.vue similarity index 100% rename from docs/guide/listGroup/examples/ListGroupExample.vue rename to docs/components/listGroup/examples/ListGroupExample.vue diff --git a/docs/guide/listGroup/examples/ListGroupHoverExample.vue b/docs/components/listGroup/examples/ListGroupHoverExample.vue similarity index 100% rename from docs/guide/listGroup/examples/ListGroupHoverExample.vue rename to docs/components/listGroup/examples/ListGroupHoverExample.vue diff --git a/docs/guide/listGroup/examples/ListGroupHoverIconDisabledExample.vue b/docs/components/listGroup/examples/ListGroupHoverIconDisabledExample.vue similarity index 100% rename from docs/guide/listGroup/examples/ListGroupHoverIconDisabledExample.vue rename to docs/components/listGroup/examples/ListGroupHoverIconDisabledExample.vue diff --git a/docs/guide/listGroup/examples/ListGroupHoverIconExample.vue b/docs/components/listGroup/examples/ListGroupHoverIconExample.vue similarity index 100% rename from docs/guide/listGroup/examples/ListGroupHoverIconExample.vue rename to docs/components/listGroup/examples/ListGroupHoverIconExample.vue diff --git a/docs/guide/listGroup/listGroup.md b/docs/components/listGroup/listGroup.md similarity index 93% rename from docs/guide/listGroup/listGroup.md rename to docs/components/listGroup/listGroup.md index 139512a..2d5aea4 100644 --- a/docs/guide/listGroup/listGroup.md +++ b/docs/components/listGroup/listGroup.md @@ -7,6 +7,15 @@ import ListGroupHoverIconDisabledExample from './examples/ListGroupHoverIconDisa # ListGroup +#### Use the list group component to display a series of items, buttons or links inside a single element + +--- + +:::tip +Original reference: [https://flowbite.com/docs/components/list-group/](https://flowbite.com/docs/components/list-group/) +::: + +The list group component can be used to display a series of elements, buttons or links inside a single card component similar to a sidebar. ## No hover ```vue diff --git a/docs/guide/modal/examples/ModalExample.vue b/docs/components/modal/examples/ModalExample.vue similarity index 100% rename from docs/guide/modal/examples/ModalExample.vue rename to docs/components/modal/examples/ModalExample.vue diff --git a/docs/guide/modal/modal.md b/docs/components/modal/modal.md similarity index 100% rename from docs/guide/modal/modal.md rename to docs/components/modal/modal.md diff --git a/docs/guide/navbar/examples/NavbarExample.vue b/docs/components/navbar/examples/NavbarExample.vue similarity index 100% rename from docs/guide/navbar/examples/NavbarExample.vue rename to docs/components/navbar/examples/NavbarExample.vue diff --git a/docs/guide/navbar/navbar.md b/docs/components/navbar/navbar.md similarity index 100% rename from docs/guide/navbar/navbar.md rename to docs/components/navbar/navbar.md diff --git a/docs/guide/pagination/examples/PaginationExample.vue b/docs/components/pagination/examples/PaginationExample.vue similarity index 100% rename from docs/guide/pagination/examples/PaginationExample.vue rename to docs/components/pagination/examples/PaginationExample.vue diff --git a/docs/guide/pagination/pagination.md b/docs/components/pagination/pagination.md similarity index 100% rename from docs/guide/pagination/pagination.md rename to docs/components/pagination/pagination.md diff --git a/docs/guide/progress/examples/ProgressExample.vue b/docs/components/progress/examples/ProgressExample.vue similarity index 100% rename from docs/guide/progress/examples/ProgressExample.vue rename to docs/components/progress/examples/ProgressExample.vue diff --git a/docs/guide/progress/progress.md b/docs/components/progress/progress.md similarity index 100% rename from docs/guide/progress/progress.md rename to docs/components/progress/progress.md diff --git a/docs/guide/rating/examples/RatingExample.vue b/docs/components/rating/examples/RatingExample.vue similarity index 100% rename from docs/guide/rating/examples/RatingExample.vue rename to docs/components/rating/examples/RatingExample.vue diff --git a/docs/guide/rating/rating.md b/docs/components/rating/rating.md similarity index 100% rename from docs/guide/rating/rating.md rename to docs/components/rating/rating.md diff --git a/docs/guide/sidebar/examples/SidebarExample.vue b/docs/components/sidebar/examples/SidebarExample.vue similarity index 100% rename from docs/guide/sidebar/examples/SidebarExample.vue rename to docs/components/sidebar/examples/SidebarExample.vue diff --git a/docs/guide/sidebar/sidebar.md b/docs/components/sidebar/sidebar.md similarity index 100% rename from docs/guide/sidebar/sidebar.md rename to docs/components/sidebar/sidebar.md diff --git a/docs/guide/spinner/examples/SpinnerBasicExample.vue b/docs/components/spinner/examples/SpinnerBasicExample.vue similarity index 100% rename from docs/guide/spinner/examples/SpinnerBasicExample.vue rename to docs/components/spinner/examples/SpinnerBasicExample.vue diff --git a/docs/guide/spinner/examples/SpinnerColorExample.vue b/docs/components/spinner/examples/SpinnerColorExample.vue similarity index 100% rename from docs/guide/spinner/examples/SpinnerColorExample.vue rename to docs/components/spinner/examples/SpinnerColorExample.vue diff --git a/docs/guide/spinner/examples/SpinnerSizeExample.vue b/docs/components/spinner/examples/SpinnerSizeExample.vue similarity index 100% rename from docs/guide/spinner/examples/SpinnerSizeExample.vue rename to docs/components/spinner/examples/SpinnerSizeExample.vue diff --git a/docs/guide/spinner/spinner.md b/docs/components/spinner/spinner.md similarity index 75% rename from docs/guide/spinner/spinner.md rename to docs/components/spinner/spinner.md index d3ffd77..8fea681 100644 --- a/docs/guide/spinner/spinner.md +++ b/docs/components/spinner/spinner.md @@ -6,7 +6,16 @@ import SpinnerColorExample from './examples/SpinnerColorExample.vue'; # Spinner -reference: [https://flowbite.com/docs/components/spinner/](https://flowbite.com/docs/components/spinner/) +#### 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 + +--- + +:::tip +Original reference: [https://flowbite.com/docs/components/spinner/](https://flowbite.com/docs/components/spinner/) +::: + +The spinner component can be used as a loading indicator which comes in multiple colors, sizes, and styles separately or inside elements such as buttons to improve the user experience whenever data is being fetched from your server. + ## Basic example diff --git a/docs/guide/table/examples/TableExample.vue b/docs/components/table/examples/TableExample.vue similarity index 100% rename from docs/guide/table/examples/TableExample.vue rename to docs/components/table/examples/TableExample.vue diff --git a/docs/guide/table/table.md b/docs/components/table/table.md similarity index 100% rename from docs/guide/table/table.md rename to docs/components/table/table.md diff --git a/docs/guide/tabs/examples/TabsDefaultExample.vue b/docs/components/tabs/examples/TabsDefaultExample.vue similarity index 100% rename from docs/guide/tabs/examples/TabsDefaultExample.vue rename to docs/components/tabs/examples/TabsDefaultExample.vue diff --git a/docs/guide/tabs/examples/TabsPillsExample.vue b/docs/components/tabs/examples/TabsPillsExample.vue similarity index 100% rename from docs/guide/tabs/examples/TabsPillsExample.vue rename to docs/components/tabs/examples/TabsPillsExample.vue diff --git a/docs/guide/tabs/examples/TabsUnderlineExample.vue b/docs/components/tabs/examples/TabsUnderlineExample.vue similarity index 100% rename from docs/guide/tabs/examples/TabsUnderlineExample.vue rename to docs/components/tabs/examples/TabsUnderlineExample.vue diff --git a/docs/guide/tabs/tabs.md b/docs/components/tabs/tabs.md similarity index 83% rename from docs/guide/tabs/tabs.md rename to docs/components/tabs/tabs.md index 648dd18..82ebd7a 100644 --- a/docs/guide/tabs/tabs.md +++ b/docs/components/tabs/tabs.md @@ -6,7 +6,15 @@ import TabsUnderlineExample from './examples/TabsUnderlineExample.vue'; # Tabs -reference: [https://flowbite.com/docs/components/tabs/](https://flowbite.com/docs/components/tabs/) +#### Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container + +--- + +:::tip +Original reference: [https://flowbite.com/docs/components/tabs/](https://flowbite.com/docs/components/tabs/) +::: + +The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite. ## Prop - variant (default) @@ -118,4 +126,4 @@ defineProps({ default: 'if', }, }) -``` \ No newline at end of file +``` diff --git a/docs/guide/timeline/examples/TimelineExample.vue b/docs/components/timeline/examples/TimelineExample.vue similarity index 100% rename from docs/guide/timeline/examples/TimelineExample.vue rename to docs/components/timeline/examples/TimelineExample.vue diff --git a/docs/guide/timeline/timeline.md b/docs/components/timeline/timeline.md similarity index 100% rename from docs/guide/timeline/timeline.md rename to docs/components/timeline/timeline.md diff --git a/docs/guide/toast/examples/ToastExample.vue b/docs/components/toast/examples/ToastExample.vue similarity index 100% rename from docs/guide/toast/examples/ToastExample.vue rename to docs/components/toast/examples/ToastExample.vue diff --git a/docs/guide/toast/toast.md b/docs/components/toast/toast.md similarity index 100% rename from docs/guide/toast/toast.md rename to docs/components/toast/toast.md diff --git a/docs/guide/tooltip/examples/TooltipExample.vue b/docs/components/tooltip/examples/TooltipExample.vue similarity index 100% rename from docs/guide/tooltip/examples/TooltipExample.vue rename to docs/components/tooltip/examples/TooltipExample.vue diff --git a/docs/guide/tooltip/tooltip.md b/docs/components/tooltip/tooltip.md similarity index 100% rename from docs/guide/tooltip/tooltip.md rename to docs/components/tooltip/tooltip.md