FluentUI (Design-System-Bibliothek)
FluentUI ist der vorlagenunabhängige Bausatz des Hauses: gemeinsame --wk-*-Gestaltungswerte, eine Werkbank-Schale mit Regionen und Registerkarten, ein Katalog fertiger Bausteine (Baum, Datenraster, Eigenschaftsraster, Werkzeugleiste, Formulare) und die automatischen Einstiegs-Weiterleitungen. Gedacht ist das Paket für Plugin-Entwickler, die eine Verwaltungsoberfläche bauen, ohne eigenes CSS zu erfinden, und für Verwalter, die Aussehen, Sprache und Einstiegspunkt des Wikis festlegen.
Erste Schritte
Schnelleinstieg: Einen Verwaltungsbildschirm in der Werkbank öffnen — der kürzeste Weg zum ersten Ergebnis, in zwei Schritten, ohne Code.
Helfer laden → Schale zeichnen → Baustein ergänzen → Methodenvertrag nachschlagen
Häufige Aufgaben
| Was Sie wollen | Für wen | Wo Sie das tun | Anleitung |
|---|---|---|---|
| von Null eine Verwaltungsoberfläche bauen | Entwickler | eigenes Paket | Tutorial: Erste Admin-Oberfläche |
| einen einzelnen Baustein ergänzen (Werkzeugleiste, Eigenschaften-Panel, Registerkarten) | Entwickler | eigenes Paket | How-to: Bausteine ergänzen |
| ein eigenes Paket an die Werkbank anschließen | Entwickler | Ereignis und Deskriptor | Workbench Plugin Contract v1 |
| eine Methode oder einen Parameter nachschlagen | Entwickler | – | Helper-API |
| einen Gestaltungswert nachschlagen | Entwickler | – | Design-Tokens |
| einen Baustein aus dem Katalog auswählen | Entwickler | – | Widget-Katalog |
| Haut, Akzent oder Schema festlegen | Verwaltung | Administration > Theme Builder | Konfiguration: Aussehen |
| den Einstiegspunkt des Wikis umleiten | Verwaltung | Konfigurationsmanager | Konfiguration: Einstiegs-Weiterleitung |
| eine Einstellung ändern und ihre Wirkung kennen | Verwaltung | Konfigurationsmanager | Konfigurationsreferenz |
| nachsehen, wie die Regionen geschnitten sind | Entwickler | – | Basic Layout, Wiki Layout |
Ablauf im Überblick
Die Schale besteht aus benannten Regionen, die ein Paket einzeln belegt — Seitenleiste, Inhalt, Nebenleiste, Statusleiste, dazu Leisten und Kopfzeilen. Die Skizze zeigt die Regionen des generischen Bausatzes; die vollständige Zuordnung, welche Region ausgeliefert ist und welche die Hausvorlage beisteuert, steht in der Bereichsreferenz.
rail
rail--right
Wichtigste Funktionen
- Gestaltungswerte
--wk-*als site-weite Vorgabe — Farbe, Größe, Radius, Abstand und Schrift, aus VS Code und Azure Data Studio hergeleitet - Werkbank-Schale mit Regionen, Registerkartenverwaltung und Anordnungen, unabhängig von der aktiven Vorlage
- Bausteinkatalog: Baum, Baumliste, Datenraster, Eigenschaftsraster, Werkzeugleiste, Navigationsleiste, Editoren, Formularseiten und Basis-Widgets
- Helper-API für ACL-bewusste Modulaufzählung, Galerie-Listen, paketübergreifende Navigation und Initialen-Berechnung
- Zwei automatische Weiterleitungen: Einstiegspunkt je Sprache und Gruppe, Namensraum-Index auf die Startseite — beide abschaltbar
- Theme Builder als Verwaltungsbildschirm für Haut, Akzent und Schema
Kernbegriffe
Eine Vorlage liefert Aussehen, ein Plugin liefert Struktur. Alles, was einen Vorlagenwechsel überleben muss — Werkbank, Regionen, Reiterverwaltung, Weiterleitungen, Modulaufzählung, Initialen-Berechnung, Token-Vorgaben — gehört in dieses Paket. Bei der Hausvorlage wkbizway bleibt, was nur mit ihr Sinn ergibt: Farbtokens, Schemata, Seitenraster, Kopf und Fuß. Der Prüfstand dazu ist Hausregel und Teil jeder Abnahme: ist das BizWay-Thema abgeschaltet, läuft die Werkbank unverändert.
Die Unabhängigkeit trägt DokuWikis eigener Mechanismus: css_pluginstyles() bindet die Stile jedes aktivierten Pakets site-weit ein. Die Ladereihenfolge lautet Kern → Plugin → Vorlage → Benutzer; eine aktive Vorlage kann die Vorgaben also überschreiben, und wenn sie keine eigenen Werte setzt, gilt die Vorgabe dieses Pakets. Vollständig: Styles-Contract.
Verwaltung
- Administration > Theme Builder (
do=admin&page=wkfluentui_themebuilder) — Haut, Akzent, Schema und Dichte - Konfigurationsreferenz — alle Einstellungen mit Typ, Vorgabe und Rangfolge gegenüber der Wahl eines Benutzers
- Rangfolge der Vorgaben — wer gewinnt, wenn Vorlage, Paket und Benutzer verschiedene Werte setzen
Diagnose
- Die Weiterleitung greift bei keinem Seitenaufruf — meist
landing_pageauf ein Ziel statt auf den Auslöse-Namen gesetzt
Für Entwickler
- Workbench Plugin Contract v1 — Ereignis, Deskriptor, Fähigkeiten, Berechtigungen
- Helper-API — die tatsächlich umgesetzten Methodenverträge
- Design-Tokens — Farbe, Größe, Radius, Abstand, Typografie
- Plugin-README — englische Repo-Fassung, aus
README.mdeingebettet - Styles-Contract — wer welche Tokens definieren darf
Verwandte Themen
- Tutorial: Erste Admin-Oberfläche mit FluentUI bauen — erste Verwaltungsoberfläche von Null bauen
- How-to: Einzelne Bausteine ergänzen — einzelne Bausteine ergänzen
- FluentUI: Konfigurationsreferenz — Konfigurationsreferenz
- Workbench Plugin Contract v1 — Workbench Plugin Contract v1
- Bausteinkatalog — alle Komponenten mit Grundlagen, Zugänglichkeit und Anpassung
- Bereichs-Shells — Basic Layout, Wiki Layout, Admin-Bereich
- FluentUI: Zukünftige Richtung — Wdx als Inspirationsquelle — Architektur-Entscheidung: Wdx als Inspirationsquelle, keine Laufzeit-Integration
- FluentUI: Zukünftige Richtung — Schema-gestützte Formular-Seiten — Entscheidungshistorie der Formular-Seiten
Verifiziert gegen: wkfluentui@1366902