기본, 성공, 경고 및 오류 색상 변형이 포함된 CSS 전용 Tailwind CSS 상태 점 표시기입니다. 크기 xs-xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
상태 구성 요소는 시각적 표시기를 통해 사용자, 시스템 또는 프로세스의 현재 상태 또는 가용성을 표시합니다. 의미 있는 HTML과 색상으로 구분된 스타일로 구축된 상태 배지는 중요한 상태 정보를 전달합니다. Frutjam 상태 시스템은 다양한 색상과 크기를 지원하므로 사용자 현재 상태, 시스템 상태 및 워크플로 상태에 이상적입니다.
CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
| 수업 | 유형 | 설명 |
|---|---|---|
| status | 베이스 | 상태 또는 존재 여부를 나타내는 작은 점 표시 |
| status-xs | 크기 | 아주 작은 |
| status-sm | 크기 | 작은 |
| status-md | 크기 | 중간(기본값) |
| status-lg | 크기 | 크기가 큰 |
| status-xl | 크기 | 특대 |
| status-primary | 색상 | 기본 테마 색상 |
| status-secondary | 색상 | 보조 테마 색상 |
| status-accent | 색상 | 악센트 테마 색상 |
| status-neutral | 색상 | 중립 테마 색상 |
| status-info | 색상 | 정보 의미 색상 |
| status-success | 색상 | 성공 의미 색상 |
| status-warning | 색상 | 경고 의미 색상 |
| status-error | 색상 | 오류 의미 색상 |
기본 사용법
<span class="status"></span> |
<span className="status"></span> |
상태 색상
html
1 2 3 4 5 6 7 8 | <span class="status status-primary"></span> <span class="status status-secondary"></span> <span class="status status-accent"></span> <span class="status status-neutral"></span> <span class="status status-info"></span> <span class="status status-success"></span> <span class="status status-warning"></span> <span class="status status-error"></span> |
상태 크기
html
1 2 3 4 | <span class="status status-xs status-success"></span> <span class="status status-sm status-success"></span> <span class="status status-md status-success"></span> <span class="status status-lg status-success"></span> |
라벨이 있는 상태
Online
Offline
Busy
Away
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class="flex items-center gap-2"> <span class="status status-md status-success"></span> <span>Online</span> </div> <div class="flex items-center gap-2"> <span class="status status-md status-neutral"></span> <span>Offline</span> </div> <div class="flex items-center gap-2"> <span class="status status-md status-error"></span> <span>Busy</span> </div> <div class="flex items-center gap-2"> <span class="status status-md status-warning"></span> <span>Away</span> </div> |
핑 애니메이션 상태
html
<div class="status status-error animate-ping"></div> |
바운스 애니메이션 상태
Unread emails
html
1 2 3 4 | <div class="flex items-center gap-2"> <div class="status status-info animate-bounce"></div> <span>Unread emails</span> </div> |
사용자 목록의 상태
U1
John (Online)
U2
Jane (Offline)
U3
Bob (Busy)
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="space-y-2"> <div class="flex items-center gap-2"> <div class="avatar avatar-online"> U1 </div> <span>John (Online)</span> </div> <div class="flex items-center gap-2"> <div class="avatar avatar-offline"> U2 </div> <span>Jane (Offline)</span> </div> <div class="flex items-center gap-2"> <div class="avatar avatar-busy"> U3 </div> <span>Bob (Busy)</span> </div> </div> |
Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?
Cherry MCP는 AI 편집기에 요청 시 정확한 상태 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.