92 lines
2.7 KiB
Markdown
92 lines
2.7 KiB
Markdown
# daisyUI Documentation - Divider Component
|
|
|
|
Divider will be used to separate content vertically or horizontally.
|
|
|
|
## Examples
|
|
|
|
### Basic Divider
|
|
|
|
```html
|
|
<div class="flex w-full flex-col">
|
|
<div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
|
|
<div class="divider">OR</div>
|
|
<div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
|
|
</div>
|
|
```
|
|
|
|
### Horizontal Divider
|
|
|
|
```html
|
|
<div class="flex w-full">
|
|
<div class="card bg-base-300 rounded-box grid h-20 grow place-items-center">content</div>
|
|
<div class="divider divider-horizontal">OR</div>
|
|
<div class="card bg-base-300 rounded-box grid h-20 grow place-items-center">content</div>
|
|
</div>
|
|
```
|
|
|
|
### Divider with No Text
|
|
|
|
```html
|
|
<div class="flex w-full flex-col">
|
|
<div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
|
|
<div class="divider"></div>
|
|
<div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
|
|
</div>
|
|
```
|
|
|
|
### Responsive Divider
|
|
|
|
```html
|
|
<div class="flex w-full flex-col lg:flex-row">
|
|
<div class="card bg-base-300 rounded-box grid h-32 grow place-items-center">content</div>
|
|
<div class="divider lg:divider-horizontal">OR</div>
|
|
<div class="card bg-base-300 rounded-box grid h-32 grow place-items-center">content</div>
|
|
</div>
|
|
```
|
|
|
|
### Divider with Colors
|
|
|
|
```html
|
|
<div class="flex w-full flex-col">
|
|
<div class="divider">Default</div>
|
|
<div class="divider divider-neutral">Neutral</div>
|
|
<div class="divider divider-primary">Primary</div>
|
|
<div class="divider divider-secondary">Secondary</div>
|
|
<div class="divider divider-accent">Accent</div>
|
|
<div class="divider divider-success">Success</div>
|
|
<div class="divider divider-warning">Warning</div>
|
|
<div class="divider divider-info">Info</div>
|
|
<div class="divider divider-error">Error</div>
|
|
</div>
|
|
```
|
|
|
|
### Divider in Different Positions
|
|
|
|
```html
|
|
<div class="flex w-full flex-col">
|
|
<div class="divider divider-start">Start</div>
|
|
<div class="divider">Default</div>
|
|
<div class="divider divider-end">End</div>
|
|
</div>
|
|
```
|
|
|
|
### Horizontal Divider in Different Positions
|
|
|
|
```html
|
|
<div class="flex w-full">
|
|
<div class="divider divider-horizontal divider-start">Start</div>
|
|
<div class="divider divider-horizontal">Default</div>
|
|
<div class="divider divider-horizontal divider-end">End</div>
|
|
</div>
|
|
```
|
|
|
|
## Features
|
|
|
|
- Separates content vertically or horizontally
|
|
- Can be used with text or without text
|
|
- Responsive design that adapts to different screen sizes
|
|
- Multiple color options for visual distinction
|
|
- Positioning options (start, default, end)
|
|
- Horizontal and vertical variants
|
|
|
|
This component is useful for creating clear visual separation between sections of content, especially in forms, layouts, or content organization. |