Drawer - JS + CSS

Drawer

ReactVueJS + CSS

Struktur HTML

Copy

<button
  type="button"
  class="ina-button ina-button--primary ina-button--md"
  id="drawer-trigger"
>
  Open Drawer
</button>

<div class="ina-drawer ina-drawer--position-left" id="drawer" style="display: none;">
  <div class="ina-drawer__backdrop"></div>
  <div class="ina-drawer__panel ina-drawer__panel--width-sm">
    <div class="ina-drawer__header">
      <h2 class="ina-drawer__title">Basic Drawer</h2>
      <button
        type="button"
        class="ina-drawer__close-button"
        aria-label="Close drawer"
      >
        <svg
          class="ina-drawer__close-icon"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 6L6 18M6 6L18 18"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </button>
    </div>
    <div class="ina-drawer__content">
      <p>This is a basic drawer with default position (left) and width (420px).</p>
      <p>Perfect for navigation menus or additional information.</p>
    </div>
  </div>
</div>

Contoh Penggunaan

Contoh 1 - Drawer Sederhana

Preview Code

Open Basic Drawer

Basic Drawer

This is a basic drawer with default position (left) and width (420px).

Perfect for navigation menus or additional information.

Copy

<div class="p-5">
  <button
    type="button"
    class="ina-button ina-button--primary ina-button--md"
    data-trigger="drawer"
    data-target="#drawer-basic"
  >
    Open Basic Drawer
  </button>
</div>

<div id="drawer-basic" class="ina-drawer ina-drawer--position-left" style="display: none;">
  <div class="ina-drawer__backdrop"></div>
  <div class="ina-drawer__panel ina-drawer__panel--width-sm">
    <div class="ina-drawer__header">
      <h2 class="ina-drawer__title">Basic Drawer</h2>
      <button type="button" class="ina-drawer__close-button" aria-label="Close drawer">
        <svg
          class="ina-drawer__close-icon"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 6L6 18M6 6L18 18"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
    <div class="ina-drawer__content">
      <p>This is a basic drawer with default position (left) and width (420px).</p>
      <p>Perfect for navigation menus or additional information.</p>
    </div>
  </div>
</div>

<script is:inline>
  document.addEventListener('DOMContentLoaded', () => {
    if (window.InaUI && typeof window.InaUI.initDrawer === 'function') {
      window.InaUI.initDrawer();
    }
  });

  document.addEventListener('astro:page-load', () => {
    if (window.InaUI && typeof window.InaUI.initDrawer === 'function') {
      window.InaUI.initDrawer();
    }
  });
</script>

Contoh 2 - Posisi Drawer

Preview Code

Open Left Open Right Open Top Open Bottom

Left Drawer

This drawer opens from the left side. But will be opened from bottom in mobile screen

Right Drawer

This drawer opens from the right side.

This drawer opens from the top.

Bottom Drawer

This drawer opens from the bottom.

Copy

<div class="p-5">
  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <button
      type="button"
      class="ina-button ina-button--primary ina-button--md"
      data-trigger="drawer"
      data-target="#drawer-pos-left"
    >
      Open Left
    </button>
    <button
      type="button"
      class="ina-button ina-button--primary ina-button--md"
      data-trigger="drawer"
      data-target="#drawer-pos-right"
    >
      Open Right
    </button>
    <button
      type="button"
      class="ina-button ina-button--primary ina-button--md"
      data-trigger="drawer"
      data-target="#drawer-pos-top"
    >
      Open Top
    </button>
    <button
      type="button"
      class="ina-button ina-button--primary ina-button--md"
      data-trigger="drawer"
      data-target="#drawer-pos-bottom"
    >
      Open Bottom
    </button>
  </div>
</div>

<!-- Left Drawer -->
<div id="drawer-pos-left" class="ina-drawer ina-drawer--position-left" style="display: none;">
  <div class="ina-drawer__backdrop"></div>
  <div class="ina-drawer__panel ina-drawer__panel--width-sm">
    <div class="ina-drawer__header">
      <h2 class="ina-drawer__title">Left Drawer</h2>
      <button type="button" class="ina-drawer__close-button" aria-label="Close drawer">
        <svg
          class="ina-drawer__close-icon"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 6L6 18M6 6L18 18"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
    <div class="ina-drawer__content">
      <p>This drawer opens from the left side. But will be opened from bottom in mobile screen</p>
    </div>
  </div>
