Fluid

Fluid is a layout component to make descendant components span full width of their container.

Download #


npx volt-vue add Fluid

Import #


import Fluid from '@/volt/Fluid.vue';

Property #

Components like InputText have the ability to span the full width of their parent via the fluid property.

Non-Fluid

Fluid Prop


<template>
    <div class="card flex flex-col gap-6">
        <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>
    </div>
</template>

<script setup lang="ts">
import InputText from '@/volt/InputText.vue';
</script>

Container #

Enabling the fluid for each component individually may be cumbersome so wrap the content with Fluid to control all descendants. Note that the fluid property of a child component has higher precedence than the fluid container as shown in the last sample.


<template>
     <div class="card">
        <Fluid>
            <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>
    </div>
</template>

<script setup lang="ts">
import Fluid from '@/volt/Fluid.vue';
import InputText from '@/volt/InputText.vue';
</script>