パススルー

パススルーPropsは、コンポーネントの内部DOM構造にアクセスするためのAPIです。

基本 #

各コンポーネントには、利用可能なDOM要素に対応するキーを持つオブジェクトを定義するための特別な *pt* プロパティがあります。各値は、文字列、オブジェクト、または文字列やオブジェクトを返す関数で、スタイリング、aria、data-*、カスタム属性など、要素に適用する任意のプロパティを定義できます。値が文字列、または文字列を返す関数の場合は、クラス定義と見なされ、要素のclass属性に追加されます。すべてのコンポーネントのドキュメントには、PTを介して公開される使用可能なセクション名をドキュメント化する専用のセクションがあります。

*pt* の最も一般的な使い方は、スタイリングとカスタマイズです。 *class* および *style* プロパティは、配列、オブジェクト、条件式など、対応する Vueバインディングとまったく同じ構文をサポートします。以下の例では、PrimeFlex CSSライブラリを使用してパネルコンポーネントのスタイルを設定しています。

ヘッダー

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.(ダミーテキスト)


<Panel header="Header" toggleable
    :pt="{
        header: (options) => ({
            id: 'myPanelHeader',
            style: {
                'user-select': 'none'
            },
            class: [
                'border-primary',
                {
                    'bg-primary text-primary-contrast': options.state.d_collapsed,
                    'text-primary bg-primary-contrast': !options.state.d_collapsed
                }
            ]
        }),
        content: { class: 'border-primary text-lg text-primary-700' },
        title: 'text-xl',                                     // OR { class: 'text-xl' }
        toggler: () => 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'  // OR { class: 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast' }
    }">
    <p class="m-0">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</Panel>

宣言的 #

宣言構文は、プログラム構文の代替手段を提供します。 *pt* で始まる属性は、以下の形式に基づいてコンポーネントによって異なって解釈されます。IDE拡張機能も計画されており、将来的には値の自動補完により開発エクスペリエンスが向上する予定です。


<ComponentTag pt:[passthrough_key]:[attribute]="value" />

同じオプションに両方の構文の代替手段を使用する別の例を次に示します。


<Panel
    :pt="{
        root: {
            class='"border-1 border-solid'
        },
        header: {
            'data-test-id': 'testid',
            class: 'bg-blue-500',
            onClick: onHeaderClick
        }
    }"
>


<Panel
    pt:root:class="border border-solid"
    pt:header:id="headerId"
    pt:header:data-test-id="testId"
    pt:header:class="bg-blue-500"
    :pt:header:onClick="onHeaderClick"
>

ライフサイクル #

コンポーネントのライフサイクルフックは、*hooks* プロパティを使用してパススルーとして公開されるため、コールバック関数を登録できます。使用可能なコールバックは、*onBeforeCreate*、*onCreated*、*onBeforeUpdate*、*onUpdated*、*onBeforeMount*、*onMounted*、*onBeforeUnmount*、*onUnmounted* です。ライフサイクルフックの詳細については、Vue.jsのドキュメントを参照してください。


<Panel header="Header" :pt="panelPT">
    Content
</Panel>

グローバル #

コンポーネントタイプごとに共有パススループロパティを定義します。たとえば、以下の設定では、すべてのパネルヘッダーに *bg-primary* スタイルクラスがあり、すべてのオートコンプリートコンポーネントの幅が固定されています。これらの設定は、コンポーネントの *pt* プロパティがグローバル *pt* よりも優先されるため、特定のコンポーネントによってオーバーライドできます。


import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);

app.use(PrimeVue, {
    pt: {
        panel: {
            header: {
                class: 'bg-primary text-primary-contrast'
            }
        },
        autocomplete: {
            input: {
                root: 'w-64' // OR { class: 'w-64' }
            }
        }
    }
});

カスタムCSS #

*global* プロパティには、グローバル *pt* 設定に属するカスタムCSSを定義するための *css* オプションがあります。この機能の一般的なユースケースは、パススルーProps設定に関連するグローバルスタイルとアニメーションを定義することです。


import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);

app.use(PrimeVue, {
    pt: {
        global: {
            css: `
                button {
                    padding: 2rem;
                }

                .p-ink {
                    display: block;
                    position: absolute;
                    background: rgba(255, 255, 255, 0.5);
                    border-radius: 100%;
                    transform: scale(0);
                    pointer-events: none;
                }

                .p-ink-active {
                    animation: ripple 0.4s linear;
                }

                @keyframes ripple {
                    100% {
                        opacity: 0;
                        transform: scale(2.5);
                    }
                }
            `
        }
    }
});

UsePassThrough #

既存のパススルー設定は、*usePassThrough* ユーティリティでカスタマイズされます。最初のパラメータはカスタマイズするオブジェクト、2番目のパラメータはカスタマイズ、最後のパラメータはマージ戦略です。


import { createApp } from "vue";
import PrimeVue from "primevue/config";
import { usePassThrough } from "primevue/passthrough";
import BasePreset from "./basepreset";

const app = createApp(App);

const CustomPreset = usePassThrough(
    BasePreset,
    {
        panel: {
            title: {
                class: ['leading-none font-light text-2xl']
            }
        }
    },
    {
        mergeSections: true,
        mergeProps: false
    }
);

app.use(PrimeVue, { unstyled: true, pt: CustomPreset });

*mergeSections* は、メイン設定からのセクションが追加されるかどうかを定義し、*mergeProps* は、定義されたPropsをオーバーライドするかマージするかを制御します。 *mergeSections* のデフォルトは *true* 、*mergeProps* のデフォルトは *false* です。


const CustomPreset = usePassThrough(
    BasePreset,
    {
        panel: {
            header: 'my_panel_header'
        }
    },
    { mergeSections: true, mergeProps: false }
);

// Output:
// panel.header.class => 'my_panel_header'
// panel.title.class => Tailwind.panel.title.class


const CustomPreset = usePassThrough(
    BasePreset,
    {
        panel: {
            header: 'my_panel_header'
        }
    },
    { mergeSections: true, mergeProps: true }
);

// Output:
// panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']
// panel.title.class => Tailwind.panel.title.class


const CustomPreset = usePassThrough(
    BasePreset,
    {
        panel: {
            header: 'my_panel_header'
        }
    },
    { mergeSections: false, mergeProps: true }
);

// Output:
// panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']
// panel.title.class => undefined


const CustomPreset = usePassThrough(
    BasePreset,
    {
        panel: {
            header: 'my_panel_header'
        }
    },
    { mergeSections: false, mergeProps: false }
);

// Output:
// panel.header.class => 'my_panel_header'
// panel.title.class => undefined