Drawer

Drawer подходит для контекстных деталей, quick edit и длинных вторичных сценариев без ухода со страницы. По API он близок к Modal, но панель закреплена у края экрана.

Examples

Используй Drawer, когда нужно сохранить контекст основного экрана и раскрыть боковую область с формой, метаданными или журналом.

Drawer JS

Drawer.create("details-drawer", {
  title: "Details",
  bodyHtml: `
    <p class="text">Context content, forms, logs, metadata.</p>
  `,
  actions: drawer => {
    const close = document.createElement("button");
    close.className = "btn btn-primary";
    close.textContent = "Close";
    close.addEventListener("click", () => drawer.close());
    return [close];
  }
}).show();

Left Position

Drawer.create("navigation-drawer", {
  title: "Navigation",
  position: "left",
  bodyText: "Left drawer content"
}).show();