流式布局是一种布局组件,使后代组件跨越其容器的完整宽度。
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>
流式布局不需要任何角色和属性。
组件不包含任何交互元素。