流式

流式布局是一种布局组件,使后代组件跨越其容器的完整宽度。


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>

屏幕阅读器

流式布局不需要任何角色和属性。

键盘支持

组件不包含任何交互元素。