notid/email-organizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

offline docs

Browse Source
This commit is contained in:
Bryce
2025-08-13 09:33:19 -07:00
parent 2a451ce840
commit b7801a0caa
43 changed files with 4617 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
offline-docs/daisyui/indicator.md Normal file
View File

@@ -0,0 +1,109 @@
# 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.