import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const o=JSON.parse('{"title":"Modal & Drawer Components","description":"","frontmatter":{},"headers":[],"relativePath":"ui/modal.md","filePath":"ui/modal.md"}'),h={name:"ui/modal.md"};function l(e,s,k,p,d,r){return a(),t("div",null,[...s[0]||(s[0]=[n(`

Modal & Drawer Components ​

Overlay components for dialogs, side panels, and popups with reactive control.

A dialog component that appears on top of the page. The modal is completely removed from the DOM when closed, optimizing performance.

Basic Modal ​

javascript
const $open = $(false)

_button({ onclick: () => $open(true) }, 'Open Modal')

_modal({ $open: $open, title: 'Welcome' }, [
  $.html('p', {}, 'This is a simple modal dialog.'),
  _button({ onclick: () => $open(false) }, 'Close')
])
javascript
const $open = $(false)
const $result = $(null)

_modal({ $open: $open, title: 'Confirm Delete' }, [
  $.html('p', {}, 'Are you sure you want to delete this item?'),
  _button({ class: 'btn-error', onclick: () => {
    $result('Item deleted')
    $open(false)
  } }, 'Delete')
])

Drawer (_drawer) ​

A sidebar panel that slides in from the side.

Basic Drawer ​

javascript
const $open = $(false)

_drawer({
  id: 'my-drawer',
  $open: $open,
  content: $.html('div', {}, 'Main content'),
  side: $.html('div', { class: 'p-4' }, [
    $.html('h3', {}, 'Menu'),
    $.html('ul', { class: 'menu' }, [
      $.html('li', {}, [$.html('a', { onclick: () => $open(false) }, 'Close')])
    ])
  ])
})

Drawer with Navigation Menu ​

API Reference ​

PropTypeDescription
$openSignal<boolean>Controls modal visibility
titlestringModal title text

_drawer ​

PropTypeDescription
idstringUnique identifier for the drawer
$openSignal<boolean>Controls drawer visibility
contentHTMLElementMain content area
sideHTMLElementSidebar content
`,24)])])}const g=i(h,[["render",l]]);export{o as __pageData,g as default};