Sheet

The sheet component is a side panel that overlays the window content and is shown on one side of the screen. It can be used for displaying additional content like settings, input forms, cookie notices or other components like a Sidebar.

Usage

Use sheets to present supplementary information or interactive content without navigating away from the main interface. Avoid overloading sheets with too much content, as the available space is limited.

API Reference

Component attribute(s)

x-h-sheet
x-h-sheet-overlay

Attributes

x-h-sheet-overlay

Attribute	Type	Required	Description
self	boolean	true	Show/hide the sheet. This is a two-way bind. When the user clicks on the overlay, the sheet will be automatically hidden.

x-h-sheet

Attribute	Type	Required	Description
data-align	top right bottom left	false	Aligns the sheet to one side of the screen. Default is left.

Data Slots

Slot	Element
sheet	x-h-sheet
sheet-overlay	x-h-sheet-overlay

Examples

Sheet with Sidebar

<div x-data="SheetController">
  <div x-h-sheet-overlay="isOpen">
    <div x-h-sheet :data-align="side">
      <div x-h-sidebar>
        <div x-h-sidebar-content>
          <div x-h-sidebar-group>
            <div x-h-sidebar-group-label>Application</div>
            <div x-h-sidebar-group-content>
              <ul x-h-sidebar-menu>
                <li x-h-sidebar-menu-item>
                  <button x-h-sidebar-menu-nav data-active="false" @click="isOpen = false">
                    <svg x-h-lucide role="presentation" data-lucide="house"></svg>
                    <span>Home</span>
                    <span x-h-sidebar-menu-badge>11</span>
                  </button>
                </li>
                <li x-h-sidebar-menu-item>
                  <button x-h-sidebar-menu-nav data-active="false" @click="isOpen = false">
                    <svg x-h-lucide role="presentation" data-lucide="file-text"></svg>
                    <span>Documents</span>
                  </button>
                </li>
                <li x-h-sidebar-menu-item>
                  <button x-h-sidebar-menu-nav data-active="false" @click="isOpen = false">
                    <svg x-h-lucide role="presentation" data-lucide="blocks"></svg>
                    <span>Extensions</span>
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <button x-h-button @click="openSheet()">Open Sheet</button>
</div>

<script type="text/javascript">
  Alpine.data('SheetController', () => ({
    isOpen: false,
    side: 'left',
    openSheet() {
      this.isOpen = true;
    },
  }));
</script>

Alignment

<div x-data="{ isOpen: false, side: 'left' }">
  <div x-h-sheet-overlay="isOpen">
    <div x-h-sheet :data-align="side">
      <div class="flex flex-col gap-2 p-2">
        <button x-h-button @click="side = 'top'">Top</button>
        <button x-h-button @click="side = 'right'">Right</button>
        <button x-h-button @click="side = 'bottom'">Bottom</button>
        <button x-h-button @click="side = 'left'">Left</button>
        <button x-h-button @click="isOpen = false">Close</button>
      </div>
    </div>
  </div>

  <button x-h-button @click="isOpen = true">Open</button>
</div>