Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add stack

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::stack> stacks its children vertically with one gap value, so the rhythm of a form or a card body comes from one place instead of a margin on every child.

Basic Usage

First
Second
Third
<x-aura::stack>
    <div class="rounded border border-aura-surface-200 p-3 text-sm">First</div>
    <div class="rounded border border-aura-surface-200 p-3 text-sm">Second</div>
    <div class="rounded border border-aura-surface-200 p-3 text-sm">Third</div>
</x-aura::stack>
<x-aura::stack gap="lg">
    <x-aura::field label="Name"><x-aura::input id="name" /></x-aura::field>
    <x-aura::field label="Email"><x-aura::input id="email" /></x-aura::field>
</x-aura::stack>

Props

Prop Type Default Description
gap string 'md' none, xs, sm, md, lg, xl.
align string|null null Cross-axis alignment: start, center, end, stretch.
as string 'div' Element to render.

Notes

Spacing belongs to the container, not to the children. A child that carries its own bottom margin will fight the stack's gap and win on the last item, leaving a stray space.