메인 콘텐츠로 건너뛰기
Frutjam logo Frutjam
v2.2.2
Theme

토스트 구성 요소

마지막 업데이트:

알림 위치 지정(상단, 하단, 시작, 끝 및 중앙 배치)을 위한 CSS 전용 Tailwind CSS 토스트입니다. 레이아웃에 JavaScript가 없습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

토스트 구성 요소는 화면 가장자리에 방해가 되지 않는 간단한 알림을 표시합니다. 고정 위치 지정 및 경고 구성 요소로 구축된 알림 메시지는 성공 확인, 오류 메시지 또는 상태 업데이트와 같은 시스템 피드백을 전달합니다. Frutjam 토스트 시스템은 양식 제출, 비동기 작업 및 실시간 알림에 이상적인 6가지 배치 위치를 지원합니다.

CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

수업 유형 설명
toast베이스고정 위치 알림 컨테이너
toast-top수정자뷰포트 상단의 앵커
toast-bottom수정자뷰포트 하단에 대한 앵커(기본값)
toast-start수정자왼쪽에 앵커
toast-center수정자가로 중심
toast-end수정자오른쪽 앵커(기본값)
toast-middle수정자수직 중앙에

기본 사용법

1
2
3
4
5
<div 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 className="toast">
        {toast.toasts.map(t => (
          <div key={t.id} className={`alert${t.type ? ` alert-${t.type}` : ''}`}>
            <span>{t.message}</span>
          </div>
        ))}
      </div>
    </>
  )
}

토스트 위치

최고 위치

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="toast toast-top toast-start">
  <div class="alert alert-info"><span>Top Start</span></div>
</div>

<div class="toast toast-top toast-center">
  <div class="alert alert-info"><span>Top Center</span></div>
</div>

<div class="toast toast-top toast-end">
  <div class="alert alert-info"><span>Top End</span></div>
</div>

하단 위치

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="toast toast-bottom toast-start">
  <div class="alert alert-info"><span>Bottom Start</span></div>
</div>

<div class="toast toast-bottom toast-center">
  <div class="alert alert-info"><span>Bottom Center</span></div>
</div>

<div class="toast toast-bottom toast-end">
  <div class="alert alert-info"><span>Bottom End</span></div>
</div>

토스트 색상

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div 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>

여러 건배

html 
1
2
3
4
5
6
7
8
<div 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 편집기에 요청 시 정확한 토스트 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.

Cherry MCP를 사용해 보세요