flowbite-svelte 0.44.7 → 0.44.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.env +2 -0
- package/.eslintrc.cjs +20 -0
- package/.github/ISSUE_TEMPLATE/bug_report.yml +33 -0
- package/.github/ISSUE_TEMPLATE/config.yml +5 -0
- package/.github/ISSUE_TEMPLATE/feature_request.md +17 -0
- package/.github/pull_request_template.md +71 -0
- package/.github/workflows/playwright-and-lint.yaml +47 -0
- package/.prettierignore +16 -0
- package/.prettierrc +9 -0
- package/CHANGELOG.md +3858 -0
- package/CONTRIBUTING.md +66 -0
- package/dist/bottom-nav/BottomNavItem.svelte +3 -1
- package/dist/bottom-nav/BottomNavItem.svelte.d.ts +2 -0
- package/dist/bottom-nav/BottomNavItem.svelte.d.ts.map +1 -1
- package/dist/carousels/Carousel.svelte +52 -153
- package/dist/carousels/Carousel.svelte.d.ts +22 -37
- package/dist/carousels/Carousel.svelte.d.ts.map +1 -1
- package/dist/carousels/ControlButton.svelte +31 -0
- package/dist/carousels/ControlButton.svelte.d.ts +29 -0
- package/dist/carousels/ControlButton.svelte.d.ts.map +1 -0
- package/dist/carousels/Controls.svelte +17 -0
- package/dist/carousels/Controls.svelte.d.ts +23 -0
- package/dist/carousels/Controls.svelte.d.ts.map +1 -0
- package/dist/carousels/Indicators.svelte +26 -0
- package/dist/carousels/Indicators.svelte.d.ts +32 -0
- package/dist/carousels/Indicators.svelte.d.ts.map +1 -0
- package/dist/carousels/Thumbnail.svelte +6 -23
- package/dist/carousels/Thumbnail.svelte.d.ts +5 -16
- package/dist/carousels/Thumbnail.svelte.d.ts.map +1 -1
- package/dist/carousels/Thumbnails.svelte +26 -0
- package/dist/carousels/Thumbnails.svelte.d.ts +33 -0
- package/dist/carousels/Thumbnails.svelte.d.ts.map +1 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -1
- package/dist/tables/TableSearch.svelte +2 -2
- package/dist/tables/TableSearch.svelte.d.ts +1 -1
- package/mdsvex.config.js +18 -0
- package/package.json +18 -80
- package/playwright.config.ts +12 -0
- package/postcss.config.cjs +12 -0
- package/src/app.css +45 -0
- package/src/app.d.ts +9 -0
- package/src/app.html +28 -0
- package/src/app.postcss +55 -0
- package/src/hooks.server.js +27 -0
- package/src/lib/accordion/Accordion.svelte +61 -0
- package/src/lib/accordion/AccordionItem.svelte +120 -0
- package/src/lib/alerts/Alert.svelte +60 -0
- package/src/lib/avatar/Avatar.svelte +56 -0
- package/src/lib/avatar/Placeholder.svelte +16 -0
- package/src/lib/badges/Badge.svelte +108 -0
- package/src/lib/banner/Banner.svelte +64 -0
- package/src/lib/bottom-nav/BottomNav.svelte +76 -0
- package/src/lib/bottom-nav/BottomNavHeader.svelte +19 -0
- package/src/lib/bottom-nav/BottomNavHeaderItem.svelte +23 -0
- package/src/lib/bottom-nav/BottomNavItem.svelte +76 -0
- package/src/lib/breadcrumbs/Breadcrumb.svelte +25 -0
- package/src/lib/breadcrumbs/BreadcrumbItem.svelte +51 -0
- package/src/lib/buttongroups/ButtonGroup.svelte +22 -0
- package/src/lib/buttons/Button.svelte +100 -0
- package/src/lib/buttons/GradientButton.svelte +79 -0
- package/src/lib/cards/Card.svelte +70 -0
- package/src/lib/carousels/Carousel.svelte +166 -0
- package/src/lib/carousels/ControlButton.svelte +34 -0
- package/src/lib/carousels/Controls.svelte +21 -0
- package/src/lib/carousels/Indicators.svelte +31 -0
- package/src/lib/carousels/Thumbnail.svelte +20 -0
- package/src/lib/carousels/Thumbnails.svelte +30 -0
- package/src/lib/charts/Chart.svelte +35 -0
- package/src/lib/darkmode/DarkMode.svelte +58 -0
- package/src/lib/datepicker/Calender.svelte +3 -0
- package/src/lib/datepicker/Datepicker.svelte +66 -0
- package/src/lib/device-mockup/Android.svelte +24 -0
- package/src/lib/device-mockup/DefaultMockup.svelte +21 -0
- package/src/lib/device-mockup/DeviceMockup.svelte +235 -0
- package/src/lib/device-mockup/Ios.svelte +21 -0
- package/src/lib/device-mockup/Smartwatch.svelte +15 -0
- package/src/lib/device-mockup/Tablet.svelte +21 -0
- package/src/lib/drawer/Drawer.svelte +87 -0
- package/src/lib/dropdowns/Dropdown.svelte +81 -0
- package/src/lib/dropdowns/DropdownDivider.svelte +13 -0
- package/src/lib/dropdowns/DropdownHeader.svelte +21 -0
- package/src/lib/dropdowns/DropdownItem.svelte +47 -0
- package/src/lib/footer/Footer.svelte +18 -0
- package/src/lib/footer/FooterBrand.svelte +39 -0
- package/src/lib/footer/FooterCopyright.svelte +38 -0
- package/src/lib/footer/FooterIcon.svelte +25 -0
- package/src/lib/footer/FooterLink.svelte +26 -0
- package/src/lib/footer/FooterLinkGroup.svelte +15 -0
- package/src/lib/forms/Checkbox.svelte +70 -0
- package/src/lib/forms/Dropzone.svelte +32 -0
- package/src/lib/forms/Fileupload.svelte +21 -0
- package/src/lib/forms/FloatingLabelInput.svelte +94 -0
- package/src/lib/forms/Helper.svelte +23 -0
- package/src/lib/forms/Input.svelte +83 -0
- package/src/lib/forms/InputAddon.svelte +47 -0
- package/src/lib/forms/Label.svelte +40 -0
- package/src/lib/forms/MultiSelect.svelte +126 -0
- package/src/lib/forms/NumberInput.svelte +16 -0
- package/src/lib/forms/Radio.svelte +53 -0
- package/src/lib/forms/RadioInline.svelte +9 -0
- package/src/lib/forms/Range.svelte +24 -0
- package/src/lib/forms/Search.svelte +44 -0
- package/src/lib/forms/Select.svelte +49 -0
- package/src/lib/forms/Textarea.svelte +51 -0
- package/src/lib/forms/Toggle.svelte +56 -0
- package/src/lib/forms/VoiceSearch.svelte +57 -0
- package/src/lib/gallery/Gallery.svelte +31 -0
- package/src/lib/index.ts +228 -0
- package/src/lib/indicators/Indicator.svelte +86 -0
- package/src/lib/kbd/ArrowKeyDown.svelte +15 -0
- package/src/lib/kbd/ArrowKeyLeft.svelte +15 -0
- package/src/lib/kbd/ArrowKeyRight.svelte +15 -0
- package/src/lib/kbd/ArrowKeyUp.svelte +15 -0
- package/src/lib/kbd/Kbd.svelte +15 -0
- package/src/lib/list-group/Listgroup.svelte +45 -0
- package/src/lib/list-group/ListgroupItem.svelte +57 -0
- package/src/lib/megamenu/MegaMenu.svelte +52 -0
- package/src/lib/modals/Modal.svelte +162 -0
- package/src/lib/navbar/Menu.svelte +38 -0
- package/src/lib/navbar/NavBrand.svelte +15 -0
- package/src/lib/navbar/NavHamburger.svelte +20 -0
- package/src/lib/navbar/NavLi.svelte +37 -0
- package/src/lib/navbar/NavSidebarHamburger.svelte +20 -0
- package/src/lib/navbar/NavUl.svelte +68 -0
- package/src/lib/navbar/Navbar.svelte +42 -0
- package/src/lib/navbar/SidebarMenu.svelte +37 -0
- package/src/lib/paginations/Pagination.svelte +59 -0
- package/src/lib/paginations/PaginationItem.svelte +40 -0
- package/src/lib/popover/Popover.svelte +34 -0
- package/src/lib/progressbars/Progressbar.svelte +52 -0
- package/src/lib/ratings/AdvancedRating.svelte +45 -0
- package/src/lib/ratings/Heart.svelte +39 -0
- package/src/lib/ratings/Rating.svelte +57 -0
- package/src/lib/ratings/RatingComment.svelte +85 -0
- package/src/lib/ratings/Review.svelte +78 -0
- package/src/lib/ratings/ScoreRating.svelte +76 -0
- package/src/lib/ratings/Star.svelte +47 -0
- package/src/lib/ratings/Thumbup.svelte +39 -0
- package/src/lib/sidebars/Sidebar.svelte +40 -0
- package/src/lib/sidebars/SidebarBrand.svelte +24 -0
- package/src/lib/sidebars/SidebarCta.svelte +28 -0
- package/src/lib/sidebars/SidebarDropdownItem.svelte +26 -0
- package/src/lib/sidebars/SidebarDropdownWrapper.svelte +71 -0
- package/src/lib/sidebars/SidebarGroup.svelte +24 -0
- package/src/lib/sidebars/SidebarItem.svelte +49 -0
- package/src/lib/sidebars/SidebarWrapper.svelte +16 -0
- package/src/lib/skeleton/CardPlaceholder.svelte +48 -0
- package/src/lib/skeleton/ImagePlaceholder.svelte +31 -0
- package/src/lib/skeleton/ListPlaceholder.svelte +50 -0
- package/src/lib/skeleton/Skeleton.svelte +38 -0
- package/src/lib/skeleton/TestimonialPlaceholder.svelte +24 -0
- package/src/lib/skeleton/TextPlaceholder.svelte +60 -0
- package/src/lib/skeleton/VideoPlaceholder.svelte +33 -0
- package/src/lib/skeleton/WidgetPlaceholder.svelte +26 -0
- package/src/lib/speed-dial/SpeedDial.svelte +80 -0
- package/src/lib/speed-dial/SpeedDialButton.svelte +49 -0
- package/src/lib/spinners/Spinner.svelte +49 -0
- package/src/lib/steps/StepIndicator.svelte +75 -0
- package/src/lib/tables/Table.svelte +49 -0
- package/src/lib/tables/TableBody.svelte +14 -0
- package/src/lib/tables/TableBodyCell.svelte +22 -0
- package/src/lib/tables/TableBodyRow.svelte +50 -0
- package/src/lib/tables/TableHead.svelte +45 -0
- package/src/lib/tables/TableHeadCell.svelte +15 -0
- package/src/lib/tables/TableSearch.svelte +73 -0
- package/src/lib/tabs/TabItem.svelte +61 -0
- package/src/lib/tabs/Tabs.svelte +78 -0
- package/src/lib/timeline/Activity.svelte +16 -0
- package/src/lib/timeline/ActivityItem.svelte +59 -0
- package/src/lib/timeline/Group.svelte +27 -0
- package/src/lib/timeline/GroupItem.svelte +59 -0
- package/src/lib/timeline/Timeline.svelte +25 -0
- package/src/lib/timeline/TimelineHorizontal.svelte +17 -0
- package/src/lib/timeline/TimelineItem.svelte +116 -0
- package/src/lib/timeline/TimelineItemHorizontal.svelte +72 -0
- package/src/lib/timeline/TimelineItemVertical.svelte +44 -0
- package/src/lib/toasts/Toast.svelte +99 -0
- package/src/lib/toolbar/Toolbar.svelte +52 -0
- package/src/lib/toolbar/ToolbarButton.svelte +67 -0
- package/src/lib/toolbar/ToolbarGroup.svelte +20 -0
- package/src/lib/tooltips/Tooltip.svelte +42 -0
- package/src/lib/types.ts +163 -0
- package/src/lib/typography/A.svelte +20 -0
- package/src/lib/typography/Blockquote.svelte +51 -0
- package/src/lib/typography/DescriptionList.svelte +22 -0
- package/src/lib/typography/Heading.svelte +28 -0
- package/src/lib/typography/Hr.svelte +37 -0
- package/src/lib/typography/Img.svelte +39 -0
- package/src/lib/typography/Layout.svelte +21 -0
- package/src/lib/typography/Li.svelte +19 -0
- package/src/lib/typography/List.svelte +33 -0
- package/src/lib/typography/Mark.svelte +20 -0
- package/src/lib/typography/P.svelte +102 -0
- package/src/lib/typography/Secondary.svelte +18 -0
- package/src/lib/typography/Span.svelte +35 -0
- package/src/lib/utils/CloseButton.svelte +19 -0
- package/src/lib/utils/Frame.svelte +142 -0
- package/src/lib/utils/Popper.svelte +206 -0
- package/src/lib/utils/Wrapper.svelte +22 -0
- package/src/lib/utils/backdrop.ts +101 -0
- package/src/lib/utils/clickOutside.ts +16 -0
- package/src/lib/utils/createEventDispatcher.ts +24 -0
- package/src/lib/utils/focusTrap.js +42 -0
- package/src/lib/utils/generateId.js +5 -0
- package/src/lib/video/Video.svelte +29 -0
- package/src/routes/+error.svelte +5 -0
- package/src/routes/+layout.svelte +98 -0
- package/src/routes/+page.server.ts +18 -0
- package/src/routes/+page.svelte +55 -0
- package/src/routes/api/posts/+server.js +7 -0
- package/src/routes/component-data/A.json +10 -0
- package/src/routes/component-data/Accordion.json +12 -0
- package/src/routes/component-data/AccordionItem.json +23 -0
- package/src/routes/component-data/Activity.json +1 -0
- package/src/routes/component-data/ActivityItem.json +16 -0
- package/src/routes/component-data/AdvancedRating.json +13 -0
- package/src/routes/component-data/Alert.json +9 -0
- package/src/routes/component-data/Android.json +12 -0
- package/src/routes/component-data/ArrowKeyDown.json +1 -0
- package/src/routes/component-data/ArrowKeyLeft.json +1 -0
- package/src/routes/component-data/ArrowKeyRight.json +1 -0
- package/src/routes/component-data/ArrowKeyUp.json +1 -0
- package/src/routes/component-data/Avatar.json +15 -0
- package/src/routes/component-data/Badge.json +10 -0
- package/src/routes/component-data/Banner.json +12 -0
- package/src/routes/component-data/Blockquote.json +15 -0
- package/src/routes/component-data/BottomNav.json +13 -0
- package/src/routes/component-data/BottomNavHeader.json +9 -0
- package/src/routes/component-data/BottomNavHeaderItem.json +11 -0
- package/src/routes/component-data/BottomNavItem.json +12 -0
- package/src/routes/component-data/Breadcrumb.json +11 -0
- package/src/routes/component-data/BreadcrumbItem.json +12 -0
- package/src/routes/component-data/Button.json +14 -0
- package/src/routes/component-data/ButtonGroup.json +9 -0
- package/src/routes/component-data/Calender.json +1 -0
- package/src/routes/component-data/Card.json +13 -0
- package/src/routes/component-data/CardPlaceholder.json +9 -0
- package/src/routes/component-data/Carousel.json +11 -0
- package/src/routes/component-data/Chart.json +1 -0
- package/src/routes/component-data/Checkbox.json +14 -0
- package/src/routes/component-data/CloseButton.json +1 -0
- package/src/routes/component-data/ControlButton.json +9 -0
- package/src/routes/component-data/Controls.json +1 -0
- package/src/routes/component-data/DarkMode.json +9 -0
- package/src/routes/component-data/Datepicker.json +14 -0
- package/src/routes/component-data/DefaultMockup.json +11 -0
- package/src/routes/component-data/DescriptionList.json +10 -0
- package/src/routes/component-data/DeviceMockup.json +50 -0
- package/src/routes/component-data/Drawer.json +23 -0
- package/src/routes/component-data/Dropdown.json +13 -0
- package/src/routes/component-data/DropdownDivider.json +1 -0
- package/src/routes/component-data/DropdownHeader.json +9 -0
- package/src/routes/component-data/DropdownItem.json +10 -0
- package/src/routes/component-data/Dropzone.json +10 -0
- package/src/routes/component-data/Fileupload.json +10 -0
- package/src/routes/component-data/FloatingLabelInput.json +14 -0
- package/src/routes/component-data/Footer.json +1 -0
- package/src/routes/component-data/FooterBrand.json +15 -0
- package/src/routes/component-data/FooterCopyright.json +14 -0
- package/src/routes/component-data/FooterIcon.json +11 -0
- package/src/routes/component-data/FooterLink.json +11 -0
- package/src/routes/component-data/FooterLinkGroup.json +1 -0
- package/src/routes/component-data/Frame.json +18 -0
- package/src/routes/component-data/Gallery.json +9 -0
- package/src/routes/component-data/GradientButton.json +9 -0
- package/src/routes/component-data/Group.json +11 -0
- package/src/routes/component-data/GroupItem.json +13 -0
- package/src/routes/component-data/Heading.json +10 -0
- package/src/routes/component-data/Heart.json +14 -0
- package/src/routes/component-data/Helper.json +9 -0
- package/src/routes/component-data/Hr.json +13 -0
- package/src/routes/component-data/ImagePlaceholder.json +9 -0
- package/src/routes/component-data/Img.json +17 -0
- package/src/routes/component-data/Indicator.json +13 -0
- package/src/routes/component-data/Indicators.json +9 -0
- package/src/routes/component-data/Input.json +13 -0
- package/src/routes/component-data/InputAddon.json +1 -0
- package/src/routes/component-data/Ios.json +11 -0
- package/src/routes/component-data/Kbd.json +1 -0
- package/src/routes/component-data/Label.json +10 -0
- package/src/routes/component-data/Layout.json +10 -0
- package/src/routes/component-data/Li.json +9 -0
- package/src/routes/component-data/List.json +10 -0
- package/src/routes/component-data/ListPlaceholder.json +1 -0
- package/src/routes/component-data/Listgroup.json +10 -0
- package/src/routes/component-data/ListgroupItem.json +17 -0
- package/src/routes/component-data/Mark.json +10 -0
- package/src/routes/component-data/MegaMenu.json +11 -0
- package/src/routes/component-data/Menu.json +11 -0
- package/src/routes/component-data/Modal.json +17 -0
- package/src/routes/component-data/MultiSelect.json +11 -0
- package/src/routes/component-data/NavBrand.json +1 -0
- package/src/routes/component-data/NavHamburger.json +9 -0
- package/src/routes/component-data/NavLi.json +10 -0
- package/src/routes/component-data/NavSidebarHamburger.json +9 -0
- package/src/routes/component-data/NavUl.json +14 -0
- package/src/routes/component-data/Navbar.json +10 -0
- package/src/routes/component-data/NumberInput.json +1 -0
- package/src/routes/component-data/P.json +19 -0
- package/src/routes/component-data/Pagination.json +13 -0
- package/src/routes/component-data/PaginationItem.json +12 -0
- package/src/routes/component-data/Placeholder.json +1 -0
- package/src/routes/component-data/Popover.json +9 -0
- package/src/routes/component-data/Popper.json +17 -0
- package/src/routes/component-data/Progressbar.json +14 -0
- package/src/routes/component-data/Radio.json +13 -0
- package/src/routes/component-data/RadioInline.json +1 -0
- package/src/routes/component-data/Range.json +9 -0
- package/src/routes/component-data/Rating.json +14 -0
- package/src/routes/component-data/RatingComment.json +10 -0
- package/src/routes/component-data/Review.json +13 -0
- package/src/routes/component-data/ScoreRating.json +13 -0
- package/src/routes/component-data/Search.json +10 -0
- package/src/routes/component-data/Secondary.json +9 -0
- package/src/routes/component-data/Select.json +14 -0
- package/src/routes/component-data/Sidebar.json +11 -0
- package/src/routes/component-data/SidebarBrand.json +11 -0
- package/src/routes/component-data/SidebarCta.json +11 -0
- package/src/routes/component-data/SidebarDropdownItem.json +12 -0
- package/src/routes/component-data/SidebarDropdownWrapper.json +14 -0
- package/src/routes/component-data/SidebarGroup.json +10 -0
- package/src/routes/component-data/SidebarItem.json +12 -0
- package/src/routes/component-data/SidebarMenu.json +11 -0
- package/src/routes/component-data/SidebarWrapper.json +1 -0
- package/src/routes/component-data/Skeleton.json +9 -0
- package/src/routes/component-data/Smartwatch.json +9 -0
- package/src/routes/component-data/Span.json +16 -0
- package/src/routes/component-data/SpeedDial.json +18 -0
- package/src/routes/component-data/SpeedDialButton.json +14 -0
- package/src/routes/component-data/Spinner.json +13 -0
- package/src/routes/component-data/Star.json +14 -0
- package/src/routes/component-data/StepIndicator.json +15 -0
- package/src/routes/component-data/TabItem.json +12 -0
- package/src/routes/component-data/Table.json +14 -0
- package/src/routes/component-data/TableBody.json +1 -0
- package/src/routes/component-data/TableBodyCell.json +1 -0
- package/src/routes/component-data/TableBodyRow.json +1 -0
- package/src/routes/component-data/TableHead.json +9 -0
- package/src/routes/component-data/TableHeadCell.json +1 -0
- package/src/routes/component-data/TableSearch.json +19 -0
- package/src/routes/component-data/Tablet.json +11 -0
- package/src/routes/component-data/Tabs.json +13 -0
- package/src/routes/component-data/TestimonialPlaceholder.json +1 -0
- package/src/routes/component-data/TextPlaceholder.json +9 -0
- package/src/routes/component-data/Textarea.json +11 -0
- package/src/routes/component-data/Thumbnail.json +10 -0
- package/src/routes/component-data/Thumbnails.json +9 -0
- package/src/routes/component-data/Thumbup.json +14 -0
- package/src/routes/component-data/Timeline.json +1 -0
- package/src/routes/component-data/TimelineHorizontal.json +1 -0
- package/src/routes/component-data/TimelineItem.json +10 -0
- package/src/routes/component-data/TimelineItemHorizontal.json +19 -0
- package/src/routes/component-data/TimelineItemVertical.json +13 -0
- package/src/routes/component-data/Toast.json +15 -0
- package/src/routes/component-data/Toggle.json +12 -0
- package/src/routes/component-data/Toolbar.json +9 -0
- package/src/routes/component-data/ToolbarButton.json +12 -0
- package/src/routes/component-data/ToolbarGroup.json +1 -0
- package/src/routes/component-data/Tooltip.json +9 -0
- package/src/routes/component-data/Video.json +12 -0
- package/src/routes/component-data/VideoPlaceholder.json +9 -0
- package/src/routes/component-data/VoiceSearch.json +16 -0
- package/src/routes/component-data/WidgetPlaceholder.json +1 -0
- package/src/routes/component-data/Wrapper.json +10 -0
- package/src/routes/component-data/backdrop.json +9 -0
- package/src/routes/component-data/clickOutside.json +1 -0
- package/src/routes/component-data/createEventDispatcher.json +1 -0
- package/src/routes/component-data/focusTrap.json +1 -0
- package/src/routes/component-data/generateId.json +1 -0
- package/src/routes/component-data/index.json +1 -0
- package/src/routes/component-data/types.json +1 -0
- package/src/routes/docs/+layout.js +10 -0
- package/src/routes/docs/+layout.svelte +74 -0
- package/src/routes/docs/components/[slug]/+page.js +13 -0
- package/src/routes/docs/components/[slug]/+page.svelte +6 -0
- package/src/routes/docs/components/accordion.md +315 -0
- package/src/routes/docs/components/alert.md +342 -0
- package/src/routes/docs/components/avatar.md +215 -0
- package/src/routes/docs/components/badge.md +269 -0
- package/src/routes/docs/components/banner.md +166 -0
- package/src/routes/docs/components/bottom-navigation.md +397 -0
- package/src/routes/docs/components/breadcrumb.md +112 -0
- package/src/routes/docs/components/button-group.md +198 -0
- package/src/routes/docs/components/button.md +314 -0
- package/src/routes/docs/components/card.md +423 -0
- package/src/routes/docs/components/carousel.md +242 -0
- package/src/routes/docs/components/darkmode.md +111 -0
- package/src/routes/docs/components/device-mockups.md +212 -0
- package/src/routes/docs/components/drawer.md +638 -0
- package/src/routes/docs/components/dropdown.md +748 -0
- package/src/routes/docs/components/footer.md +268 -0
- package/src/routes/docs/components/forms.md +254 -0
- package/src/routes/docs/components/gallery.md +230 -0
- package/src/routes/docs/components/imageData/+server.js +43 -0
- package/src/routes/docs/components/indicators.md +273 -0
- package/src/routes/docs/components/kbd.md +248 -0
- package/src/routes/docs/components/list-group.md +157 -0
- package/src/routes/docs/components/mega-menu.md +298 -0
- package/src/routes/docs/components/modal.md +413 -0
- package/src/routes/docs/components/navbar.md +342 -0
- package/src/routes/docs/components/pagination.md +350 -0
- package/src/routes/docs/components/popover.md +388 -0
- package/src/routes/docs/components/progress.md +170 -0
- package/src/routes/docs/components/rating.md +326 -0
- package/src/routes/docs/components/sidebar.md +568 -0
- package/src/routes/docs/components/skeleton.md +165 -0
- package/src/routes/docs/components/speed-dial.md +523 -0
- package/src/routes/docs/components/spinner.md +117 -0
- package/src/routes/docs/components/tab.md +341 -0
- package/src/routes/docs/components/table.md +871 -0
- package/src/routes/docs/components/timeline.md +267 -0
- package/src/routes/docs/components/toast.md +362 -0
- package/src/routes/docs/components/tooltip.md +156 -0
- package/src/routes/docs/components/typography.md +158 -0
- package/src/routes/docs/components/video.md +125 -0
- package/src/routes/docs/examples/[slug]/+page.js +13 -0
- package/src/routes/docs/examples/[slug]/+page.svelte +6 -0
- package/src/routes/docs/examples/sidebar-layout.md +20 -0
- package/src/routes/docs/examples/snapshot.md +59 -0
- package/src/routes/docs/examples/testsnap.svelte +49 -0
- package/src/routes/docs/experimental/[slug]/+page.js +13 -0
- package/src/routes/docs/experimental/[slug]/+page.svelte +6 -0
- package/src/routes/docs/experimental/datepicker.md +131 -0
- package/src/routes/docs/extend/CheckCircle.svelte +3 -0
- package/src/routes/docs/extend/[slug]/+page.js +13 -0
- package/src/routes/docs/extend/[slug]/+page.svelte +6 -0
- package/src/routes/docs/extend/flowbite-svelte-blocks.md +28 -0
- package/src/routes/docs/extend/flowbite-svelte-starter.md +34 -0
- package/src/routes/docs/extend/icons.md +204 -0
- package/src/routes/docs/extend/step-indicator.md +162 -0
- package/src/routes/docs/forms/[slug]/+page.js +13 -0
- package/src/routes/docs/forms/[slug]/+page.svelte +6 -0
- package/src/routes/docs/forms/checkbox.md +329 -0
- package/src/routes/docs/forms/file-input.md +171 -0
- package/src/routes/docs/forms/floating-label.md +176 -0
- package/src/routes/docs/forms/input-field.md +398 -0
- package/src/routes/docs/forms/radio.md +303 -0
- package/src/routes/docs/forms/range.md +110 -0
- package/src/routes/docs/forms/search-input.md +133 -0
- package/src/routes/docs/forms/select.md +280 -0
- package/src/routes/docs/forms/textarea.md +142 -0
- package/src/routes/docs/forms/toggle.md +86 -0
- package/src/routes/docs/pages/[slug]/+page.js +13 -0
- package/src/routes/docs/pages/[slug]/+page.svelte +6 -0
- package/src/routes/docs/pages/colors.md +152 -0
- package/src/routes/docs/pages/compiler-speed.md +116 -0
- package/src/routes/docs/pages/customization.md +103 -0
- package/src/routes/docs/pages/how-to-contribute.md +138 -0
- package/src/routes/docs/pages/ide-support.md +19 -0
- package/src/routes/docs/pages/introduction.md +131 -0
- package/src/routes/docs/pages/license.md +22 -0
- package/src/routes/docs/pages/quickstart.md +128 -0
- package/src/routes/docs/pages/typescript.md +25 -0
- package/src/routes/docs/plugins/[slug]/+page.js +13 -0
- package/src/routes/docs/plugins/[slug]/+page.svelte +6 -0
- package/src/routes/docs/plugins/charts.md +990 -0
- package/src/routes/docs/typography/[slug]/+page.js +13 -0
- package/src/routes/docs/typography/[slug]/+page.svelte +6 -0
- package/src/routes/docs/typography/blockquote.md +214 -0
- package/src/routes/docs/typography/heading.md +270 -0
- package/src/routes/docs/typography/hr.md +115 -0
- package/src/routes/docs/typography/image.md +244 -0
- package/src/routes/docs/typography/link.md +147 -0
- package/src/routes/docs/typography/list.md +358 -0
- package/src/routes/docs/typography/paragraph.md +265 -0
- package/src/routes/docs/typography/text.md +340 -0
- package/src/routes/docs/utilities/[slug]/+page.js +13 -0
- package/src/routes/docs/utilities/[slug]/+page.svelte +6 -0
- package/src/routes/docs/utilities/close-button.md +42 -0
- package/src/routes/docs/utilities/label.md +41 -0
- package/src/routes/docs/utilities/toolbar.md +157 -0
- package/src/routes/landing/CTA.svelte +98 -0
- package/src/routes/landing/Components.svelte +42 -0
- package/src/routes/landing/Contributors.svelte +55 -0
- package/src/routes/landing/DesignFigma.svelte +39 -0
- package/src/routes/landing/Featured.svelte +33 -0
- package/src/routes/landing/GetStarted.svelte +23 -0
- package/src/routes/landing/Hero.svelte +38 -0
- package/src/routes/landing/SocialProof.svelte +80 -0
- package/src/routes/landing/utils/A.svelte +5 -0
- package/src/routes/landing/utils/H2.svelte +1 -0
- package/src/routes/landing/utils/Row.svelte +16 -0
- package/src/routes/landing/utils/Section.svelte +9 -0
- package/src/routes/layouts/component/+page.svelte +44 -0
- package/src/routes/layouts/component/Anchor.svelte +29 -0
- package/src/routes/layouts/component/code.svelte +1 -0
- package/src/routes/layouts/component/h1.svelte +0 -0
- package/src/routes/layouts/component/h2.svelte +5 -0
- package/src/routes/layouts/component/h3.svelte +5 -0
- package/src/routes/layouts/testLayout/+page.svelte +5 -0
- package/src/routes/utils/AlgoliaSearch.svelte +22 -0
- package/src/routes/utils/CompoAttributesViewer.svelte +78 -0
- package/src/routes/utils/CompoCard.svelte +36 -0
- package/src/routes/utils/CompoDescription.svelte +7 -0
- package/src/routes/utils/CopyCliboardInput.svelte +45 -0
- package/src/routes/utils/DocBadge.svelte +7 -0
- package/src/routes/utils/DocBadgeList.svelte +10 -0
- package/src/routes/utils/ExampleDarkMode.svelte +16 -0
- package/src/routes/utils/ExampleWrapper.svelte +143 -0
- package/src/routes/utils/Footer.svelte +64 -0
- package/src/routes/utils/GitHubSource.svelte +13 -0
- package/src/routes/utils/GitHubSourceList.svelte +21 -0
- package/src/routes/utils/MetaTag.svelte +42 -0
- package/src/routes/utils/Newsletter.svelte +52 -0
- package/src/routes/utils/PageHeadSection.svelte +20 -0
- package/src/routes/utils/Paging.svelte +60 -0
- package/src/routes/utils/TableDefaultRow.svelte +81 -0
- package/src/routes/utils/TableProp.svelte +41 -0
- package/src/routes/utils/Toc.svelte +55 -0
- package/src/routes/utils/ToolbarLink.svelte +12 -0
- package/src/routes/utils/data.json +48 -0
- package/src/routes/utils/icons/Angular.svelte +3 -0
- package/src/routes/utils/icons/ArrowLeft.svelte +3 -0
- package/src/routes/utils/icons/ArrowRight.svelte +3 -0
- package/src/routes/utils/icons/Check.svelte +3 -0
- package/src/routes/utils/icons/China.svelte +9 -0
- package/src/routes/utils/icons/Clipboard.svelte +3 -0
- package/src/routes/utils/icons/CoinbaseWallet.svelte +4 -0
- package/src/routes/utils/icons/Combinator.svelte +35 -0
- package/src/routes/utils/icons/Community.svelte +5 -0
- package/src/routes/utils/icons/Dev.svelte +9 -0
- package/src/routes/utils/icons/Discord.svelte +5 -0
- package/src/routes/utils/icons/Dribble.svelte +3 -0
- package/src/routes/utils/icons/Figma.svelte +14 -0
- package/src/routes/utils/icons/FlowbiteLogo.svelte +49 -0
- package/src/routes/utils/icons/Fortmatic.svelte +4 -0
- package/src/routes/utils/icons/Germany.svelte +5 -0
- package/src/routes/utils/icons/GitHub.svelte +13 -0
- package/src/routes/utils/icons/Hunt.svelte +17 -0
- package/src/routes/utils/icons/Italy.svelte +7 -0
- package/src/routes/utils/icons/Mail.svelte +4 -0
- package/src/routes/utils/icons/MetaMask.svelte +31 -0
- package/src/routes/utils/icons/Moon.svelte +3 -0
- package/src/routes/utils/icons/Npm.svelte +3 -0
- package/src/routes/utils/icons/OperaWallet.svelte +17 -0
- package/src/routes/utils/icons/Quote.svelte +3 -0
- package/src/routes/utils/icons/React.svelte +4 -0
- package/src/routes/utils/icons/Reddit.svelte +23 -0
- package/src/routes/utils/icons/Sun.svelte +7 -0
- package/src/routes/utils/icons/Usa.svelte +31 -0
- package/src/routes/utils/icons/Vue.svelte +3 -0
- package/src/routes/utils/icons/WalletConnect.svelte +18 -0
- package/src/routes/utils/icons/YouTube.svelte +3 -0
- package/src/routes/utils/icons/YouTubeFull.svelte +17 -0
- package/src/routes/utils/index.ts +146 -0
- package/src/routes/utils/mdsvex.d.ts +8 -0
- package/static/images/alert-prop.png +0 -0
- package/static/images/carousel/cosmic-timetraveler-pYyOZ8q7AII-unsplash.webp +0 -0
- package/static/images/carousel/cristina-gottardi-CSpjU6hYo_0-unsplash.webp +0 -0
- package/static/images/carousel/johannes-plenio-RwHv7LgeC7s-unsplash.webp +0 -0
- package/static/images/carousel/jonatan-pie-3l3RwQdHRHg-unsplash.webp +0 -0
- package/static/images/carousel/mark-harpur-K2s_YE031CA-unsplash.webp +0 -0
- package/static/images/carousel/pietro-de-grandi-T7K4aEPoGGk-unsplash.webp +0 -0
- package/static/images/carousel/sergey-pesterev-tMvuB9se2uQ-unsplash.webp +0 -0
- package/static/images/carousel/solotravelgoals-7kLufxYoqWk-unsplash.webp +0 -0
- package/static/images/carousel-1.svg +4 -0
- package/static/images/carousel-2.svg +4 -0
- package/static/images/carousel-3.svg +4 -0
- package/static/images/carousel-4.svg +4 -0
- package/static/images/carousel-5.svg +4 -0
- package/static/images/code-example-dark.png +0 -0
- package/static/images/code-example.png +0 -0
- package/static/images/colors.webp +0 -0
- package/static/images/components/accordion-dark.svg +40 -0
- package/static/images/components/accordion.svg +40 -0
- package/static/images/components/alert-dark.svg +11 -0
- package/static/images/components/alert.svg +11 -0
- package/static/images/components/avatar-dark.svg +117 -0
- package/static/images/components/avatar.svg +117 -0
- package/static/images/components/badge-dark.svg +5 -0
- package/static/images/components/badge.svg +5 -0
- package/static/images/components/banner-dark.svg +34 -0
- package/static/images/components/banner.svg +33 -0
- package/static/images/components/bottom-navigation-dark.svg +44 -0
- package/static/images/components/bottom-navigation.svg +43 -0
- package/static/images/components/breadcrumb-dark.svg +7 -0
- package/static/images/components/breadcrumb.svg +7 -0
- package/static/images/components/button-dark.svg +10 -0
- package/static/images/components/button-group-dark.svg +10 -0
- package/static/images/components/button-group.svg +10 -0
- package/static/images/components/button.svg +10 -0
- package/static/images/components/card-dark.svg +31 -0
- package/static/images/components/card.svg +32 -0
- package/static/images/components/carousel-dark.svg +13 -0
- package/static/images/components/carousel.svg +13 -0
- package/static/images/components/charts-dark.svg +29 -0
- package/static/images/components/charts.svg +29 -0
- package/static/images/components/darkmode-dark.svg +7 -0
- package/static/images/components/darkmode.svg +3 -0
- package/static/images/components/device-mockups-dark.svg +17 -0
- package/static/images/components/device-mockups.svg +17 -0
- package/static/images/components/drawer-dark.svg +32 -0
- package/static/images/components/drawer.svg +32 -0
- package/static/images/components/dropdown-dark.svg +35 -0
- package/static/images/components/dropdown.svg +35 -0
- package/static/images/components/footer-dark.svg +52 -0
- package/static/images/components/footer.svg +50 -0
- package/static/images/components/forms-dark.svg +64 -0
- package/static/images/components/forms.svg +64 -0
- package/static/images/components/gallery-dark.svg +14 -0
- package/static/images/components/gallery.svg +14 -0
- package/static/images/components/indicators-dark.svg +38 -0
- package/static/images/components/indicators.svg +38 -0
- package/static/images/components/jumbotron-dark.svg +13 -0
- package/static/images/components/jumbotron.svg +13 -0
- package/static/images/components/kbd-dark.svg +460 -0
- package/static/images/components/kbd.svg +462 -0
- package/static/images/components/list-group-dark.svg +58 -0
- package/static/images/components/list-group.svg +58 -0
- package/static/images/components/mega-menu-dark.svg +71 -0
- package/static/images/components/mega-menu.svg +71 -0
- package/static/images/components/modal-dark.svg +32 -0
- package/static/images/components/modal.svg +33 -0
- package/static/images/components/navbar-dark.svg +78 -0
- package/static/images/components/navbar.svg +78 -0
- package/static/images/components/pagination-dark.svg +50 -0
- package/static/images/components/pagination.svg +50 -0
- package/static/images/components/popover-dark.svg +18 -0
- package/static/images/components/popover.svg +17 -0
- package/static/images/components/progress-dark.svg +10 -0
- package/static/images/components/progress.svg +10 -0
- package/static/images/components/rating-dark.svg +29 -0
- package/static/images/components/rating.svg +29 -0
- package/static/images/components/sidebar-dark.svg +17 -0
- package/static/images/components/sidebar.svg +18 -0
- package/static/images/components/skeleton-dark.svg +10 -0
- package/static/images/components/skeleton.svg +10 -0
- package/static/images/components/speed-dial-dark.svg +69 -0
- package/static/images/components/speed-dial.svg +69 -0
- package/static/images/components/spinner-dark.svg +6 -0
- package/static/images/components/spinner.svg +6 -0
- package/static/images/components/stepper-dark.svg +11 -0
- package/static/images/components/stepper.svg +10 -0
- package/static/images/components/tab-dark.svg +10 -0
- package/static/images/components/tab.svg +10 -0
- package/static/images/components/table-dark.svg +47 -0
- package/static/images/components/table.svg +47 -0
- package/static/images/components/timeline-dark.svg +20 -0
- package/static/images/components/timeline.svg +20 -0
- package/static/images/components/toast-dark.svg +49 -0
- package/static/images/components/toast.svg +49 -0
- package/static/images/components/tooltip-dark.svg +7 -0
- package/static/images/components/tooltip.svg +7 -0
- package/static/images/components/typography-dark.svg +13 -0
- package/static/images/components/typography.svg +13 -0
- package/static/images/components/video-dark.svg +4 -0
- package/static/images/components/video.svg +4 -0
- package/static/images/eugene.jpg +0 -0
- package/static/images/examples/content-gallery-3.png +0 -0
- package/static/images/examples/image-1.jpg +0 -0
- package/static/images/examples/image-1@2x.jpg +0 -0
- package/static/images/examples/image-2@2x.jpg +0 -0
- package/static/images/examples/image-3@2x.jpg +0 -0
- package/static/images/examples/image-4@2x.jpg +0 -0
- package/static/images/experimental/datepicker-dark.svg +67 -0
- package/static/images/experimental/datepicker.svg +67 -0
- package/static/images/favicon.png +0 -0
- package/static/images/favicon.svg +49 -0
- package/static/images/figma-dark.png +0 -0
- package/static/images/figma.png +0 -0
- package/static/images/flowbite-svelte-blocks-optimized.png +0 -0
- package/static/images/flowbite-svelte-icon-logo.svg +49 -0
- package/static/images/flowbite-svelte-icon.svg +49 -0
- package/static/images/flowbite-svelte-og-image.png +0 -0
- package/static/images/flowbite-svelte.png +0 -0
- package/static/images/forms/checkbox-dark.svg +14 -0
- package/static/images/forms/checkbox.svg +14 -0
- package/static/images/forms/file-input-dark.svg +59 -0
- package/static/images/forms/file-input.svg +46 -0
- package/static/images/forms/floating-label-dark.svg +11 -0
- package/static/images/forms/floating-label.svg +11 -0
- package/static/images/forms/input-field-dark.svg +65 -0
- package/static/images/forms/input-field.svg +66 -0
- package/static/images/forms/radio-dark.svg +14 -0
- package/static/images/forms/radio.svg +12 -0
- package/static/images/forms/range-dark.svg +38 -0
- package/static/images/forms/range.svg +38 -0
- package/static/images/forms/search-input-dark.svg +82 -0
- package/static/images/forms/search-input.svg +82 -0
- package/static/images/forms/select-dark.svg +64 -0
- package/static/images/forms/select.svg +64 -0
- package/static/images/forms/textarea-dark.svg +16 -0
- package/static/images/forms/textarea.svg +16 -0
- package/static/images/forms/toggle-dark.svg +12 -0
- package/static/images/forms/toggle.svg +12 -0
- package/static/images/gallery-dark.png +0 -0
- package/static/images/gallery.png +0 -0
- package/static/images/graphs-dark.png +0 -0
- package/static/images/graphs.png +0 -0
- package/static/images/image-1.jpeg +0 -0
- package/static/images/image-1.png +0 -0
- package/static/images/image-1.webp +0 -0
- package/static/images/image-2.jpeg +0 -0
- package/static/images/image-2.png +0 -0
- package/static/images/image-2.webp +0 -0
- package/static/images/image-4.jpeg +0 -0
- package/static/images/image-4.png +0 -0
- package/static/images/image-4.webp +0 -0
- package/static/images/italy.png +0 -0
- package/static/images/nature-1.jpeg +0 -0
- package/static/images/office1.webp +0 -0
- package/static/images/product-1.webp +0 -0
- package/static/images/profile-picture-1.webp +0 -0
- package/static/images/profile-picture-2.webp +0 -0
- package/static/images/profile-picture-3.webp +0 -0
- package/static/images/profile-picture-4.webp +0 -0
- package/static/images/profile-picture-5.webp +0 -0
- package/static/images/sveltekit-sidebar-layout-optimized.png +0 -0
- package/static/images/tailwind-code-dark.png +0 -0
- package/static/images/tailwind-code.png +0 -0
- package/static/images/typography/blockquote-dark.svg +8 -0
- package/static/images/typography/blockquote.svg +8 -0
- package/static/images/typography/heading-dark.svg +5 -0
- package/static/images/typography/heading.svg +5 -0
- package/static/images/typography/hr-dark.svg +7 -0
- package/static/images/typography/hr.svg +7 -0
- package/static/images/typography/image-dark.svg +6 -0
- package/static/images/typography/image.svg +6 -0
- package/static/images/typography/link-dark.svg +4 -0
- package/static/images/typography/link.svg +4 -0
- package/static/images/typography/list-dark.svg +26 -0
- package/static/images/typography/list.svg +26 -0
- package/static/images/typography/paragraph-dark.svg +13 -0
- package/static/images/typography/paragraph.svg +13 -0
- package/static/images/typography/text-dark.svg +11 -0
- package/static/images/typography/text.svg +11 -0
- package/static/site.webmanifest +12 -0
- package/static/styles/docs.css +537 -0
- package/static/videos/compo-doc.gif +0 -0
- package/static/videos/flowbite.mp4 +0 -0
- package/svelte.config.js +28 -0
- package/tailwind.config.cjs +89 -0
- package/tests/components.spec.ts +199 -0
- package/tests/examples.spec.ts +11 -0
- package/tests/extend.spec.ts +19 -0
- package/tests/forms.spec.ts +62 -0
- package/tests/page.spec.ts +46 -0
- package/tests/plugins.spec.ts +7 -0
- package/tests/redirect.spec.ts +175 -0
- package/tests/typography.spec.ts +52 -0
- package/tests/utilities.spec.ts +22 -0
- package/tsconfig.json +21 -0
- package/vite.config.ts +22 -0
- package/vite.config.ts.timestamp-1692816833518-844de2c3e2008.mjs +22 -0
- package/dist/carousels/Caption.svelte +0 -17
- package/dist/carousels/Caption.svelte.d.ts +0 -26
- package/dist/carousels/Caption.svelte.d.ts.map +0 -1
- package/dist/carousels/CarouselTransition.svelte +0 -174
- package/dist/carousels/CarouselTransition.svelte.d.ts +0 -68
- package/dist/carousels/CarouselTransition.svelte.d.ts.map +0 -1
- package/dist/carousels/Indicator.svelte +0 -20
- package/dist/carousels/Indicator.svelte.d.ts +0 -28
- package/dist/carousels/Indicator.svelte.d.ts.map +0 -1
- package/dist/carousels/Slide.svelte +0 -23
- package/dist/carousels/Slide.svelte.d.ts +0 -30
- package/dist/carousels/Slide.svelte.d.ts.map +0 -1
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: componentLayout
|
|
3
|
+
title: Svelte Dark Mode - Flowbite
|
|
4
|
+
breadcrumb_title: Svelte Dark mode
|
|
5
|
+
component_title: Dark mode
|
|
6
|
+
dir: Components
|
|
7
|
+
description: Learn how to configure and build a dark mode switcher for Flowbite using Tailwind CSS and start developing with the components from the library
|
|
8
|
+
thumnailSize: w-24
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
<script>
|
|
12
|
+
import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
|
|
13
|
+
import { P, A } from '$lib'
|
|
14
|
+
const components = 'DarkMode'
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
In Flowbite-Svelte, the `class` strategy is used to support toggling dark mode manually, so you should explicitly configure it in Talwind CSS:
|
|
18
|
+
|
|
19
|
+
```js example
|
|
20
|
+
// tailwind.config.cjs
|
|
21
|
+
const config = {
|
|
22
|
+
darkMode: 'class'
|
|
23
|
+
// ...
|
|
24
|
+
};
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Then you can use `dark:` prefixed classes to configure the styles applied when dark mode is enabled. For example, if you want to change the body background color from `bg-white` when dark mode is disabled to `bg-gray-800` when dark mode is enabled:
|
|
28
|
+
|
|
29
|
+
```svelte example hideOutput
|
|
30
|
+
<!-- src/app.html -->
|
|
31
|
+
<body class="bg-white dark:bg-gray-800">
|
|
32
|
+
<div>%svelte.body%</div>
|
|
33
|
+
</body>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Finally, use the dark mode component to display a switcher (that is a button) for users to toggle dark mode manually. The best place to put this component is in the root layout:
|
|
37
|
+
|
|
38
|
+
```svelte example
|
|
39
|
+
<!-- src/routes/+layout.svelte -->
|
|
40
|
+
<script>
|
|
41
|
+
import { DarkMode } from 'flowbite-svelte';
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<DarkMode />
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Initial theme
|
|
48
|
+
|
|
49
|
+
Use `class="dark"` to set the initial theme to the dark mode. The default mode is `light`.
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
<html class="dark" lang="en">
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Switcher style
|
|
56
|
+
|
|
57
|
+
Use the `btnClass` prop to overwrite the default classes:
|
|
58
|
+
|
|
59
|
+
```svelte example
|
|
60
|
+
<script>
|
|
61
|
+
import { DarkMode } from 'flowbite-svelte';
|
|
62
|
+
|
|
63
|
+
let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg text-xl p-2';
|
|
64
|
+
</script>
|
|
65
|
+
|
|
66
|
+
<DarkMode {btnClass} />
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Or just use `class` attribute to append classes to the default classes:
|
|
70
|
+
|
|
71
|
+
```svelte example
|
|
72
|
+
<script>
|
|
73
|
+
import { DarkMode } from 'flowbite-svelte';
|
|
74
|
+
</script>
|
|
75
|
+
|
|
76
|
+
<DarkMode class="text-2xl" />
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Mode icon
|
|
80
|
+
|
|
81
|
+
Use the `lightIcon` and `darkIcon` slots to change icons:
|
|
82
|
+
|
|
83
|
+
```svelte example
|
|
84
|
+
<script>
|
|
85
|
+
import { DarkMode } from 'flowbite-svelte';
|
|
86
|
+
import { SunSolid, MoonSolid } from 'flowbite-svelte-icons';
|
|
87
|
+
</script>
|
|
88
|
+
|
|
89
|
+
<DarkMode class="text-lg">
|
|
90
|
+
<svelte:fragment slot="lightIcon">
|
|
91
|
+
<SunSolid />
|
|
92
|
+
</svelte:fragment>
|
|
93
|
+
<svelte:fragment slot="darkIcon">
|
|
94
|
+
<MoonSolid />
|
|
95
|
+
</svelte:fragment>
|
|
96
|
+
</DarkMode>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Component data
|
|
100
|
+
|
|
101
|
+
The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
|
|
102
|
+
|
|
103
|
+
### DarkMode styling
|
|
104
|
+
|
|
105
|
+
- Use the `class` prop to overwrite `btnClass`.
|
|
106
|
+
|
|
107
|
+
<CompoAttributesViewer {components}/>
|
|
108
|
+
|
|
109
|
+
## References
|
|
110
|
+
|
|
111
|
+
- [Flowbite Dark Mode](https://flowbite.com/docs/customize/dark-mode/)
|
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: componentLayout
|
|
3
|
+
title: Svelte Device Mockups - Flowbite
|
|
4
|
+
breadcrumb_title: Svelte Device Mockups
|
|
5
|
+
component_title: Device Mockups
|
|
6
|
+
dir: Components
|
|
7
|
+
description: Use the device mockups component to add content and screenshot previews of your application inside phone and tablet frames coded with Tailwind CSS and Flowbite
|
|
8
|
+
thumnailSize: w-36
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
<script>
|
|
12
|
+
import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
|
|
13
|
+
import { P, A } from '$lib'
|
|
14
|
+
|
|
15
|
+
const components = 'DeviceMockup, DefaultMockup, Android, Ios, Smartwatch, Tablet'
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
The device mockup component can be used to feature a preview and screenshot of your application as if you would already use it on a mobile phone and it’s a great use case for hero and CTA sections.
|
|
19
|
+
|
|
20
|
+
This component is built using only the utility classes from Tailwind CSS and has built-in dark mode support so it’s easy to customize, it loads very fast and integrates perfectly with Tailwind CSS and Flowbite.
|
|
21
|
+
|
|
22
|
+
You can choose from multiple examples of mockups including phone, tablet, laptop, and even desktop devices with iOS or Android support.
|
|
23
|
+
|
|
24
|
+
## Setup
|
|
25
|
+
|
|
26
|
+
```svelte example hideOutput
|
|
27
|
+
<script>
|
|
28
|
+
import { DeviceMockup } from 'flowbite-svelte';
|
|
29
|
+
</script>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Default mockup
|
|
33
|
+
|
|
34
|
+
Use this example to show a standard phone mockup based on Tailwind CSS and add your app screenshot inside of it with dark mode support included.
|
|
35
|
+
|
|
36
|
+
```svelte example
|
|
37
|
+
<script>
|
|
38
|
+
import { DeviceMockup } from 'flowbite-svelte';
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<DeviceMockup>
|
|
42
|
+
<img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png" class="dark:hidden w-[272px] h-[572px]" alt="default example 1" />
|
|
43
|
+
<img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png" class="hidden dark:block w-[272px] h-[572px]" alt="default example 2" />
|
|
44
|
+
</DeviceMockup>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## iPhone 12 mockup (iOS)
|
|
48
|
+
|
|
49
|
+
Use this example to clearly show that the preview of your application is being used on an iPhone with iOS.
|
|
50
|
+
|
|
51
|
+
```svelte example
|
|
52
|
+
<script>
|
|
53
|
+
import { DeviceMockup } from 'flowbite-svelte';
|
|
54
|
+
</script>
|
|
55
|
+
|
|
56
|
+
<DeviceMockup device="ios">
|
|
57
|
+
<img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-2-light.png" class="dark:hidden w-[272px] h-[572px]" alt="ios example 1" />
|
|
58
|
+
<img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-2-dark.png" class="hidden dark:block w-[272px] h-[572px]" alt="ios example 2" />
|
|
59
|
+
</DeviceMockup>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Google Pixel mockup (Android)
|
|
63
|
+
|
|
64
|
+
Use this alternative phone mockup example if you want to feature previews for android gadgets.
|
|
65
|
+
|
|
66
|
+
```svelte example
|
|
67
|
+
<script>
|
|
68
|
+
import { DeviceMockup } from 'flowbite-svelte';
|
|
69
|
+
</script>
|
|
70
|
+
|
|
71
|
+
<DeviceMockup device="android">
|
|
72
|
+
<img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png" class="dark:hidden w-[272px] h-[572px]" alt="android example 1" />
|
|
73
|
+
<img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png" class="hidden dark:block w-[272px] h-[572px]" alt="android example 2" />
|
|
74
|
+
</DeviceMockup>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Tablet mockup
|
|
78
|
+
|
|
79
|
+
This component can be used to show an application preview inside of a responsive tablet mockup.
|
|
80
|
+
|
|
81
|
+
```svelte example
|
|
82
|
+
<script>
|
|
83
|
+
import { DeviceMockup } from 'flowbite-svelte';
|
|
84
|
+
</script>
|
|
85
|
+
|
|
86
|
+
<DeviceMockup device="tablet">
|
|
87
|
+
<img src="https://flowbite.s3.amazonaws.com/docs/device-mockups/tablet-mockup-image.png" class="dark:hidden h-[426px] md:h-[654px]" alt="tablet example 1" />
|
|
88
|
+
<img src="https://flowbite.s3.amazonaws.com/docs/device-mockups/tablet-mockup-image-dark.png" class="hidden dark:block h-[426px] md:h-[654px]" alt="tablet example 2" />
|
|
89
|
+
</DeviceMockup>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## Laptop mockup
|
|
93
|
+
|
|
94
|
+
This example can be used to show a screenshot of your application inside a laptop mockup.
|
|
95
|
+
|
|
96
|
+
```svelte example
|
|
97
|
+
<script>
|
|
98
|
+
import { DeviceMockup } from 'flowbite-svelte';
|
|
99
|
+
</script>
|
|
100
|
+
|
|
101
|
+
<DeviceMockup device="laptop">
|
|
102
|
+
<img src="https://flowbite.s3.amazonaws.com/docs/device-mockups/laptop-screen.png" class="dark:hidden h-[156px] md:h-[278px] w-full rounded-xl" alt="laptop example 1" />
|
|
103
|
+
<img src="https://flowbite.s3.amazonaws.com/docs/device-mockups/laptop-screen-dark.png" class="hidden dark:block h-[156px] md:h-[278px] w-full rounded-lg" alt="laptop example 2" />
|
|
104
|
+
</DeviceMockup>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## Desktop mockup
|
|
108
|
+
|
|
109
|
+
Use this example to show a preview of your applicaiton inside a desktop device such as an iMac.
|
|
110
|
+
|
|
111
|
+
```svelte example
|
|
112
|
+
<script>
|
|
113
|
+
import { DeviceMockup } from 'flowbite-svelte';
|
|
114
|
+
</script>
|
|
115
|
+
|
|
116
|
+
<DeviceMockup device="desktop">
|
|
117
|
+
<img src="https://flowbite.s3.amazonaws.com/docs/device-mockups/screen-image-imac.png" class="dark:hidden h-[140px] md:h-[262px] w-full rounded-xl" alt="desktop example 1" />
|
|
118
|
+
<img src="https://flowbite.s3.amazonaws.com/docs/device-mockups/screen-image-imac-dark.png" class="hidden dark:block h-[140px] md:h-[262px] w-full rounded-xl" alt="desktop example 2" />
|
|
119
|
+
</DeviceMockup>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## Smartwatch mockup
|
|
123
|
+
|
|
124
|
+
This component can be used to showcase applications built for smartwatches.
|
|
125
|
+
|
|
126
|
+
```svelte example
|
|
127
|
+
<script>
|
|
128
|
+
import { DeviceMockup } from 'flowbite-svelte';
|
|
129
|
+
</script>
|
|
130
|
+
|
|
131
|
+
<DeviceMockup device="smartwatch">
|
|
132
|
+
<img src="https://flowbite.s3.amazonaws.com/docs/device-mockups/watch-screen-image.png" class="dark:hidden h-[193px] w-[188px" alt="smartwatch example 1" />
|
|
133
|
+
<img src="https://flowbite.s3.amazonaws.com/docs/device-mockups/watch-screen-image-dark.png" class="hidden dark:block h-[193px] w-[188px]" alt="smartwatch example 2" />
|
|
134
|
+
</DeviceMockup>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
## Component data
|
|
138
|
+
|
|
139
|
+
The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
|
|
140
|
+
|
|
141
|
+
### DeviceMockup styling
|
|
142
|
+
|
|
143
|
+
- Use the `class` prop to overwrite the outer div class.
|
|
144
|
+
|
|
145
|
+
### DefaultMockup styling
|
|
146
|
+
|
|
147
|
+
- Use the `classDefaultDiv` prop to overwrite `defaultDiv`.
|
|
148
|
+
- Use the `classDefaultSlot` prop to overwrite `defaultSlot`.
|
|
149
|
+
- Use the `classDefaultTop` prop to overwrite `defaultTop`.
|
|
150
|
+
- Use the `classDefaultLeftTop` prop to overwrite `defaultLeftTop`.
|
|
151
|
+
- Use the `classDefaultLeftBot` prop to overwrite `defaultLeftBot`.
|
|
152
|
+
- Use the `classDefaultRight` prop to overwrite `defaultRight`.
|
|
153
|
+
|
|
154
|
+
### Android styling
|
|
155
|
+
|
|
156
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
157
|
+
- Use the `classAndroidSlot` prop to overwrite `androidSlot`.
|
|
158
|
+
- Use the `classAndroidTop` prop to overwrite `androidTop`.
|
|
159
|
+
- Use the `classAndroidLeftTop` prop to overwrite `androidLeftTop`.
|
|
160
|
+
- Use the `classAndroidLeftMid` prop to overwrite `androidLeftMid`.
|
|
161
|
+
- Use the `classAndroidLeftBot` prop to overwrite `androidLeftBot`.
|
|
162
|
+
- Use the `classAndroidRight` prop to overwrite `androidRight`.
|
|
163
|
+
|
|
164
|
+
### Desktop styling
|
|
165
|
+
|
|
166
|
+
- Use the classDesktopInner prop to overwrite desktopInner.
|
|
167
|
+
- Use the classDesktopBot prop to overwrite desktopBot.
|
|
168
|
+
- Use the classDesktopBotUnder prop to overwrite desktopBotUnder.
|
|
169
|
+
- Use the classDestopDiv prop to overwrite destopDiv.
|
|
170
|
+
- Use the classDesktopSlot prop to overwrite desktopSlot.
|
|
171
|
+
|
|
172
|
+
### Ios styling
|
|
173
|
+
|
|
174
|
+
- Use the `classIosDiv` prop to overwrite `iosDiv`.
|
|
175
|
+
- Use the `classIosSlot` prop to overwrite `iosSlot`.
|
|
176
|
+
- Use the `classIosTop` prop to overwrite `iosTop`.
|
|
177
|
+
- Use the `classIosLeftTop` prop to overwrite `iosLeftTop`.
|
|
178
|
+
- Use the `classIosLeftBot` prop to overwrite `iosLeftBot`.
|
|
179
|
+
- Use the `classIosRight` prop to overwrite `iosRight`.
|
|
180
|
+
|
|
181
|
+
### Laptop styling
|
|
182
|
+
|
|
183
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
184
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
185
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
186
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
187
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
188
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
189
|
+
|
|
190
|
+
### Smartwatch styling
|
|
191
|
+
|
|
192
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
193
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
194
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
195
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
196
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
197
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
198
|
+
|
|
199
|
+
### Tablet styling
|
|
200
|
+
|
|
201
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
202
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
203
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
204
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
205
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
206
|
+
- Use the `classAndroidDiv` prop to overwrite `androidDiv`.
|
|
207
|
+
|
|
208
|
+
<CompoAttributesViewer {components}/>
|
|
209
|
+
|
|
210
|
+
## References
|
|
211
|
+
|
|
212
|
+
- [Flowbite Device Mockup](https://flowbite.com/docs/components/device-mockups/)
|