diff --git a/README.md b/README.md index 056f3b8c4..ad63fac92 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,7 @@ - [Init functions](#init-functions) - [ESM and CJS](#esm-and-cjs) - [TypeScript](#typescript) + - [RTL support](#rtl-support) - [JavaScript Frameworks](#javascript-frameworks) - [Back-end Frameworks](#back-end-frameworks) - [Components](#components) @@ -91,13 +92,13 @@ The quickest way to get started working with Flowbite is to simply include the C Require the following minified stylesheet inside the `head` tag: ```html - + ``` And include the following javascript file before the end of the `body` tag: ```html - + ``` ### Bundled JavaScript @@ -195,7 +196,7 @@ const $modalElement = document.querySelector('#modalEl'); const modalOptions = { placement: 'bottom-right', backdrop: 'dynamic', - backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40', + backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40', onHide: () => { console.log('modal is hidden'); }, @@ -247,6 +248,10 @@ const modal: ModalInterface = new Modal($modalElement, modalOptions); Learn more about Flowbite and TypeScript in the [quickstart guide](https://flowbite.com/docs/getting-started/typescript/). +### RTL support + +All of the Flowbite UI components have native RTL support and you can easily set it up by using the `dir="rtl"` attribute on the HTML element. Read more about Flowbite and [RTL support here](https://flowbite.com/docs/customize/rtl/). + ### JavaScript Frameworks The awesome open-source community also built and currently maintains the following standalone libraries for React, Vue, Svelte, and Angular: diff --git a/config.yml b/config.yml index d1b646d26..d770bf808 100644 --- a/config.yml +++ b/config.yml @@ -5,7 +5,7 @@ enableInlineShortcodes: true params: homepage: "https://flowbite.com" - current_version: 2.0.0 + current_version: 2.1.0 authors: Themesberg social_image_path: /docs/images/og-image.png diff --git a/content/components/accordion.md b/content/components/accordion.md index 602d1ef09..80665afcc 100644 --- a/content/components/accordion.md +++ b/content/components/accordion.md @@ -6,8 +6,8 @@ group: components toc: true requires_js: true -previous: Optimization -previousLink: customize/optimization/ +previous: RTL (Right-To-Left) +previousLink: customize/rtl/ next: Alerts nextLink: components/alerts/ --- @@ -30,7 +30,7 @@ Use the `data-accordion="collapse"` to collapse every other child element when e {{< example id="default-accordion-example" github="components/accordion.md" show_dark=true >}}

-

-

@@ -267,9 +267,9 @@ Use the `data-accordion-icon` data attribute to optionally set an element to rot

- @@ -281,7 +281,7 @@ Use the `data-accordion-icon` data attribute to optionally set an element to rot

- - - - +
+ + + +
- -
-
Info
- +

Supercharge your hiring by taking advantage of our limited-time sale for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.

Learn more - Get access
@@ -66,9 +68,10 @@ You can also avoid the drawer flickering and hide it by default by applying the Use this example to show a navigational sidebar inside the drawer component. {{< example id="drawer-navigation-example" github="components/drawer.md" show_dark=true iframeHeight="640" iframeMaxHeight="640" skeletonPlaceholders=true >}} +
-
@@ -76,7 +79,7 @@ Use this example to show a navigational sidebar inside the drawer component.
Menu
-
-
Contact us
-
- +

info@company.com @@ -225,19 +229,20 @@ Use this example to show a contact form inside the drawer component. Use this example if you want to add form elements inside the drawer component including datepickers. {{< example id="drawer-form-example" github="components/drawer.md" show_dark=true iframeHeight="840" iframeMaxHeight="840" skeletonPlaceholders=true >}} +

-
-
New event
-
-
+
-
-
Left drawer
-
-
Right drawer
-
-
Top drawer
-

Supercharge your hiring by taking advantage of our limited-time sale for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.

- Learn more - Get access
@@ -393,26 +401,27 @@ Use this example to show the drawer on the top side of the page. Use this example to show the drawer on the bottom side of the page. {{< example id="drawer-placement-bottom-example" github="components/drawer.md" show_dark=true iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true >}} +
-
-
Bottom drawer
-

Supercharge your hiring by taking advantage of our limited-time sale for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.

- Learn more - Get access
@@ -427,9 +436,10 @@ By default, body scrolling is disabled when the drawer is visible, however, you This is an example where the body scrolling behaviour is disabled when the drawer is visible. {{< example id="drawer-disable-body-scrolling-example" github="components/drawer.md" show_dark=true iframeHeight="640" iframeMaxHeight="640" skeletonPlaceholders=true >}} +
-
@@ -437,7 +447,7 @@ This is an example where the body scrolling behaviour is disabled when the drawe
Menu
-
@@ -548,7 +559,7 @@ Get started with this example in order to enable body scrolling even if the draw
Menu
-
@@ -665,7 +677,7 @@ Use this example to enable the backdrop element by default.
Menu
-
@@ -776,7 +789,7 @@ Use the `data-drawer-backdrop="false"` data attribute to disable the backdrop el
Menu
-
@@ -892,7 +906,7 @@ Use the `data-drawer-edge-offset="bottom-[*px]"` data attribute where you can ap
-
Add widget
@@ -970,10 +984,10 @@ Use the `data-drawer-edge-offset="bottom-[*px]"` data attribute where you can ap For more drawer component examples you can check out the following resources from Flowbite Blocks: -- [CRUD read drawers](https://flowbite.com/blocks/application/crud-read-drawers/) -- [CRUD create drawers](https://flowbite.com/blocks/application/crud-create-drawers/) -- [CRUD update drawers](https://flowbite.com/blocks/application/crud-update-drawers/) -- [Application shell layouts](https://flowbite.com/blocks/application/shells/) +- [CRUD read drawers](https://flowbite.com/blocks/application/crud-read-drawers/) +- [CRUD create drawers](https://flowbite.com/blocks/application/crud-create-drawers/) +- [CRUD update drawers](https://flowbite.com/blocks/application/crud-update-drawers/) +- [Application shell layouts](https://flowbite.com/blocks/application/shells/) ## JavaScript behaviour @@ -1030,6 +1044,20 @@ Initialize a Drawer object with parameters such as the target element and the op Use the options parameter to set the default state of the drawer, placement, and other options. + + + instanceOptions + + + Object + + + Optional + + + Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance. + +
@@ -1222,21 +1250,28 @@ const $targetEl = document.getElementById('drawer-js-example'); // options with default values const options = { - placement: 'right', - backdrop: true, - bodyScrolling: false, - edge: false, - edgeOffset: '', - backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-30', - onHide: () => { - console.log('drawer is hidden'); - }, - onShow: () => { - console.log('drawer is shown'); - }, - onToggle: () => { - console.log('drawer has been toggled'); - } + placement: 'right', + backdrop: true, + bodyScrolling: false, + edge: false, + edgeOffset: '', + backdropClasses: + 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30', + onHide: () => { + console.log('drawer is hidden'); + }, + onShow: () => { + console.log('drawer is shown'); + }, + onToggle: () => { + console.log('drawer has been toggled'); + }, +}; + +// instance options object +const instanceOptions = { + id: 'drawer-js-example', + override: true }; ``` @@ -1246,10 +1281,11 @@ Initialize the Drawer positioning by creating a new object: import { Drawer } from 'flowbite'; /* -* targetEl: required -* options: optional -*/ -const drawer = new Drawer($targetEl, options); + * $targetEl (required) + * options (optional) + * instanceOptions (optional) + */ +const drawer = new Drawer($targetEl, options, instanceOptions); ``` Use the `show` and `hide` methods to show and hide the drawer component directly from JavaScript. @@ -1276,66 +1312,143 @@ Use the `isVisible` method to check the visibility of the drawer: drawer.isVisible(); ``` -### HTML markup +### HTML Markup Use the following HTML code for the JavaScript example above. ```html -
-
Info
- -

Supercharge your hiring by taking advantage of our limited-time sale for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.

-
- Learn more - Get access -
+
+
+ Info +
+ +

+ Supercharge your hiring by taking advantage of our + limited-time sale + for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked + candidates and the #1 design job board. +

+
+ Learn more + Get access + +
``` ### TypeScript -If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Drawer (off-canvas) class, parameters and its options. +If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Drawer (off-canvas) class, parameters and its options. Here's an example that applies the types from Flowbite to the code above: ```javascript -import { Drawer } from "flowbite"; -import type { DrawerOptions, DrawerInterface } from "flowbite"; +import { Drawer } from 'flowbite'; +import type { DrawerOptions, DrawerInterface } from 'flowbite'; +import type { InstanceOptions } from 'flowbite'; // set the drawer menu element const $targetEl: HTMLElement = document.getElementById('drawer-js-example'); // options with default values const options: DrawerOptions = { - placement: 'right', - backdrop: true, - bodyScrolling: false, - edge: false, - edgeOffset: '', - backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-30', - onHide: () => { - console.log('drawer is hidden'); - }, - onShow: () => { - console.log('drawer is shown'); - }, - onToggle: () => { - console.log('drawer has been toggled'); - } + placement: 'right', + backdrop: true, + bodyScrolling: false, + edge: false, + edgeOffset: '', + backdropClasses: + 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30', + onHide: () => { + console.log('drawer is hidden'); + }, + onShow: () => { + console.log('drawer is shown'); + }, + onToggle: () => { + console.log('drawer has been toggled'); + }, +}; + +// instance options object +const instanceOptions: InstanceOptions = { + id: 'drawer-js-example', + override: true }; /* -* $targetEl: required -* options: optional -*/ -const drawer: DrawerInterface = new Drawer($targetEl, options); + * $targetEl (required) + * options (optional) + * instanceOptions (optional) + */ +const drawer: DrawerInterface = new Drawer($targetEl, options, instanceOptions); // show the drawer drawer.show(); diff --git a/content/components/dropdowns.md b/content/components/dropdowns.md index d2d662553..d10be358f 100644 --- a/content/components/dropdowns.md +++ b/content/components/dropdowns.md @@ -23,9 +23,9 @@ If you want to show a dropdown menu when clicking on an element make sure that y The `dropdownId` is the id of the dropdown menu element. {{< example id="default-dropdown-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="300" >}} - @@ -49,14 +49,14 @@ The `dropdownId` is the id of the dropdown menu element. ## Dropdown hover -Use the `data-dropdown-trigger="{hover|click}"` data attribute options to set whether the dropdown should be shown when hovering or clicking on the trigger element (ie. button). +Use the `data-dropdown-trigger="{hover|click}"` data attribute options to set whether the dropdown should be shown when hovering or clicking on the trigger element (ie. button). There's a 300ms default delay when showing or hiding the dropdown due to UI/UX reasons and how it may affect the interaction with other components on the page. Generally, we recommend using the `click` method. {{< example id="dropdown-hover-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="300" >}} - @@ -83,9 +83,9 @@ There's a 300ms default delay when showing or hiding the dropdown due to UI/UX r You can use the `data-dropdown-delay={milliseconds}` data attribute to set they delay on when to show or hide the dropdown menu when using hover. You may want to use this depending on how the users interact with your interface. In this example we add 500 milliseconds instead of the default 300. {{< example id="dropdown-delay-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="300" >}} - @@ -112,9 +112,9 @@ You can use the `data-dropdown-delay={milliseconds}` data attribute to set they You can use the `divide-y divide-gray-100` classes to add separate elements inside the dropdown menu. {{< example id="dropdown-divider-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="320" >}} - @@ -141,9 +141,9 @@ You can use the `divide-y divide-gray-100` classes to add separate elements insi Use this example to show extra information outside of the list of menu items inside the dropdown. {{< example id="dropdown-header-example" class="flex justify-center " github="components/dropdowns.md" show_dark=true iframeHeight="380" >}} - @@ -174,9 +174,9 @@ Use this example to show extra information outside of the list of menu items ins Use this example to enable multi-level dropdown menus by adding stacked elements inside of each other. {{< example id="dropdown-multi-level-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="350" >}} - @@ -186,7 +186,7 @@ Use this example to enable multi-level dropdown menus by adding stacked elements Dashboard
  • - @@ -232,19 +232,19 @@ Add multiple checkbox elements inside your dropdown menu to enable more advanced
  • - +
  • - +
  • - +
    • @@ -256,9 +256,9 @@ Add multiple checkbox elements inside your dropdown menu to enable more advanced Use this example to update the background color of a menu item when using a list of checkbox elements. {{< example id="dropdown-checkbox-bg-hover-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="300" >}} - @@ -267,19 +267,19 @@ Use this example to update the background color of a menu item when using a list
  • - +
  • - +
  • - +
    • @@ -291,9 +291,9 @@ Use this example to update the background color of a menu item when using a list Add an extra helper text to each checkbox element inside the dropdown menu list with this example. {{< example id="dropdown-checkbox-helper-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="380" >}} - @@ -304,7 +304,7 @@ Add an extra helper text to each checkbox element inside the dropdown menu list
    -
    +