78 lines
3.5 KiB
Markdown
78 lines
3.5 KiB
Markdown
# daisyUI Documentation - Dock Component
|
|
|
|
dock (also know as Bottom navigation or Bottom bar) is a UI element that provides navigation options to the user. Dock sticks to the bottom of the screen.
|
|
|
|
## Classes and Usage
|
|
|
|
### Core Classes:
|
|
- **dock** - The main dock component
|
|
- **dock-label** - Text label for Dock Item
|
|
- **dock-active** - Makes the Dock Item look active
|
|
- **dock-xs** - Extra Small Dock
|
|
- **dock-sm** - Small Dock
|
|
- **dock-md** - Medium Dock [Default]
|
|
- **dock-lg** - Large Dock
|
|
- **dock-xl** - Extra Large Dock
|
|
|
|
## Examples
|
|
|
|
### Basic Dock
|
|
|
|
```html
|
|
<div class="dock">
|
|
<button>
|
|
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
|
|
<span class="dock-label">Home</span>
|
|
</button>
|
|
|
|
<button class="dock-active">
|
|
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="3 14 9 14 9 17 15 17 15 14 21 14" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><rect x="3" y="3" width="18" height="18" rx="2" ry="2" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></rect></g></svg>
|
|
<span class="dock-label">Inbox</span>
|
|
</button>
|
|
|
|
<button>
|
|
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></circle><path d="m22,13.25v-2.5l-2.318-.966c-.167-.581-.395-1.135-.682-1.654l.954-2.318-1.768-1.768-2.318.954c-.518-.287-1.073-.515-1.654-.682l-.966-2.318h-2.5l-.966,2.318c-.581.167-1.135.395-1.654.682l-2.318-.954-1.768,1.768.954,2.318c-.287.518-.515,1.073-.682,1.654l-2.318.966v2.5l2.318.966c.167.581.395,1.135.682,1.654l-.954,2.318,1.768,1.768,2.318-.954c.518.287,1.073.515,1.654.682l.966,2.318h2.5l.966-2.318c.581-.167,1.135-.395,1.654-.682l2.318.954,1.768-1.768-.954-2.318c.287-.518.515-1.073.682-1.654l2.318-.966Z" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path></g></svg>
|
|
<span class="dock-label">Settings</span>
|
|
</button>
|
|
</div>
|
|
```
|
|
|
|
### Dock with Different Sizes
|
|
|
|
```html
|
|
<!-- Extra Small -->
|
|
<div class="dock dock-xs">
|
|
<!-- dock items -->
|
|
</div>
|
|
|
|
<!-- Small -->
|
|
<div class="dock dock-sm">
|
|
<!-- dock items -->
|
|
</div>
|
|
|
|
<!-- Medium (default) -->
|
|
<div class="dock dock-md">
|
|
<!-- dock items -->
|
|
</div>
|
|
|
|
<!-- Large -->
|
|
<div class="dock dock-lg">
|
|
<!-- dock items -->
|
|
</div>
|
|
|
|
<!-- Extra Large -->
|
|
<div class="dock dock-xl">
|
|
<!-- dock items -->
|
|
</div>
|
|
```
|
|
|
|
## Features
|
|
|
|
- Bottom navigation or bottom bar UI element
|
|
- Sticks to the bottom of the screen
|
|
- Responsive design with different size options
|
|
- Active state indicator for current selection
|
|
- SVG icons support
|
|
- Requires viewport meta tag for iOS responsiveness
|
|
|
|
This component is particularly useful for mobile applications where you need persistent navigation at the bottom of the screen. |