109 lines
3.5 KiB
Markdown
109 lines
3.5 KiB
Markdown
# daisyUI Documentation - Indicator Component
|
|
|
|
Indicators are used to place an element on the corner of another element.
|
|
|
|
## Classes and Usage
|
|
|
|
### Core Classes:
|
|
- **indicator** - The main indicator container
|
|
- **indicator-item** - The indicator element itself
|
|
- **indicator-start** - Aligns indicator to start
|
|
- **indicator-center** - Centers indicator
|
|
- **indicator-end** - Aligns indicator to end
|
|
- **indicator-top** - Positions indicator at top
|
|
- **indicator-middle** - Positions indicator in middle
|
|
- **indicator-bottom** - Positions indicator at bottom
|
|
|
|
## Examples
|
|
|
|
### Basic Indicator
|
|
|
|
```html
|
|
<div class="indicator">
|
|
<span class="indicator-item badge badge-secondary">new</span>
|
|
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
|
|
</div>
|
|
```
|
|
|
|
### Indicator with Positioning
|
|
|
|
```html
|
|
<!-- Top start -->
|
|
<div class="indicator">
|
|
<span class="indicator-item indicator-top indicator-start badge badge-secondary">new</span>
|
|
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
|
|
</div>
|
|
|
|
<!-- Top center -->
|
|
<div class="indicator">
|
|
<span class="indicator-item indicator-top indicator-center badge badge-secondary">new</span>
|
|
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
|
|
</div>
|
|
|
|
<!-- Top end -->
|
|
<div class="indicator">
|
|
<span class="indicator-item indicator-top indicator-end badge badge-secondary">new</span>
|
|
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
|
|
</div>
|
|
|
|
<!-- Middle start -->
|
|
<div class="indicator">
|
|
<span class="indicator-item indicator-middle indicator-start badge badge-secondary">new</span>
|
|
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
|
|
</div>
|
|
|
|
<!-- Middle end -->
|
|
<div class="indicator">
|
|
<span class="indicator-item indicator-middle indicator-end badge badge-secondary">new</span>
|
|
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
|
|
</div>
|
|
|
|
<!-- Bottom start -->
|
|
<div class="indicator">
|
|
<span class="indicator-item indicator-bottom indicator-start badge badge-secondary">new</span>
|
|
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
|
|
</div>
|
|
|
|
<!-- Bottom center -->
|
|
<div class="indicator">
|
|
<span class="indicator-item indicator-bottom indicator-center badge badge-secondary">new</span>
|
|
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
|
|
</div>
|
|
|
|
<!-- Bottom end -->
|
|
<div class="indicator">
|
|
<span class="indicator-item indicator-bottom indicator-end badge badge-secondary">new</span>
|
|
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
|
|
</div>
|
|
```
|
|
|
|
### Indicator with Avatar
|
|
|
|
```html
|
|
<div class="indicator">
|
|
<span class="indicator-item indicator-top indicator-end badge badge-error">1</span>
|
|
<div class="avatar placeholder">
|
|
<div class="bg-neutral text-neutral-content rounded-full w-24">
|
|
<span class="text-xl">U</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Indicator with Button
|
|
|
|
```html
|
|
<div class="indicator">
|
|
<span class="indicator-item indicator-top indicator-end badge badge-error">1</span>
|
|
<button class="btn btn-primary">Messages</button>
|
|
</div>
|
|
```
|
|
|
|
## Features
|
|
|
|
- Places elements on the corner of another element
|
|
- Multiple positioning options (top, middle, bottom and start, center, end)
|
|
- Works with badges, avatars, buttons and other elements
|
|
- Responsive design
|
|
|
|
This component is useful for creating notification indicators, badges, or any overlay elements that need to be positioned relative to other content. |