Drawer

component

A panel sliding over one side of the page, for navigation, filters or details, as a native <dialog>.

Install

php bin/console ux:install drawer \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: assets/ → assets/
templates/ → templates/
Recipes: button turbo
Composer: symfony/ux-icons
twig/extra-bundle
twig/html-extra:^3.24.0
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (1)

Default

Light

Dark

Code

<div class="min-h-90">
    <twig:Drawer id="filters" open>
        <twig:Drawer:Trigger>
            <twig:Button variant="outline" {{ ...drawer_trigger_attrs }}>Filters</twig:Button>
        </twig:Drawer:Trigger>
        <twig:Drawer:Content>
            <twig:Drawer:Header>
                <twig:Drawer:Title>Filters</twig:Drawer:Title>
            </twig:Drawer:Header>
            <twig:Drawer:Body>
                <p>Narrow the list down by status and date.</p>
                <twig:Drawer:Close>
                    <twig:Button {{ ...drawer_close_attrs }}>Apply</twig:Button>
                </twig:Drawer:Close>
            </twig:Drawer:Body>
        </twig:Drawer:Content>
    </twig:Drawer>
</div>