Splitter

The built-in splitter tag — two panels side by side (or stacked) with a divider between them. Usage, orientation, panel size, and live examples.

{% splitter %} places two panels side by side (or stacked) with a draggable divider between them — a quick way to show two resizable regions of content together, like a label column beside a detail column. Provide the panels as the first and second text params, or put the first panel in the block body and the second in second. Set the first panel’s initial size with defaultSize and lay the panels out with orientation; drag the handle (or use the arrow keys when it’s focused) to resize.

Use it as {% splitter %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'splitter', …).

Body as the first panel

The block body becomes the first panel; second holds the second. defaultSize is the first panel’s initial size as a percentage (50 default); drag the handle to change it.

Both panels as params

Set first and second to skip the block body entirely — convenient when both panels are short strings or when you are calling from Python.

Stacked (vertical)

orientation='vertical' stacks the panels with a horizontal divider between them; defaultSize then sets the first (top) panel’s initial height.

With other components

The block-body panel renders as Markdown, so the first panel can hold any other component. Here it carries a badge heading above a short description.

Attributes

CSS Selectors

Each splitter carries data-aardvark-island="Splitter" on its wrapper, and Mantine exposes its parts as mantine-Splitter-* classes — target either to style it from your theme CSS.

[data-aardvark-island="Splitter"] {
  /* style every splitter on the page */
}

.mantine-Splitter-root {
  /* the root part */
}

.mantine-Splitter-pane {
  /* the pane part */
}

.mantine-Splitter-handle {
  /* the handle part */
}

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) straight onto the rendered element.