Splitter

import '@bluui/web/styles.css'

import { createSplitter } from "@bluui/web";
export function mount(host: HTMLElement) {
  const note = document.createElement("input");
  note.value = "Draft survives resizing";
  note.setAttribute("aria-label", "Draft note");
  return createSplitter(
    host,
    {
      PrimaryContent: note,
      SecondaryContent: "Drag the divider, or focus it and use the arrow keys.",
      PrimarySize: 35,
      Height: "300px",
      IsCollapsible: true,
    },
    {
      LayoutChanged: (size, collapsed) => {
        host.dataset.layout = JSON.stringify({ size, collapsed });
      },
    },
  );
}

const instance = mount(document.getElementById('example')!)

// When this page or framework component is removed:
// instance.destroy()