모든 요소 모서리에 배지나 점을 오버레이하기 위한 CSS 전용 Tailwind CSS 표시기입니다. 색상 변형 및 위치 지정. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
표시기 구성 요소는 다른 요소에 위치한 상태, 배지 또는 알림을 표시합니다. 절대적인 위치 지정과 유연한 스타일로 제작된 표시기는 카드, 아바타 및 버튼에 중요한 정보를 오버레이합니다. Frutjam 표시 시스템은 다양한 배치, 크기 및 색상을 지원하므로 알림 배지, 상태 표시 및 시각적 신호에 이상적입니다.
CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
| 수업 | 유형 | 설명 |
|---|---|---|
| indicator | 베이스 | 표시기 항목에 대한 상대 위치 래퍼 |
| indicator-item | 수정자 | 절대 위치의 배지 또는 점 요소 |
| indicator-top | 수정자 | 항목을 위쪽 가장자리에 배치합니다. |
| indicator-middle | 수정자 | 항목을 수직 중앙에 위치시킵니다. |
| indicator-bottom | 수정자 | 하단 가장자리에 항목 위치 지정 |
| indicator-start | 수정자 | 항목을 왼쪽 가장자리에 배치합니다. |
| indicator-center | 수정자 | 가로 중앙에 항목을 배치합니다. |
| indicator-end | 수정자 | 항목을 오른쪽 가장자리에 배치합니다. |
기본 사용법
1 2 3 4 | <div class="indicator"> <span class="indicator-item badge badge-primary">99+</span> <button class="btn">Messages</button> </div> |
1 2 3 4 | <div className="indicator"> <span className="indicator-item badge badge-primary">99+</span> <button className="btn">Messages</button> </div> |
1 2 3 4 | <div class="indicator"> <span class="indicator-item badge badge-primary">99+</span> <button class="btn">Messages</button> </div> |
표시기 배치
html
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="indicator"> <span class="indicator-item indicator-top indicator-start badge badge-primary">↖︎</span> <span class="indicator-item indicator-top indicator-center badge badge-secondary">↑</span> <span class="indicator-item indicator-top indicator-end badge badge-accent">↗︎</span> <span class="indicator-item indicator-middle indicator-start badge badge-info">←</span> <span class="indicator-item indicator-middle indicator-center badge badge-neutral">●</span> <span class="indicator-item indicator-middle indicator-end badge badge-success">→</span> <span class="indicator-item indicator-bottom indicator-start badge badge-warning">↙︎</span> <span class="indicator-item indicator-bottom indicator-center badge badge-primary">↓</span> <span class="indicator-item indicator-bottom indicator-end badge badge-error">↘︎</span> <div class="bg-base-200 grid h-32 w-60 place-items-center rounded-box">Box</div> </div> |
탭의 표시기
html
1 2 3 4 5 6 7 8 | <div class="tabs tabs-lifted"> <a class="tab">Messages</a> <a class="indicator tab tab-active"> Notifications <span class="indicator-item badge">7</span> </a> <a class="tab">Requests</a> </div> |
입력 표시기
html
1 2 3 4 | <div class="indicator"> <span class="indicator-item badge badge-neutral badge-sm">Required</span> <input type="text" placeholder="Your email address" class="input" /> </div> |
이미지의 표시기
html
1 2 3 4 5 6 7 8 9 | <div class="indicator"> <span class="indicator-item indicator-middle indicator-center badge"> Only available for Pro users </span> <img alt="Tailwind CSS examples" src="" /> </div> |
카드 표시기
html
1 2 3 4 5 6 7 8 9 | <div class="indicator"> <span class="indicator-item badge badge-success">New</span> <div class="card card-outline"> <div class="card-content"> <h2 class="card-title">Product Name</h2> <p>Product description and details go here.</p> </div> </div> </div> |
아바타 표시기
html
1 2 3 4 | <div class="indicator"> <span class="indicator-item indicator-top indicator-end badge badge-circle badge-success"></span> <div class="avatar">JS</div> </div> |
반응하는 행동
html
1 2 3 4 | <div class="indicator"> <span class="indicator-item indicator-bottom indicator-start sm:indicator-top sm:indicator-end badge badge-primary">New</span> <button class="btn">Responsive</button> </div> |
Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?
Cherry MCP는 AI 편집기에 요청 시 정확한 지시자 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.