Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Component Code 
<april:sheet dismissable>
    <slot:trigger>
        <april:button variant="outline">
            Edit Profile
        </april:button>
    </slot:trigger>
    <slot:content class="sm:max-w-[425px]">
        <april:sheet-header>
            <slot:title>
                Edit profile
            </slot:title>
            <slot:description>
                Make changes to your profile here. Click save when you're done.
            </slot:description>
        </april:sheet-header>
        <div class="grid gap-4 py-4">
            <div class="grid grid-cols-4 items-center gap-4">
                <april:label for="name-1" class="text-right">Name</april:label>
                <april:input id="name-1" value="Pedro Duarte" class="col-span-3" />
            </div>
            <div class="grid grid-cols-4 items-center gap-4">
                <april:label class="text-right" for="username-1" class="text-right">Username</april:label>
                <april:input class="col-span-3" id="username-1" value="@peduarte" />
            </div>
        </div>
        <april:sheet-footer>
            <april:button class="justify-center">Save changes</april:button>
        </april:sheet-footer>
    </slot:content>
</april:sheet>

Side

Use the side attribute in the sheet slot to indicate the edge of the screen where the component will appear. The values can be top, right, bottom or left.

Component Code 
<div class="grid grid-cols-2 gap-2">
    <april:sheet dismissable>
        <slot:trigger>
            <april:button class="w-full justify-center" variant="outline">
                Top
            </april:button>
        </slot:trigger>
        <slot:content side="top">
            <april:sheet-header>
                <slot:title>
                    Edit profile
                </slot:title>
                <slot:description>
                    Make changes to your profile here. Click save when you're done.
                </slot:description>
            </april:sheet-header>
            <div class="grid gap-4 py-4">
                <div class="grid grid-cols-4 items-center gap-4">
                    <april:label for="name-1-top" class="text-right">Name</april:label>
                    <april:input id="name-1-top" value="Pedro Duarte" class="col-span-3" />
                </div>
                <div class="grid grid-cols-4 items-center gap-4">
                    <april:label class="text-right" for="username-1-top" class="text-right">Username</april:label>
                    <april:input class="col-span-3" id="username-1-top" value="@peduarte" />
                </div>
            </div>
            <april:sheet-footer>
                <april:button class="justify-center">Save changes</april:button>
            </april:sheet-footer>
        </slot:content>
    </april:sheet>
    <april:sheet dismissable>
        <slot:trigger>
            <april:button class="w-full justify-center" variant="outline">
                Right
            </april:button>
        </slot:trigger>
        <slot:content side="right">
            <april:sheet-header>
                <slot:title>
                    Edit profile
                </slot:title>
                <slot:description>
                    Make changes to your profile here. Click save when you're done.
                </slot:description>
            </april:sheet-header>
            <div class="grid gap-4 py-4">
                <div class="grid grid-cols-4 items-center gap-4">
                    <april:label for="name-1-right" class="text-right">Name</april:label>
                    <april:input id="name-1-right" value="Pedro Duarte" class="col-span-3" />
                </div>
                <div class="grid grid-cols-4 items-center gap-4">
                    <april:label class="text-right" for="username-1-right" class="text-right">Username</april:label>
                    <april:input class="col-span-3" id="username-1-right" value="@peduarte" />
                </div>
            </div>
            <april:sheet-footer>
                <april:button class="justify-center">Save changes</april:button>
            </april:sheet-footer>
        </slot:content>
    </april:sheet>
    <april:sheet dismissable>
        <slot:trigger>
            <april:button class="w-full justify-center" variant="outline">
                Bottom
            </april:button>
        </slot:trigger>
        <slot:content side="bottom">
            <april:sheet-header>
                <slot:title>
                    Edit profile
                </slot:title>
                <slot:description>
                    Make changes to your profile here. Click save when you're done.
                </slot:description>
            </april:sheet-header>
            <div class="grid gap-4 py-4">
                <div class="grid grid-cols-4 items-center gap-4">
                    <april:label for="name-1-bottom" class="text-right">Name</april:label>
                    <april:input id="name-1-bottom" value="Pedro Duarte" class="col-span-3" />
                </div>
                <div class="grid grid-cols-4 items-center gap-4">
                    <april:label class="text-right" for="username-1-bottom" class="text-right">Username</april:label>
                    <april:input class="col-span-3" id="username-1-bottom" value="@peduarte" />
                </div>
            </div>
            <april:sheet-footer>
                <april:button class="justify-center">Save changes</april:button>
            </april:sheet-footer>
        </slot:content>
    </april:sheet>
    <april:sheet dismissable>
        <slot:trigger>
            <april:button class="w-full justify-center" variant="outline">
                Left
            </april:button>
        </slot:trigger>
        <slot:content side="left">
            <april:sheet-header>
                <slot:title>
                    Edit profile
                </slot:title>
                <slot:description>
                    Make changes to your profile here. Click save when you're done.
                </slot:description>
            </april:sheet-header>
            <div class="grid gap-4 py-4">
                <div class="grid grid-cols-4 items-center gap-4">
                    <april:label for="name-1-left" class="text-right">Name</april:label>
                    <april:input id="name-1-left" value="Pedro Duarte" class="col-span-3" />
                </div>
                <div class="grid grid-cols-4 items-center gap-4">
                    <april:label class="text-right" for="username-1-left" class="text-right">Username</april:label>
                    <april:input class="col-span-3" id="username-1-left" value="@peduarte" />
                </div>
            </div>
            <april:sheet-footer>
                <april:button class="justify-center">Save changes</april:button>
            </april:sheet-footer>
        </slot:content>
    </april:sheet>
</div>

Heading level

The title renders as an h2, one level under the page heading. A reader who moves by heading needs the levels to step down one at a time. Set level when the sheet sits inside a section that already holds a heading.

<april:sheet-header level="3">
    <slot:title>Menu</slot:title>
    <slot:description>Go to a section.</slot:description>
</april:sheet-header>

Props

Prop Type Default Description
level integer 2 The heading level the title renders as. Accepts 1 to 6.

Publishing Views

Use the following commands to publish these views:

php artisan april:publish sheet
php artisan april:publish sheet-header
php artisan april:publish sheet-footer
April UI keeps package views in `vendor/` by default. The command uses Laravel's vendor publishing system and copies overrides to `resources/views/vendor/april/components`. To publish all components, run: 
php artisan april:publish --all
Review local overrides after an upgrade with `php artisan april:update --diff`.