Dokumentation

Appearance

PrimeVue für Hermeneus ​

Hermeneus verwendet PrimeVue Version 4 als Komponentenbibliothek im Styled-Mode. Der zugrundeliegende Style ist Aura.

Verwendete Komponenten ​

Unter /dev/primevue/preview kann man die Komponenten betrachten, die bereits eingebunden und für Hermeneus angepasst wurden. Sie befinden sich in der Vorschaukomponente PrimevueHermeneusPreview.vue. Diese Übersicht wird sukzessive aktualisiert, wenn neue Komponenten eingebunden werden.

Workflow beim Einbinden neuer PrimeVue-Komponenten ​

Angenommen ein Entwickler möchte eine PrimeVue-Komponente einbinden, die nicht in der Vorschaukomponente PrimevueHermeneusPreview.vue vorkommt, z.B. Tree (https://primevue.org/tree/).

  1. Die Komponente muss in der globalen Hermeneus-Vue-Datei importiert und registriert werden.

/resources/js/hermeneus.vue-instance/hermeneus.vue-instance.js:

js
import Tree from 'primevue/tree';
// Weiter unten:
GlobalVue.component('Tree', Tree);
  1. Die Komponente muss in der Vorschaukomponente PrimevueHermeneusPreview.vue eingebunden werden. Bitte angemessen dokumentieren.

/resources/js/primevue/PrimevueHermeneusPreview.vue:

html
<Tree :value="treeData" />
  1. Tailwind-Styles aktivieren. Damit das Hermeneus-Preset aktiviert wird und die Komponente gestyled angezeigt wird, müssen jetzt die entsprechenden Stylesheets aktiviert werden. Dies geschieht in /resources/js/primevue/css/hermeneus/tailwind.css:
css
@import './paginator';
/* @import './timeline'; */
/* @import './tree'; */
/* @import './treetable'; */

Kommentare entfernen, um Stylesheets zu aktivieren.

css
@import './paginator';
/* @import './timeline'; */
@import './tree';
/* @import './treetable'; */

  1. Mögliche Fehler beheben: Möglicherweise verlangt die CSS-Datei einige Tailwind-Klassen, die nicht in der Hermeneus-Tailwind-CSS-Datei definiert sind. Diese Klassen können entweder ...

    • ... provisorisch in /resources/js/primevue/css/hermeneus/tailwind.css definiert werden (s. unten)
    • ... oder in der /resources/js/primevue/css/hermeneus/tree.css-Datei (oder abhängigen Komponenten) gelöscht werden.

  2. Falls nötig: Styles in der /resources/js/primevue/css/hermeneus/tree.css-Datei anpassen.

  3. Jetzt kann die Komponente zukünftig in der App verwendet werden.

Styling und Theming ​

Ein Preset ist bereits vordefiniert, es muss also nicht viel verändert werden. Es gibt jedoch Anpassungsmöglichkeiten in folgenden Dateien:

  • Hermeneus-Preset (/resources/js/primevue/presets/hermeneus/hermeneus.js): Hier werden Default-Werte für Farben, Abstände usw. eingetragen. Diese gelten für alle Komponenten.
  • /resources/js/primevue/css/hermeneus/tailwind.css: Hier werden die Stylesheets für die einzelnen Komponenten registriert.
  • /resources/js/primevue/css/hermeneus/*.css: Hier werden die einzelnen Komponenten gestyled, indem einzelne Tailwind-Klassen mit @apply angewandt werden.
  • PassThrough (siehe PassThrough (PrimeVue spezifische API)): Hier kann eine Komponente direkt und individuell gestyled werden.