---
name: kern-blazor-page
description: >
Implementiert Blazor-Pages und -Komponenten mit der PublicKernBlazor.Components-Bibliothek
(KERN Design System). Verwende diesen Skill, wenn du eine neue Blazor-Page,
eine neue Komponente oder ein Layout mit KERN-UX-Komponenten erstellen,
erweitern oder überarbeiten sollst – inklusive Projekteinbindung,
Namespaces, Enums, Formular-Pattern, Barrierefreiheit und Theming.
---
# Skill: Blazor-Pages mit PublicKernBlazor.Components implementieren
Dieser Skill beschreibt, wie Blazor-Pages und -Komponenten unter Verwendung
der `PublicKernBlazor.Components`-Bibliothek korrekt implementiert werden.
---
## 1 · Projekteinrichtung
### 1.1 NuGet-Referenz / Projektreferenz
**NuGet-Paket** (konsumierendes Projekt):
```xml
```
**Projektreferenz** (innerhalb der Solution):
```xml
```
### 1.2 Services registrieren (`Program.cs`)
```csharp
using PublicKernBlazor.Components.Extensions;
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
// Registriert ThemeService (Scoped) und IdGeneratorService (Scoped)
builder.Services.AddKernUx();
```
### 1.3 Stylesheets einbinden (`App.razor` / Root-HTML)
Füge `` im `` ein – die Komponente schreibt die CSS-Links
selbst via ``:
```razor
...
```
`KernStyles` akzeptiert optionale Parameter:
| Parameter | Standard | Beschreibung |
|---------------------|------------------------|------------------------------------------------|
| `BasePath` | `_content/PublicKernBlazor.Components` | Pfad zu den statischen Assets |
| `ThemeName` | `kern` | Name des aktiven Themes |
| `IncludeExtensions` | `true` | Extensions-Stylesheet (`css/extensions/`) einbinden |
### 1.4 Anti-FOUC-Script (Theme-Initialisierung, `App.razor`)
Das einzige erlaubte JavaScript-Snippet verhindert einen Theme-Flicker beim
ersten Laden und stellt nach Enhanced-Navigation das Theme wieder her:
```html
```
---
## 2 · Namespaces & Imports
Füge in `Components/_Imports.razor` alle KERN-Namespaces ein:
```razor
@using PublicKernBlazor.Components.Components
@using PublicKernBlazor.Components.Components.Content
@using PublicKernBlazor.Components.Components.Feedback
@using PublicKernBlazor.Components.Components.Forms
@using PublicKernBlazor.Components.Components.Layout
@using PublicKernBlazor.Components.Components.Navigation
@using PublicKernBlazor.Components.Components.Shared
@using PublicKernBlazor.Components.Components.Typography
@using PublicKernBlazor.Components.Enums
@using PublicKernBlazor.Components.Services
```
---
## 3 · Komponenten-Referenz
### 3.1 Layout
```razor
...
...
Inhalt
```
**Enums Layout:**
- `JustifyContent`: `Start | Center | End | Around | Between | Evenly`
- `AlignItems`: `Start | Center | End`
- `AlignSelf`: `Start | Center | End`
> ⚠️ Kein BEM-Modifier für Container: `kern-container` und `kern-container-fluid`
> sind eigenständige Klassen – **nicht** `kern-container--fluid`.
### 3.2 Typografie
```razor
Seitenüberschrift
Abschnittstitel
Einleitungstext
Hinweis klein fett
Feldbezeichnung
Vortext
Untertext
```
**Enums Typografie:**
- `HeadingLevel`: `Display | XLarge | Large | Medium | Small`
- `TitleSize`: `Small | Default | Large`
- `Size`: `Small | Default | Large`
- `BodyModifier`: `Default | Bold | Muted | Small | Large`
### 3.3 Formular-Komponenten
```razor
```
**Gemeinsame Parameter aller Eingabe-Komponenten:**
| Parameter | Typ | Beschreibung |
|-------------|----------|-------------------------------------------|
| `Label` | `string` | Pflichtfeld-Beschriftung |
| `Hint` | `string?` | Optionaler Hinweistext unterhalb |
| `Error` | `string?` | Fehlermeldung (aktiviert Fehlerzustand) |
| `Optional` | `bool` | Kennzeichnet optionale Felder |
| `Disabled` | `bool` | Deaktiviert das Eingabefeld |
### 3.4 Schaltflächen
```razor
Speichern
Abbrechen
Gesperrt
```
**`ButtonVariant`:** `Primary | Secondary | Tertiary`
`OnClick` erhält `MouseEventArgs` – Signatur: `Task HandleClick(MouseEventArgs _)`.
### 3.5 Feedback-Komponenten
```razor
Sachverhalt gespeichert.
Antrag übermittelt.
Bitte Pflichtfelder prüfen.
Speichern fehlgeschlagen.
Abgeschlossen
```
**`AlertType`:** `Info | Success | Warning | Danger`
**`BadgeVariant`:** `Info | Success | Warning | Danger`
### 3.6 Content-Komponenten
```razor
Antworttext
...
...
Karteninhalt
Dialoginhalt
Abbrechen
Bestätigen
| Spalte |
|---|
| Wert |
```
**`CardSize`:** `Small | Default | Large`
**`DescriptionListLayout`:** `Row | Column`
### 3.7 Navigation
```razor
Linktext
Eintrag 1
Eintrag 2
```
**`KernListVariant`:** `Default | Bullet | Number`
### 3.8 Icons
```razor
```
Wichtige `KernIconGlyph`-Werte: `Info`, `Success`, `Warning`, `Danger`,
`Settings`, `BrightnessMedium`, `Autorenew`, `ArrowForward`, `ArrowBack`,
`Check`, `Close`, `Add`, `Delete`, `Edit`, `Search`, `Download`, `Upload`.
---
## 4 · Theming
Der `ThemeService` steuert Light/Dark-Theme **ohne JavaScript** (außer dem
Anti-FOUC-Script oben):
```razor
@inject ThemeService ThemeService
@Body
@code {
private async Task ThemeWechseln(MouseEventArgs _)
{
await ThemeService.ToggleAsync(HttpContext);
}
}
```
- `ThemeService.Current` → `KernTheme.Light` oder `KernTheme.Dark`
- `ThemeService.AttributeValue` → `"light"` oder `"dark"`
- Cookie-Name: `kern-theme`
---
## 5 · Typische Page-Struktur
```razor
@page "/meine-seite"
Seitentitel – App-Name
Seitenüberschrift
Kurze Beschreibung der Seite.
@if (_ladeVorgang)
{
}
else
{
}
@code {
private bool _ladeVorgang = true;
protected override async Task OnInitializedAsync()
{
// Daten laden
await Task.Delay(0); // Platzhalter
_ladeVorgang = false;
}
}
```
---
## 6 · Mehrstufiges Formular (Antragsstrecke)
```razor
@page "/antrag"
Antrag – App-Name
Antragsstrecke
@if (_schritt < _gesamtSchritte)
{
}
@if (_schritt == 1)
{
Abbrechen
Weiter
}
else if (_schritt == 2)
{
}
else if (_schritt == _gesamtSchritte)
{
Ihr Antrag wurde erfolgreich übermittelt.
}
@code {
private int _schritt = 1;
private const int _gesamtSchritte = 3;
private string? _vorname;
private Dictionary _fehler = [];
private string? GetFehler(string feldName)
=> _fehler.TryGetValue(feldName, out var msg) ? msg : null;
private bool Validieren()
{
_fehler.Clear();
if (string.IsNullOrWhiteSpace(_vorname))
_fehler[nameof(_vorname)] = "Vorname ist ein Pflichtfeld.";
return _fehler.Count == 0;
}
private Task NächsterSchritt(MouseEventArgs _)
{
if (Validieren()) _schritt++;
return Task.CompletedTask;
}
private Task Abbrechen(MouseEventArgs _)
{
_schritt = 1;
_fehler.Clear();
return Task.CompletedTask;
}
}
```
---
## 7 · Barrierefreiheit – Pflicht-Checkliste
| Anforderung | Umsetzung |
|---|---|
| Semantisches HTML | ``, `