流體

Fluid 是一個佈局組件,使後代組件跨越其容器的完整寬度。


import Fluid from 'primevue/fluid';

具有fluid 選項(例如InputText)的組件具有跨越其組件完整寬度的能力。為每個組件單獨啟用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 不需要任何角色和屬性。

鍵盤支援

組件不包含任何互動元素。