Skip to content

Commit 1ffd9dc

Browse files
tulup-connerSutuSebastian
tulup-conner
and
SutuSebastian
authored
feat(component): add <Drawer/> (#1342)
* feat(component): add `<Drawer/>` component Thank you to @dhavalveera for your work in #1265 to get this component started! * feat(ui): drawer - cleanup * fix(ui): drawer - import type * chore: web - sort drawer examples index * fix(ui): drawer - tailwind intellisense to theme object --------- Co-authored-by: SutuSebastian <[email protected]>
1 parent 8c4a546 commit 1ffd9dc

29 files changed

+4126
-2
lines changed

‎apps/web/content/docs/components/drawer.mdx

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
---
2+
title: React Drawer (offcanvas) - Flowbite
3+
description: The Drawer component can be used as a hidden off-canvas sidebar for navigation and to show other information based on multiple styles and placements
4+
---
5+
6+
Use the Drawer component (or "off-canvas") to show a fixed element relative to the document page from any side for navigation, contact forms, informational purposes or other user actions.
7+
8+
You can set multiple options such as the placement, activate body scrolling, show or hide the backdrop and even use the swipeable edge functionality to show a small part of the drawer when it is not shown completely.
9+
10+
To start using the drawer component you need to import it from `flowbite-react`:
11+
12+
```jsx
13+
import { Drawer } from "flowbite-react";
14+
```
15+
16+
## Default drawer
17+
18+
<Example name="drawer.root" />
19+
20+
## Drawer navigation
21+
22+
Use this example to show a navigational sidebar inside the drawer component.
23+
24+
<Example name="drawer.navigation" />
25+
26+
## Contact form
27+
28+
Use this example to show a contact form inside the drawer component.
29+
30+
<Example name="drawer.contactForm" />
31+
32+
## Form elements
33+
34+
Use this example if you want to add form elements inside the drawer component including datepickers.
35+
36+
<Example name="drawer.formElements" />
37+
38+
## Placement
39+
40+
Use the placement options to position the drawer component either on the top, right, bottom, or left side of the document page. This can be done using the `position="{top|right|bottom|left}"` attribute where the default value is "left".
41+
42+
### Left drawer
43+
44+
Use this example where you can position the drawer component on the left side of the page.
45+
46+
<Example name="drawer.left" />
47+
48+
### Right drawer
49+
50+
Use this example to show the drawer component on the right side of the page.
51+
52+
<Example name="drawer.right" />
53+
54+
### Top drawer
55+
56+
Use this example to show the drawer on the top side of the page.
57+
58+
<Example name="drawer.top" />
59+
60+
### Bottom drawer
61+
62+
Use this example to show the drawer on the bottom side of the page.
63+
64+
<Example name="drawer.bottom" />
65+
66+
## Body scrolling
67+
68+
By default, body scrolling is disabled when the drawer is visible, however, you can choose to enable it using the `bodyScrolling="{true|false}"` attribute.
69+
70+
### Disabled (default)
71+
72+
This is an example where the body scrolling behaviour is disabled when the drawer is visible.
73+
74+
<Example name="drawer.noBodyScrolling" />
75+
76+
### Enabled
77+
78+
Get started with this example in order to enable body scrolling even if the drawer component is visible by applying `overflow-y: auto` to your `<body>`.
79+
80+
<Example name="drawer.bodyScrolling" />
81+
82+
## Backdrop
83+
84+
The backdrop element can be used to dim out the background elements when the drawer is visible and also automatically hide the component when clicking outside of it.
85+
86+
Use the `backdrop="{true|false}"` attribute where you can disable or enable the backdrop element.
87+
88+
### Enabled (default)
89+
90+
Use this example to enable the backdrop element by default.
91+
92+
<Example name="drawer.backdrop" />
93+
94+
### Disabled
95+
96+
Use the `backdrop="false"` attribute to disable the backdrop element when the drawer is shown.
97+
98+
<Example name="drawer.noBackdrop" />
99+
100+
## Swipeable edge
101+
102+
The drawer edge functionality allows you to show a small part of the drawer when it is not shown completely by applying the `edge="{true|false}"` attribute, specifying the edge you'd like to set with, e.g., `theme={{ edge: "bottom-16" }}`, and adding `onClick={() => setIsOpen(!isOpen)}` to `<DrawerHeader/>`.
103+
104+
<Example name="drawer.swipeableEdge" />
105+
106+
## Theme
107+
108+
To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
109+
110+
<Theme name="drawer" />
111+
112+
## References
113+
114+
- [Flowbite Drawer](https://flowbite.com/docs/components/drawer/)

‎apps/web/data/docs-sidebar.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
6464
{ title: "Card", href: "/docs/components/card" },
6565
{ title: "Carousel", href: "/docs/components/carousel" },
6666
{ title: "Datepicker", href: "/docs/components/datepicker", isNew: true },
67+
{ title: "Drawer", href: "/docs/components/drawer", isNew: true },
6768
{ title: "Dropdown", href: "/docs/components/dropdown" },
6869
{ title: "Footer", href: "/docs/components/footer" },
6970
{ title: "Forms", href: "/docs/components/forms" },

0 commit comments

Comments
 (0)