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 不需要任何角色和屬性。
組件不包含任何互動元素。