Inplace

Inplaceは、出力をクリックすると実際のコンテンツが表示される、編集と表示を同時に簡単に行えるようにします。

インポート#


import { Inplace, InplaceDisplay, InplaceContent } from 'primereact/inplace';

基本#

Inplaceコンポーネントは、表示モード用のInplaceDisplayと、実際のコンテンツとして表示するためのInplaceContentが必要です。

コンテンツを表示


<Inplace>
    <InplaceDisplay>View Content</InplaceDisplay>
    <InplaceContent>
        <p className="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>
    </InplaceContent>
</Inplace>

入力#

Inplaceは、編集可能にする前に値を読み取り専用として表示するために、フォーム内で使用できます。closableプロパティは、コンテンツの横にクローズボタンを追加して、読み取り専用モードに戻ります。

クリックして編集


 <Inplace closable>
    <InplaceDisplay>{text || 'Click to Edit'}</InplaceDisplay>
    <InplaceContent>
        <InputText value={text} onChange={(e) => setText(e.target.value)} autoFocus />
    </InplaceContent>
</Inplace>

画像#

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

画像を表示


<Inplace>
    <InplaceDisplay>
        <span className="inline-flex align-items-center">
            <span className="pi pi-image"></span>
            <span className="ml-2">View Picture</span>
        </span>
    </InplaceDisplay>
    <InplaceContent>
        <img className="w-full" alt="Nature" src="/images/nature/nature1.jpg" />
    </InplaceContent>
</Inplace>

遅延読み込み#

onOpenイベントを使用すると、テーブルに表示する前に、データを遅延読み込みできます。

データを表示


<Inplace onOpen={onOpen}>
    <InplaceDisplay>
        View Data
    </InplaceDisplay>
    <InplaceContent>
        <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>
    </InplaceContent>
</Inplace>

アクセシビリティ#

スクリーンリーダー

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

表示要素は、デフォルトで表示モードでbuttonロールを使用します。displayPropsを使用して、表示モードのコンテンツを説明するためのaria-labelまたはaria-labelledby属性の追加や、デフォルトのロールのオーバーライドなどのカスタマイズを行うことができます。

クローズ可能なインプレースコンポーネントは、デフォルトで、locale APIのaria.closeプロパティを参照するaria-labelを持つボタンを表示します。closeButtonPropsを使用して、要素をカスタマイズし、デフォルトのaria-labelをオーバーライドできます。

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

キー	機能
enter	コンテンツに切り替わります。

クローズボタンのキーボードサポート

キー	機能
enter	表示に切り替わります。
space	表示に切り替わります。