Component-galerij
Complete referentie voor UI- en backend-patronen: partials, forms, CSRF, fetch, flash,
validatie, HttpClient, AiAgent en DB via PingRepository.
Stats
- Pings tot nu toe
- 3
- Versie
- dev
Elke pageview voegt een ping toe (DB-roundtrip). Refresh om de teller op te hogen.
Alerts
Operatie geslaagd — statisch voorbeeld.
Let op — dit is een waarschuwing.
Er ging iets mis — statisch voorbeeld.
Tabs
Tab-inhoud wisselt lokaal — geen server roundtrip.
Gebruik x-show of
x-if afhankelijk van of DOM-elementen
persistent moeten blijven.
Tabel
Responsive tabel met overflow-x-auto,
zebra-rijen en status-badges. In productie: data uit controller, elke cel via e().
| Klant | Status | Bedrag | Datum | |
|---|---|---|---|---|
| Acme B.V. | finance@acme.example | Betaald | € 1.240,00 | 12 mei 2026 |
| Globex Nederland | ap@globex.example | Verzonden | € 890,50 | 10 mei 2026 |
| Initech Europe | billing@initech.example | Concept | € 312,00 | 8 mei 2026 |
| Umbrella Logistics | orders@umbrella.example | Betaald | € 4.105,75 | 5 mei 2026 |
4 rijen — statische demo-data.
Empty state
Toon wanneer een query geen rijen oplevert (bv. na filters). Combineer met de tabel-partial.
Geen facturen gevonden
Er zijn nog geen facturen of je filters leveren geen resultaten op.
Nieuwe factuurPaginatie
Links met ?page= — controller berekent offset/limit.
Geen Alpine nodig.
Toon 21–30 van 47 resultaten (pagina 3 van 5)
Dropdown
Actiemenu voor rijen of toolbars. Sluit bij klik buiten het menu of Escape.
Modal
Voorbeeld-modal
Sluit via Escape, de knop, of klik buiten het venster.
Bevestigingsdialoog
Apart van een algemene modal: expliciete bevestiging, primaire focus op
Annuleren.
Optioneel: fetch met
X-CSRF-Token.
Item verwijderen?
Deze actie kan niet ongedaan worden gemaakt. Demo roept
POST /test/demo-delete aan.
Formulier (POST + CSRF)
Verstuurt naar POST /test,
zet een flash-message en redirect terug (PRG).
Inline validatie
Statisch voorbeeld — verstuur het formulier met een ongeldig adres voor live validatie.
Fetch demo
Roept GET /health aan via
Alpine.data('fetchHealth').
REST demo (server-side)
De controller roept
JSONPlaceholder
aan via HttpClient.
POST/PUT sturen een vaste demo-body; de browser gebruikt
X-CSRF-Token voor state-changing requests.
AI agent demo (server-side)
Stel een vraag; de controller roept een OpenAI-compatible Chat Completions-endpoint aan via
AiAgent.
De API-key blijft server-side. Model instellen via AI_AGENT_MODEL (default: gpt-5.4-mini).