Dokumentation

Appearance

PassThrough (PrimeVue spezifische API) ​

PassThrough ermöglicht es, die PV-Komponenten direkt “an der Basis” zu bearbeiten, also einzelne Bestandteile einer Komponente separat zu stylen, Lifecycle hook zu registrieren usw. Man kann damit vergleichsweise tief in die Darstellung und Funktionsweise der Komponenten eingreifen, ohne auf definierte APIs angewiesen (und dadurch eingeschränkt) zu sein.

Passthrough ist die Grundlage für den “Unstyled Mode” und die Gestaltung von Komponenten mit Tailwind CSS, allerdings können die Tailwind-Klassen auch direkt (wie gewohnt) mit dem class-Attribut auf die Komponente angewandt werden (erstes Beispiel; zweites Beispiel stylt den “title”-Bereich des Panels individuell):

java
<Panel header="Global" class="mb-4">Content</Panel>
<Panel :pt="{ title: 'text-xl font-bold font-mono text-primary-500' }">Content</Panel>

Funktionsweise ​

Jede Komponente hat eine reservierte Property namens “pt”. Dieser wird ein Objekt mitgegeben, dessen Schlüssel den zu verändernden Sektionen der Komponente entsprechen. Welche Sektionen es in einer Komponente gibt, ist deren jew. Dokumentation zu entnehmen (z.B: für Autocomplete, dann zum Reiter “Pass Through” wechseln).

Achtung: es gibt eine Unterseite namens http://tailwind.primevue.org , wo es ebenfalls eine Doku für alle Komponenten gibt. Dort gibts aber keinen Reiter Pass Through, da nur die tailwindspezifischen Eigenscahften beschrieben sind => für die PT-fähigen Sektionen muss die “Standardseite” primevue.org benutzt werden!

Die Werte dieser Schlüssel im Objekt entsprechen den zu setzenden Attributen oder Styleklassen. Als Wert können Strings, Funktionen oder Objekte verwendet werden:

js
<Panel header="Header" toggleable
    :pt="{
        header: (options) => ({
            id: 'myPanelHeader',
            style: {
                'user-select': 'none'
            },
            class: [
                'border-primary',
                {
                    'bg-primary': options.state.d_collapsed,
                    'bg-primary-reverse': !options.state.d_collapsed
                }
            ]
        }),

Konzisere Syntax (gleichwertig):

java
<Panel
    pt:header:class="border-primary"
    pt:header:id="myPanelHeader"/>

Auch Lifecycle Hooks werden unterstützt.

Globale Einstellungen verwenden ​

Einstellungen, die für alle Komponenten gelten sollen, können in main.js mit der Option “pt” konfiguriert werden:

java
app.use(PrimeVue, {
    pt: {
        panel: {
            header: {
                class: 'bg-primary'
            }
        },...

Überschreiben der Eigenschaften in der Komponente mit :pt möglich, z.B.
<Panel :pt="{header: {class="bg-secondary"...}} />