</div>

<!-- Right Drawer -->
<div id="drawer-pos-right" class="ina-drawer ina-drawer--position-right" style="display: none;">
  <div class="ina-drawer__backdrop"></div>
  <div class="ina-drawer__panel ina-drawer__panel--width-sm">
    <div class="ina-drawer__header">
      <h2 class="ina-drawer__title">Right Drawer</h2>
      <button type="button" class="ina-drawer__close-button" aria-label="Close drawer">
        <svg
          class="ina-drawer__close-icon"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 6L6 18M6 6L18 18"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
    <div class="ina-drawer__content">
      <p>This drawer opens from the right side.</p>
    </div>
  </div>
</div>

<!-- Top Drawer -->
<div id="drawer-pos-top" class="ina-drawer ina-drawer--position-top" style="display: none;">
  <div class="ina-drawer__backdrop"></div>
  <div class="ina-drawer__panel ina-drawer__panel--width-full" style="height: 50vh;">
    <div class="ina-drawer__content">
      <p>This drawer opens from the top.</p>
    </div>
    <div class="ina-drawer__footer">
      <button type="button" class="ina-drawer__close-button" aria-label="Close drawer">
        <svg
          class="ina-drawer__close-icon"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 6L6 18M6 6L18 18"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<!-- Bottom Drawer -->
<div id="drawer-pos-bottom" class="ina-drawer ina-drawer--position-bottom" style="display: none;">
  <div class="ina-drawer__backdrop"></div>
  <div class="ina-drawer__panel ina-drawer__panel--width-full" style="height: 50vh;">
    <div class="ina-drawer__header">
      <h2 class="ina-drawer__title">Bottom Drawer</h2>
      <button type="button" class="ina-drawer__close-button" aria-label="Close drawer">
        <svg
          class="ina-drawer__close-icon"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 6L6 18M6 6L18 18"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
    <div class="ina-drawer__content">
      <p>This drawer opens from the bottom.</p>
    </div>
  </div>
</div>

<script is:inline>
  document.addEventListener('DOMContentLoaded', () => {
    if (window.InaUI && typeof window.InaUI.initDrawer === 'function') {
      window.InaUI.initDrawer();
    }
  });

  document.addEventListener('astro:page-load', () => {
    if (window.InaUI && typeof window.InaUI.initDrawer === 'function') {
      window.InaUI.initDrawer();
    }
  });
</script>

Contoh 3 - Drawer Persistent

Preview Code

Open Persistent Drawer

Persistent Drawer

This drawer cannot be closed by clicking the backdrop.

You must use the close button (X) to close it.

Copy

<div class="p-5">
  <button
    type="button"
    class="ina-button ina-button--primary ina-button--md"
    data-trigger="drawer"
    data-target="#drawer-persistent"
  >
    Open Persistent Drawer
  </button>
</div>

<div
  id="drawer-persistent"
  class="ina-drawer ina-drawer--position-left"
  data-persistent="true"
  style="display: none;"
>
  <div class="ina-drawer__backdrop"></div>
  <div class="ina-drawer__panel ina-drawer__panel--width-sm">
    <div class="ina-drawer__header">
      <h2 class="ina-drawer__title">Persistent Drawer</h2>
      <button type="button" class="ina-drawer__close-button" aria-label="Close drawer">
        <svg
          class="ina-drawer__close-icon"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18 6L6 18M6 6L18 18"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
    <div class="ina-drawer__content">
      <p>This drawer cannot be closed by clicking the backdrop.</p>
      <p>You must use the close button (X) to close it.</p>
    </div>
  </div>
</div>

<script is:inline>
  document.addEventListener('DOMContentLoaded', () => {
    if (window.InaUI && typeof window.InaUI.initDrawer === 'function') {
      window.InaUI.initDrawer();
    }
  });

  document.addEventListener('astro:page-load', () => {
    if (window.InaUI && typeof window.InaUI.initDrawer === 'function') {
      window.InaUI.initDrawer();
    }
  });
</script>

Di halaman ini

• Struktur HTML
• Contoh Penggunaan