Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Składnik tostów

Ostatnia aktualizacja:

Toast CSS Tailwind tylko dla CSS do pozycjonowania powiadomień — u góry, u dołu, na początku, na końcu i na środku. Brak JavaScriptu dla układu. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Komponenty Toast wyświetlają krótkie, nieinwazyjne powiadomienia umieszczone na krawędziach ekranu. Zbudowane ze stałych elementów pozycjonujących i alertów, tosty przekazują informacje zwrotne od systemu, takie jak potwierdzenia powodzenia, komunikaty o błędach lub aktualizacje statusu. System tostów Frutjam obsługuje sześć pozycji umieszczenia — idealnie nadaje się do przesyłania formularzy, operacji asynchronicznych i powiadomień w czasie rzeczywistym.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
toastOpieraćFixed-position notification container
toast-topModyfikatorAnchors to the top of the viewport
toast-bottomModyfikatorAnchors to the bottom of the viewport (default)
toast-startModyfikatorAnchors to the left
toast-centerModyfikatorPoziomo wyśrodkowany
toast-endModyfikatorAnchors to the right (default)
toast-middleModyfikatorPionowo wyśrodkowany

Podstawowe użycie

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>
    </>
  )
}

Toast Positions

Top Positions

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>

Bottom Positions

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>

Toast Colors

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>

Multiple Toasts

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>

Używasz kodu Claude'a, kursora lub innego edytora AI?

Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Toast. Żadnych więcej zajęć z halucynacjami.

Try Cherry MCP