117 lines
4.0 KiB
Markdown
117 lines
4.0 KiB
Markdown
# daisyUI Documentation - Drawer Component
|
|
|
|
Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.
|
|
|
|
## Structure
|
|
|
|
```
|
|
drawer // The root container
|
|
├── .drawer-toggle // A hidden checkbox to toggle the visibility of the sidebar
|
|
├── .drawer-content // All your page content goes here
|
|
│ ╰── // navbar, content, footer
|
|
│
|
|
╰── .drawer-side // Sidebar wrapper
|
|
├── .drawer-overlay // A dark overlay that covers the whole page when the drawer is open
|
|
╰── // Sidebar content (menu or anything)
|
|
```
|
|
|
|
## Classes and Usage
|
|
|
|
### Core Classes:
|
|
- **drawer** - The root container
|
|
- **drawer-toggle** - A hidden checkbox to toggle the visibility of the sidebar
|
|
- **drawer-content** - All your page content goes here
|
|
- **drawer-side** - Sidebar wrapper
|
|
- **drawer-overlay** - A dark overlay that covers the whole page when the drawer is open
|
|
- **drawer-open** - Opens the drawer on larger screens (use with responsive prefixes: sm, md, lg, xl)
|
|
|
|
## Examples
|
|
|
|
### Basic Drawer
|
|
|
|
```html
|
|
<div class="drawer">
|
|
<input id="my-drawer" type="checkbox" class="drawer-toggle" />
|
|
<div class="drawer-content">
|
|
<!-- Page content here -->
|
|
<label for="my-drawer" class="btn btn-primary drawer-button">Open drawer</label>
|
|
</div>
|
|
<div class="drawer-side">
|
|
<label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
|
|
<ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
|
|
<!-- Sidebar content here -->
|
|
<li><a>Sidebar Item 1</a></li>
|
|
<li><a>Sidebar Item 2</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Navbar Menu for Desktop + Sidebar Drawer for Mobile
|
|
|
|
```html
|
|
<div class="drawer">
|
|
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
|
|
<div class="drawer-content flex flex-col">
|
|
<!-- Navbar -->
|
|
<div class="navbar bg-base-300 w-full">
|
|
<div class="flex-none lg:hidden">
|
|
<label for="my-drawer-3" aria-label="open sidebar" class="btn btn-square btn-ghost">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
<div class="mx-2 flex-1 px-2">Navbar Title</div>
|
|
<div class="hidden flex-none lg:block">
|
|
<ul class="menu menu-horizontal">
|
|
<!-- Navbar menu content here -->
|
|
<li><a>Navbar Item 1</a></li>
|
|
<li><a>Navbar Item 2</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Page content here -->
|
|
Content
|
|
</div>
|
|
<div class="drawer-side">
|
|
<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"></label>
|
|
<ul class="menu bg-base-200 min-h-full w-80 p-4">
|
|
<!-- Sidebar content here -->
|
|
<li><a>Sidebar Item 1</a></li>
|
|
<li><a>Sidebar Item 2</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Drawer with Right Side
|
|
|
|
```html
|
|
<div class="drawer drawer-end">
|
|
<input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
|
|
<div class="drawer-content">
|
|
<!-- Page content here -->
|
|
<label for="my-drawer-2" class="btn btn-primary drawer-button">Open right drawer</label>
|
|
</div>
|
|
<div class="drawer-side">
|
|
<label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
|
|
<ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
|
|
<!-- Sidebar content here -->
|
|
<li><a>Sidebar Item 1</a></li>
|
|
<li><a>Sidebar Item 2</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Features
|
|
|
|
- Can show/hide a sidebar on the left or right side of the page
|
|
- Responsive design that works on different screen sizes
|
|
- Uses a hidden checkbox to control visibility
|
|
- Dark overlay when drawer is open
|
|
- Can be opened on larger screens using responsive classes
|
|
- Works with existing navigation components
|
|
|
|
This component is useful for creating mobile-friendly navigation with collapsible sidebars, dashboards, or any layout that benefits from a sliding panel interface. |