インプレイス

Inplace は、編集と表示を同時に簡単に行えるコンポーネントです。出力をクリックすると、実際の内容が表示されます。

インポート #


import Inplace from 'primevue/inplace';

基本 #

Inplace コンポーネントは、各状態の内容を定義するためにdisplay と content テンプレートが必要です。

コンテンツの表示


<Inplace>
    <template #display> View Content </template>
    <template #content>
        <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>
    </template>
</Inplace>

入力 #

closeCallback は、イベントから呼び出されると状態を表示モードに戻します。

クリックして編集


<Inplace>
    <template #display>
        {{ text || 'Click to Edit' }}
    </template>
    <template #content="{ closeCallback }">
        <span class="inline-flex items-center gap-2">
            <InputText v-model="text" autofocus />
            <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
        </span>
    </template>
</Inplace>

画像 #

画像など、どのようなコンテンツでも Inplace 内に配置できます。

写真の表示


<Inplace>
    <template #display>
        <span class="inline-flex items-center gap-2">
            <span class="pi pi-image"></span>
            <span>View Photo</span>
        </span>
    </template>
    <template #content>
        <img class="w-full sm:w-80 shadow-md" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature8.jpg" />
    </template>
</Inplace>

遅延読み込み #

open イベントを使用して、データを遅延読み込みなど、コンテンツを初期化します。

データの表示


<Inplace @open="loadData">
    <template #display> View Data </template>
    <template #content>
        <DataTable :value="products">
            <Column field="code" header="Code"></Column>
            <Column field="name" header="Name"></Column>
            <Column field="category" header="Category"></Column>
            <Column field="quantity" header="Quantity"></Column>
        </DataTable>
    </template>
</Inplace>

アクセシビリティ #

スクリーンリーダー

Inplace コンポーネントは、デフォルトでaria-live を "polite" として定義します。有効な属性はすべてメインコンテナに渡されるため、ルート要素のariaロールと属性は簡単にカスタマイズできます。

表示モードのキーボードサポート

キー	機能
Enter	コンテンツに切り替えます。