Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Toast Component

CSS-only Tailwind CSS toast for notification positioning — top, bottom, start, end, and center placement. No JavaScript for layout. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Toast bileşenleri, ekranın kenarlarına yerleştirilmiş kısa, müdahaleci olmayan bildirimler görüntüler. Sabit konumlandırma ve uyarı bileşenleriyle oluşturulan tostlar, başarı onayları, hata mesajları veya durum güncellemeleri gibi sistem geri bildirimlerini iletir. Frutjam tost sistemi altı yerleştirme pozisyonunu destekler; form gönderimleri, eşzamansız işlemler ve gerçek zamanlı bildirimler için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Sınıf Tip Tanım
toastTemelSabit konumlu bildirim kabı
toast-topDeğiştiriciGörünüm alanının üst kısmına tutturucular
toast-bottomDeğiştiriciGörünüm alanının altına sabitlenir (varsayılan)
toast-startDeğiştiriciSoldaki çapalar
toast-centerDeğiştiriciYatay olarak ortalanmış
toast-endDeğiştiriciSağdaki bağlantı noktaları (varsayılan)
toast-middleDeğiştiriciDikey olarak ortalanmış

Temel Kullanım

New message arrived. 
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>
    </>
  )
}

Tost Pozisyonları

En İyi Pozisyonlar

Top Start
Top Center
Top End
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>

Alt Pozisyonlar

Bottom Start
Bottom Center
Bottom End
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>

Tost Renkleri

File saved successfully.
Storage is almost full.
Connection failed.
Update available.
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>

Çoklu Tostlar

Profile updated.
2 new notifications.
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>