Fluidは、子コンポーネントがコンテナの全幅に広がるようにするレイアウトコンポーネントです。
import Fluid from 'primevue/fluid';
InputTextのようなfluidオプションを持つコンポーネントは、コンポーネントの全幅に広がる機能を持っています。各コンポーネントに対して個別にfluidを有効にするのは面倒な場合があるので、代わりにFluidでコンテンツをラップすることで、より簡単な代替手段となります。
fluidプロパティを持つコンポーネントは、Fluidコンポーネントの中にネストすることができます。子コンポーネントのfluidプロパティは、最後のサンプルで示すように、Fluidコンテナよりも優先順位が高くなります。
<div>
<label for="non-fluid" class="font-bold mb-2 block">Non-Fluid</label>
<InputText id="non-fluid" />
</div>
<div>
<label for="fluid" class="font-bold mb-2 block">Fluid Prop</label>
<InputText id="non-fluid" fluid />
</div>
<Fluid>
<span class="font-bold mb-2 block">Fluid Container</span>
<div class="grid grid-cols-2 gap-4">
<div><InputText /></div>
<div><InputText /></div>
<div class="col-span-full"><InputText /></div>
<div><InputText :fluid="false" placeholder="Non-Fluid" /></div>
</div>
</Fluid>
Fluidは、役割や属性を必要としません。
このコンポーネントには、インタラクティブな要素が含まれていません。