Layout

Side panel & inspector

Collapsible right-hand panels and key/value inspectors.

Side panel

Collapsible right-hand panel plus a toggle that remembers open/closed in localStorage. Pair side_panel_toggle with side_panel. Markup-only persist uses data-lantern-persist on a different key.

Toggle and panel

Handle toggle_panel and set_panel. The hook restores the last choice; empty storage defaults open at ≥1280px.

<.side_panel_toggle
  id="tickets-panel-toggle"
  panel_id="tickets-panel"
  panel_key="tickets-demo"
  open={@panel_open}
  phx-click="toggle_panel"
  kbd="]"
/>
<.side_panel id="tickets-panel" open={@panel_open} aria-label="Project panel">
  <.inspector aria-label="Ticket">
    <.inspector_section title="Properties">
      <.description_list layout="dense">
        <:item label="Status">in_progress</:item>
      </.description_list>
    </.inspector_section>
  </.inspector>
</.side_panel>

Markup persist

data-lantern-persist stores open/closed without a LiveView hook. Do not share a key with side_panel_toggle.

Filters

Status, priority, and assignee.

API reference

Props and slots, introspected from the component.

side_panel/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the panel.
`id`*	`string`	`—`	DOM id; referenced by the toggle's aria-controls.
`open`	`boolean`	`false`	Whether the panel is shown.
Slots
`:inner_block`*	Panel body.

side_panel_toggle/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the button.
`event`	`string`	`"set_panel"`	LiveView event the hook pushes on restore: `%{open: boolean}`.
`id`*	`string`	`—`	DOM id for the hook.
`kbd`	`string`	`nil`	Optional keyboard hint in the tooltip.
`label`	`string`	`"Toggle panel"`	Accessible name and tooltip.
`open`	`boolean`	`false`	Current open state; mirrored to aria-pressed.
`panel_id`*	`string`	`—`	id of the `side_panel/1` this toggle controls.
`panel_key`*	`string`	`—`	localStorage key suffix, e.g. `tickets`. Stored as `lui-side-panel:<key>`.
`persist_event`	`string`	`"side_panel"`	Optional server event name the hook listens to for an explicit persist.
`size`	`sm \| md \| lg`	`"md"`
`variant`	`ghost \| outline \| primary`	`"outline"`
Slots
`:inner_block`	Override the default panel-split glyph.

Inspector

Sticky right-rail: inspector wraps inspector_section headings and a description_list with layout="dense". Values may be text or any inline control.

Properties rail

Section headings stay uppercase; values can hold badges or other lantern controls.

<.inspector aria-label="Ticket">
  <.inspector_section title="Properties">
    <.description_list layout="dense">
      <:item label="Repo">enventory_new</:item>
      <:item label="Status">in_progress</:item>
      <:item label="Tags">
        <.badge size="sm">ui</.badge>
      </:item>
    </.description_list>
  </.inspector_section>
</.inspector>

API reference

Props and slots, introspected from the component.

inspector/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the rail.
Slots
`:inner_block`*	`inspector_section/1` and `description_list` / `property_row/1` children.

inspector_section/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the section.
`title`	`string`	`nil`	Optional uppercase section heading.
Slots
`:inner_block`*	Section body, usually a dense `description_list`.