Statische weergave van de Wicket-componenten uit metanova-ui. Knoppen en zoekvelden zijn hier alleen visueel; in de applicatie werken ze via AJAX.
Basis
Kleuren, typografie en de bouwstenen waar alles op rust.
Kleurtokens
tokens.css · Swatches
De kleuren van het thema als CSS-variabelen. Elk onderdeel gebruikt ze, dus ze wisselen mee met licht/donker en met de brand editor.
--color-bg
--color-surface
--color-panel
--color-panel-border
--color-line
--color-ink
--color-muted
--color-primary
--color-link
--color-info
--color-tag-recept
--color-tag-voorschrift
--color-tag-intake
--color-ok-bg
--color-ok-ink
--color-error-bg
--color-error-ink
Gebruik
color: var(--color-primary);
background: var(--color-panel);
border: 1px solid var(--color-line);
Typografie
--font-sans · .page-title
Titels, kaarttitels en gedempte tekst.
Paginatitel
Onderdeel
Gewone tekst met een link.
Gedempte tekst voor toelichting.
Gebruik
<h1 class="page-title">Titel</h1>
<h2 class="card-title">Kaarttitel</h2>
<p class="muted">Gedempte tekst</p>
Code
CodeBlock
Vooraf opgemaakte code of tekst met vaste breedte.
docker compose up -d --build
mvn -pl metanova-ui test
Gebruik
add(new CodeBlock("code", "mvn test"));
Acties
Knoppen, schakelaars en dingen die je kunt aanklikken.
Knoppen
Button
Vier varianten en twee maten; klikken geeft een AJAX-callback.
Gebruik
add(new Button("save", "Opslaan", Button.Variant.PRIMARY, target -> save(target)));
add(new Button("del", "Verwijderen", Button.Variant.DANGER, true, null));Schakelaar
Toggle
Aan/uit met label; de status staat in een model.
Gebruik
add(new Toggle("notify", "Meldingen", Model.of(true), null));
Status en meldingen
Labels, badges en meldingen over wat er aan de hand is.
Documentsoort
TypeTag
Gekleurd label voor de soort document.
Gebruik
add(new TypeTag("type", "intake", DocumentType.INTAKE.getCss()));Badge
Badge · Tone
Kleine statusbadge in vijf betekeniskleuren.
ConceptIn behandelingActiefLet opGeweigerd
Gebruik
<span class="badge" wicket:id="status"></span>
add(new Badge("status", "Actief", Tone.SUCCESS));Melding
Alert
Fout- en succesmelding in de kleuren van het thema.
Zo ziet een foutmelding eruit.
Zo ziet een gelukt-melding eruit.
Gebruik
<div class="alert" wicket:id="error"></div>
add(new Alert("error", Model.of("Vul een waarde in."), Alert.Kind.ERROR));Callout
Callout · Tone
Opvallend blok met titel en tekst, voor uitleg of een waarschuwing.
Gebruik
add(new Callout("note", "Let op", "Dit kan niet ongedaan worden.", Tone.WARNING));Toast
Toast
Korte bevestiging na een actie.
Gebruik
add(new Toast("saved", "Opgeslagen", Tone.SUCCESS));Avatar
Avatar
Ronde initialen van een naam.
Gebruik
add(new Avatar("who", "Mathijs Jansen"));
Navigatie
Waar ben je en waar kun je heen.
Kruimelpad
Breadcrumbs
Waar je bent; het laatste onderdeel is de huidige pagina.
Gebruik
add(new Breadcrumbs("crumbs", List.of(new Crumb("Clienten", "/clients"), new Crumb("J. Bakker", ""))));Tabbladen
Tabs
Eén actief tabblad; de index staat in een model.
Gebruik
add(new Tabs("tabs", List.of("Overzicht", "Historie"), Model.of(0), target -> target.add(body)));Paginering
Pagination
Vorige/volgende en paginanummers (1-gebaseerd).
Gebruik
add(new Pagination("pages", 5, Model.of(1), target -> target.add(table)));Stappen
Stepper
Voortgang door een proces; eerdere stappen zijn klaar.
- 1Intake
- 2Voorschrift
- 3Recept
- 4Afronding
Gebruik
add(new Stepper("steps", List.of("Intake", "Voorschrift", "Recept"), 1));Uitklappers
Accordion
Uitklapbare onderdelen op basis van details; werkt zonder JavaScript.
Wat is een intake?
Het eerste document waarin de situatie van de client wordt vastgelegd.
Kan ik een veld wijzigen?
Ja, per veld; de oude waarde blijft in de historie staan.
Wie ziet dit?
Alleen ingelogde medewerkers.
Gebruik
add(new Accordion("faq", List.of(new Accordion.Item("Vraag", "Antwoord"))));
Gegevens
Cijfers, lijsten, tabellen en diagrammen.
Kerncijfers
StatCard
Een cijfer met label en toelichting; staat in een .stat-grid.
Clienten
16
actief in het dossier
Documenten
70
12 in de laatste 30 dagen
Intakes
32
waarvan 4 open
Gebruik
add(new StatCard("kpi", Model.of("Clienten"), Model.of("16"), Model.of("actief")));Kerncijfer met trend
TrendStat · Sparkline
Cijfer met verandering en een klein verloop.
Gebruik
add(new TrendStat("kpi", "Intakes", "32", "12%", true, List.of(3, 5, 4, 8, 9, 12)));Sparkline
Sparkline
Klein lijntje zonder assen.
Gebruik
add(new Sparkline("trend", List.of(3, 5, 4, 8, 9, 12)));Horizontale balken
HBar
Balk met label, aantal en percentage; de kleur volgt de soort.
Intermitterende katheter24
Gebruik
add(new HBar("bar", "intake", 32, 100, "tag intake", "intake"));Staafdiagram
BarChart
Verticale balken per periode; de hoogste vult de hoogte.
Gebruik
add(new BarChart("chart", List.of(new BarChart.Bar("jan", 12), new BarChart.Bar("feb", 18))));Ringdiagram
Donut
Eén verhouding als ring, met label in het midden.
Gebruik
add(new Donut("done", 62, "62%"));Voortgangsbalk
ProgressBar
Voortgang met label en percentage.
Gebruik
add(new ProgressBar("p", "Intake afgerond", 70));Tabel
DataTable
Eenvoudige tabel met kopjes en rijen.
| Client | Soort | Datum | Status |
|---|
| J. Bakker | intake | 12 okt 2026 | actief |
| M. de Vries | recept | 10 okt 2026 | afgerond |
| S. Jansen | voorschrift | 8 okt 2026 | open |
Gebruik
add(new DataTable("t", List.of("Naam", "Soort"), List.of(List.of("J. Bakker", "intake"))));Itemlijst
ItemList
Rijen met titel en toelichting links, een waarde rechts.
J. BakkerIntake aangepast
12 oktM. de VriesRecept toegevoegd
10 oktS. JansenNotitie geplaatst
8 okt
Gebruik
add(new ItemList("list", List.of(new ItemList.Row("J. Bakker", "intake", "12 okt"))));Tijdlijn
Timeline
Historie van wijzigingen, nieuwste bovenaan.
- Adres gewijzigd
Dorpsstraat 1 → Kerklaan 7
- Telefoon gewijzigd
06-1234 → 06-5678
- Aangemaakt
Door intake
Gebruik
add(new Timeline("history", List.of(new Timeline.Entry("12 okt", "Gewijzigd", "A → B"))));Sleutel-waardelijst
KeyValueList
Labels met waarden, bijvoorbeeld accountgegevens.
- Gebruikersnaam
- demo
- Functie
- medewerker customer support
- Rol
- proceseigenaar
Gebruik
add(new KeyValueList("details", List.of(new Pair("Rol", "proceseigenaar"))));
Formulieren en invoer
Zoeken, filteren en velden.
Zoekveld
SearchField
Geeft tijdens het typen (gedempt, 250 ms) een AJAX-update. In de losse galerij is het alleen visueel.
Gebruik
add(new SearchField("search", query, "Zoek een client…", target -> target.add(results)));Filterknoppen
FilterChips
Eén keuze uit een lijst; de actieve knop volgt het thema.
Gebruik
add(new FilterChips<>("filters", options, selectedModel, target -> target.add(results)));Veldgroep
FormField (Border)
Label en hulptekst rond een invoerveld; het veld staat tussen de tags.
Gebruik
<div wicket:id="name"><input type="text" wicket:id="nameInput"/></div>
add(new FormField("name", "Naam", "Zoals op het ID"));
Opbouw en feedback
Kaarten, koppen, laden en lege toestanden.
Paginakop
PageHeader
Titel met een ondertitel, bovenaan elke pagina.
Gebruik
add(new PageHeader("header", Model.of("Clienten"), Model.of("16 clienten")));Onderdeelkop
SectionHeader
Kop van een onderdeel binnen een pagina.
Documenten
Alle documenten van deze client
Gebruik
add(new SectionHeader("head", "Documenten", "Alle documenten van deze client"));Kaart
Card (Border)
Kaart met titel; de inhoud staat tussen de tags van de border.
Kaarttitel
Inhoud van de kaart.
Gebruik
<div wicket:id="card">…</div>
add(new Card("card", Model.of("Titel")));Lege staat
EmptyState
Melding bij een lege lijst; zichtbaar zolang de waarde waar is.
Er zijn nog geen notities.
Gebruik
add(new EmptyState("empty", "Nog geen notities.", Model.of(true)));Spinner
Spinner
Draaiende laadindicator.
Gebruik
add(new Spinner("loading"));Skeleton
Skeleton
Grijze plaatshouder voor tekst die nog laadt.
Gebruik
add(new Skeleton("loading", 4));