97 lines
2.7 KiB
Markdown
97 lines
2.7 KiB
Markdown
# daisyUI Documentation - Join Component
|
|
|
|
Join is a container for grouping multiple items, it can be used to group buttons, inputs, etc. Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items.
|
|
|
|
## Classes and Usage
|
|
|
|
### Core Classes:
|
|
- **join** - For grouping multiple items
|
|
- **join-item** - Item inside join. Can be a button, input, etc.
|
|
- **join-vertical** - Show items vertically
|
|
- **join-horizontal** - Show items horizontally
|
|
|
|
## Examples
|
|
|
|
### Basic Join
|
|
|
|
```html
|
|
<div class="join">
|
|
<button class="btn join-item">Button</button>
|
|
<button class="btn join-item">Button</button>
|
|
<button class="btn join-item">Button</button>
|
|
</div>
|
|
```
|
|
|
|
### Group Items Vertically
|
|
|
|
```html
|
|
<div class="join join-vertical">
|
|
<button class="btn join-item">Button</button>
|
|
<button class="btn join-item">Button</button>
|
|
<button class="btn join-item">Button</button>
|
|
</div>
|
|
```
|
|
|
|
### Responsive Join (Vertical on small, horizontal on large)
|
|
|
|
```html
|
|
<div class="join join-vertical lg:join-horizontal">
|
|
<button class="btn join-item">Button</button>
|
|
<button class="btn join-item">Button</button>
|
|
<button class="btn join-item">Button</button>
|
|
</div>
|
|
```
|
|
|
|
### Join with Extra Elements
|
|
|
|
Even if join-item is not a direct child of the group, it still gets the style
|
|
|
|
```html
|
|
<div class="join">
|
|
<div>
|
|
<div>
|
|
<input class="input join-item" placeholder="Search" />
|
|
</div>
|
|
</div>
|
|
<select class="select join-item">
|
|
<option disabled selected>Filter</option>
|
|
<option>Sci-fi</option>
|
|
<option>Drama</option>
|
|
<option>Action</option>
|
|
</select>
|
|
<div class="indicator">
|
|
<span class="indicator-item badge badge-secondary">new</span>
|
|
<button class="btn join-item">Search</button>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Custom Border Radius
|
|
|
|
```html
|
|
<div class="join">
|
|
<input class="input join-item" placeholder="Email" />
|
|
<button class="btn join-item rounded-r-full">Subscribe</button>
|
|
</div>
|
|
```
|
|
|
|
### Join Radio Inputs with Button Style
|
|
|
|
```html
|
|
<div class="join">
|
|
<input class="join-item btn" type="radio" name="options" aria-label="Radio 1" />
|
|
<input class="join-item btn" type="radio" name="options" aria-label="Radio 2" />
|
|
<input class="join-item btn" type="radio" name="options" aria-label="Radio 3" />
|
|
</div>
|
|
```
|
|
|
|
## Features
|
|
|
|
- Groups multiple items together
|
|
- Applies border radius to first and last items
|
|
- Horizontal or vertical layout options
|
|
- Responsive design
|
|
- Works with buttons, inputs, selects, and other elements
|
|
- Customizable with Tailwind classes
|
|
|
|
This component is useful for creating grouped interfaces like button groups, input fields with buttons, or any set of related UI elements that should appear as a cohesive unit. |