Drawer

Design

Code

Basic Drawer

This is the main content of the drawer.

Open Drawer

<nile-drawer id="basicDrawer" label="Basic Drawer">
    <p>This is the main content of the drawer.</p>
</nile-drawer>
<nile-button onclick="document.getElementById('basicDrawer').show()">
Open Drawer
</nile-button>

Drawer with Footer Actions

This drawer has footer actions.

Save

Cancel

Open Drawer

    <nile-drawer id="footerActionsDrawer" label="Drawer with Footer Actions">
      <p>This drawer has footer actions.</p>
      <div slot="footer">
        <nile-button onclick="alert('Save action')">Save</nile-button>
        <nile-button onclick="document.getElementById('footerActionsDrawer').hide()">
          Cancel
        </nile-button>
      </div>
    </nile-drawer>

 <nile-button onclick="document.getElementById('footerActionsDrawer').show()">
      Open Drawer
    </nile-button>

Drawer Placement

This drawer opens from the top.

Open Top Drawer

This drawer opens from the bottom.

Open Bottom Drawer

This drawer opens from the left.

Open Left Drawer

This drawer opens from the right.

Open Right Drawer

    <nile-drawer id="topDrawer" label="Top Drawer" placement="top">
      <p>This drawer opens from the top.</p>
    </nile-drawer>
    <nile-button onclick="document.getElementById('topDrawer').show()">
      Open Top Drawer
    </nile-button>
    <nile-drawer id="bottomDrawer" label="Bottom Drawer" placement="bottom">
      <p>This drawer opens from the bottom.</p>
    </nile-drawer>
    <nile-button onclick="document.getElementById('bottomDrawer').show()">
      Open Bottom Drawer
    </nile-button>
    <nile-drawer id="leftDrawer" label="Start Drawer" placement="start">
      <p>This drawer opens from the left.</p>
    </nile-drawer>
    <nile-button onclick="document.getElementById('leftDrawer').show()">
      Open Left Drawer
    </nile-button>
    <nile-drawer id="rightDrawer" label="Right Drawer" placement="end">
      <p>This drawer opens from the right.</p>
    </nile-drawer>
    <nile-button onclick="document.getElementById('rightDrawer').show()">
      Open Right Drawer
    </nile-button>

Drawer Without Header

This drawer has no header. Ensure there is another way to close it.

Close Drawer

Open Drawer

     <nile-drawer id="noHeaderDrawer" no-header>
      <p>This drawer has no header. Ensure there is another way to close it.</p>
      <nile-button onclick="document.getElementById('noHeaderDrawer').hide()">
        Close Drawer
      </nile-button>
    </nile-drawer>

    <nile-button onclick="document.getElementById('noHeaderDrawer').show()">
      Open Drawer
    </nile-button>

Drawer Contained In Parent

This drawer is contained within its parent element.

Open Contained Drawer

    <div style="position: relative; height: 200px; border: 1px solid #ccc">
      <nile-drawer id="containedDrawer" contained>
        <p>This drawer is contained within its parent element.</p>
      </nile-drawer>
      <nile-button onclick="document.getElementById('containedDrawer').show()">
        Open Contained Drawer
      </nile-button>
    </div>

Properties

Name	Description	Default
open	Indicates whether the drawer is open. Can be toggled to show or hide the drawer.	false
closeOnEscape	Allows drawer to be closed when escape key is pressed	true
preventOverlayClose	The drawer wont close when clicked on over lay or pressed esc key (but can be closed through variable or available close button).	false
label	The drawer's label as displayed in the header. Necessary for proper accessibility.	''
placement	The direction from which the drawer will open. Options are 'top', 'end', 'bottom', 'start'.	'end'
contained	If set, the drawer slides out of its parent element. Otherwise, it slides out of the viewport.	false
noHeader	Removes the header, including the default close button. Ensure an alternative close method is provided.	false

Slots

Slot Name	Description
(default)	The drawer's main content.
label	The drawer's label. Use this slot to display HTML content in the label.
header-actions	Optional actions to add to the header, such as buttons or icons.
footer	The drawer's footer, usually containing buttons for various actions.

Events

Event Name	Description
nile-show	Emitted when the drawer opens.
nile-after-show	Emitted after the drawer opens and all animations are complete.
nile-hide	Emitted when the drawer closes.
nile-after-hide	Emitted after the drawer closes and all animations are complete.
nile-initial-focus	Emitted when the drawer opens and is ready to receive focus.
nile-request-close	Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape.