알림 포지셔닝을 위한 CSS 전용 Tailwind CSS 토스트: 상단, 하단, 시작, 끝 및 중앙 배치. 레이아웃에 대한 자바스크립트가 없습니다. WCAG AA에 액세스할 수 있으며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
토스트 구성 요소는 화면 가장자리에 위치한 간단한 비침입성 알림을 표시합니다. 고정된 포지셔닝과 경고 구성 요소로 제작된 토스트는 성공 확인, 오류 메시지 또는 상태 업데이트와 같은 시스템 피드백을 전달합니다. Frutjam TOAST 시스템은 양식 제출, 비동기 작업 및 실시간 알림에 이상적인 6개의 배치 위치를 지원합니다.
CSS 전용, 자바스크립트는 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음: Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
| 구분 | 유형 | 설명 |
|---|---|---|
| toast | 베이스 | 고정 위치 알림 컨테이너 |
| toast-top | 편집 | 뷰포트 상단에 위치 |
| toast-bottom | 편집 | 뷰포트 하단에 고정 (기본값) |
| toast-start | 편집 | 왼쪽에 앵커 |
| toast-center | 편집 | 수평 중심 |
| toast-end | 편집 | 오른쪽 앵커 (기본값) |
| toast-middle | 편집 | 수직 중앙 정렬 |
| toast-slide-up | 편집 | 아래에서 자신의 높이로 진입 |
| toast-slide-down | 편집 | 위에서 들어옴 |
| toast-slide-start | 편집 | RTL에서 왼쪽에서 오른쪽으로 진입 |
| toast-slide-end | 편집 | RTL에서 오른쪽, 왼쪽에서 진입 |
| --toast--width | 사이즈 | 각 토스트의 최대 너비, 24rem 디폴트 |
기본 사용
1 2 3 4 5 | <div role="status" aria-live="polite" class="toast"> <div class="alert alert-info"> <span>New message arrived.</span> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import { useToast } from 'frutjam/react' export default function ToastDemo() { const toast = useToast() return ( <> <button className="btn" onClick={() => toast.info('New message arrived.')}>Show Toast</button> <div role="status" aria-live="polite" className="toast"> {toast.toasts.map(t => ( <div key={t.id} className={`alert${t.type ? ` alert-${t.type}` : ''}`}> <span>{t.message}</span> </div> ))} </div> </> ) } |
토스트 자세
상위 포지션
1 2 3 4 5 6 7 8 9 10 11 | <div role="status" aria-live="polite" class="toast toast-top toast-start"> <div class="alert alert-info"><span>Top Start</span></div> </div> <div role="status" aria-live="polite" class="toast toast-top toast-center"> <div class="alert alert-info"><span>Top Center</span></div> </div> <div role="status" aria-live="polite" class="toast toast-top toast-end"> <div class="alert alert-info"><span>Top End</span></div> </div> |
하단 위치
1 2 3 4 5 6 7 8 9 10 11 | <div role="status" aria-live="polite" class="toast toast-bottom toast-start"> <div class="alert alert-info"><span>Bottom Start</span></div> </div> <div role="status" aria-live="polite" class="toast toast-bottom toast-center"> <div class="alert alert-info"><span>Bottom Center</span></div> </div> <div role="status" aria-live="polite" class="toast toast-bottom toast-end"> <div class="alert alert-info"><span>Bottom End</span></div> </div> |
원본 크기 - 중앙 정열
가로와 세로 모디파이어가 결합되어 toast-center toast-middle 화면 중앙에 토스트를 놓습니다.
1 2 3 | <div role="status" aria-live="polite" class="toast toast-middle toast-center"> <div class="alert alert-info"><span>Middle Center</span></div> </div> |
엔트리 애니메이션
모든 토스트는 저절로 사라지고 제자리에 솟아오릅니다. 더할 것도 없고, 켤 클래스도 없습니다.
결과 toast-slide-* 수정자는 기본 상승과 다른 방향을 원할 때 사용할 수 있습니다. 토스트가 놓인 가장자리를 선택하여 화면이 아닌 바깥에서 들어갑니다. toast-slide-end 소속: toast-end, toast-slide-down 와 toast-top.
1 2 3 | <div role="status" aria-live="polite" class="toast toast-top toast-end toast-slide-down"> <div class="alert alert-info"><span>Drops in from the top</span></div> </div> |
거리는 화면 가장자리까지의 거리가 아닌 토스트 자체의 너비 또는 높이이므로 화면이 아닌 중간 근처에서 중앙 토스트가 시작됩니다.
종료 애니메이션이 없습니다. CSS에서 전환할 상태가 없기 때문에 페이지에서 제거되는 순간 토스트가 사라집니다. 하나를 페이드 아웃하는 것은 DOM에 유지하고 직접 애니메이션을 적용하는 것을 의미합니다.
움직임을 줄여달라고 요청한 사람은 애니메이션을 건너뜁니다.
너비
각 토스트는 24rem 따라서 긴 메시지는 전화 화면에 걸쳐 있지 않습니다. 재정의 --toast--width 변경할 수 있습니다.
1 2 3 | <div role="status" aria-live="polite" class="toast [--toast--width:32rem]"> <div class="alert alert-info"><span>A wider toast.</span></div> </div> |
토스트 색상
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div role="status" aria-live="polite" class="toast toast-top toast-end"> <div class="alert alert-success"> <span>File saved successfully.</span> </div> <div class="alert alert-warning"> <span>Storage is almost full.</span> </div> <div class="alert alert-error"> <span>Connection failed.</span> </div> <div class="alert alert-info"> <span>Update available.</span> </div> </div> |
여러 건배사
1 2 3 4 5 6 7 8 | <div role="status" aria-live="polite" class="toast toast-top toast-end"> <div class="alert alert-success"> <span>Profile updated.</span> </div> <div class="alert alert-info"> <span>2 new notifications.</span> </div> </div> |
Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?
Cherry MCP는 AI 편집기에 요청 시 정확한 토스트 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.