Skip to Content

Drawer

1.0.0

Requires Celeste 3.0.0

Put whatever you like in here

Really, if it fits you can chuck it in here 🙂

Open Drawer from the Right

This one comes from the right

And it’s wider.

Install or Update

wp celeste pull component Drawer

Dependencies will automatically be installed.

Properties

Prop Description
is Set the HTML element used for the outer element, defaults to div
id Unique ID, if not set, will be set to drawer. You should set something unique if you have more than one per page.
isOpen Default open state, defaults to false
size Set the width of the drawer, can be sm, base, lg or xl. Defaults to base
position Set the position on large devices. Can be start or end. Defaults to start

Events

Event Description
drawer-toggle Emits whenever the state of the drawer is changed. Event details includes the current state and the ID.

How to use it

<div class="flex flex-wrap gap-sm items-center">

    <Drawer>
        <Flow class="px-md py-lg">
            <h2>Put whatever you like in here</h2>
            <p>Really, if it fits you can chuck it in here :)</p>
        </Flow>
    </Drawer>

    <Drawer
        id="drawer-from-right"
        size="lg"
        position="end"
        x-on:drawer-toggle="console.log($event)"
    >
        <Slot name="trigger">
            <a href="/fallback-link/" x-on:click.prevent="isOpen = !isOpen">Open Drawer from the Right</a>
        </Slot>
        <Flow class="px-md py-lg">
            <h2>This one comes from the right</h2>
            <p>And it's wider.</p>
        </Flow>
    </Drawer>

    <Drawer is="nav">
        <Slot name="trigger">
            <Button type="button" x-on:click="isOpen = !isOpen">
                Open Menu
            </Button>
        </Slot>
        <Flow is="ul" space="sm" class="p-lg" role="list">
            <li>
                <a href="/">Home</a>
            </li>
            <li>
                <a href="/about">About</a>
            </li>
            <li>
                <a href="/services">Services</a>
            </li>
            <li>
                <a href="/contact">Contact</a>
            </li>
        </Flow>
    </Drawer>

</div>
Back to Top