Für eine hohe Flexibilität werden alle Teile (HTML, CSS, Fonts usw.) per Komposition-Prinzip beliebig mit einander kombiniert. Damit alles korrekt funktioniert, müssen alle Teile einer spezifischen Komposition eingebunden bzw. konfiguriert werden. In den folgenden Unterabschnitten wird die Integration am Beispiel des ITZBund-Themes gezeigt.
Fonts und Icon-Fonts müssen im <head> der HTML-Seite eingebunden werden.
<head>
<link href="https://cdn.jsdelivr.net/npm/@vscode/codicons@0.0.33/dist/codicon.min.css" rel="stylesheet">
</head>
Mit KoliBri ist es möglich unterschiedliche Themes mit den Komponenten zu kombinieren. Die Verknüpfung erfolgt über die Register-Methode. Ihr können eine oder mehrere Loader für die Custom-Elements und Themes übergeben werden.
<head>
<script type="module">
import { register } from 'https://unpkg.com/@public-ui/components@1.6.0-rc.1';
import { defineCustomElements } from 'https://unpkg.com/@public-ui/components@1.6.0-rc.1/dist/loader';
import { ITZBund } from 'https://unpkg.com/@public-ui/themes@1.6.0-rc.1';
register(ITZBund, defineCustomElements)
.catch(console.warn);
</script>
</head>
Wenn ein Theme registriert wird, werden alle darin enthaltenen CSS-Properties unter dem Theme-Namen als CSS-Klasse im <head> der HTML-Seite hinzugefügt. So wird es ermöglicht, dass diese CSS-Properties in eigenem CSS für das "umrahmende" HTML wiederverwendet werden können. Damit das funktioniert, muss die CSS-Klasse mit dem Theme-Namen z.B. am <body> gesetzt werden.
<body class="itzbund" data-theme="itzbund">
...
</body>
Im VSCode können die Meta-Informationen der Komponenten und deren Eigenschaften für die Autovervollständigung von HTML aktiviert werden.
{
"html.customData": ["https://unpkg.com/@public-ui/components@1.6.0-rc.1/vscode-custom-data.json"]
}
KoliBri hat zahlreiche Hinweise für die Barrierefreiheit und Verwendung der Komponenten für die Entwicklung eingebaut. Damit die Hinweise in der Konsole des Browsers angezeigt werden, muss folgende Definition im <head> der HTML-Seite hinzugefügt werden.
<head>
<meta name="kolibri" content="dev-mode=true" />
<!-- <meta name="kolibri" content="dev-mode=true,experimental-mode=true" /> -->
</head>
<head>
<meta name="kolibri" content="experimental-mode=true" />
</head>
<head>
<meta name="kolibri" content="color-contrast-analysis=true" />
</head>
KoliBri-Komponenten sind wie eigenen HTML-Tags und werden einfach als solche im "umrahmenden" HTML (Responsiveness, Grid usw.) wiederverwendet und deren Ausprägung mittels der Komponenten-Eigenschaften bestimmt.
<kol-input-text _id="surname" _required _value="Mustermann">Surname</kol-input-text>
<kol-spin _show></kol-spin>
In der folgenden Tabelle werden alle Komponenten erläutert und deren jeweiligen Eigenschaften aufgelistet.
In der folgenden Tabelle werden alle Eigenschaften der Häufigkeit nach erläutert und jeweils die Komponenten aufgelistet, wo sie verwendet werden..
KoliBri ist unter der Lizenz