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

Tost Bileşeni

Son güncelleme:

Bildirim konumlandırma için yalnızca CSS Tailwind CSS tostu - üst, alt, başlangıç, bitiş ve orta yerleşim. Düzen için JavaScript yok. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.

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

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

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

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

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

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 veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?

Cherry MCP, AI editörünüze talep üzerine tam Tost sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.

Cherry MCP'yi deneyin