Catalog Slideouts

<.docked_slideout>

ConnieUI.Slideouts

Director Agreement

The document's page sits here, beside the panel.

Details

Signers, dates and reminders go here.

HEEx 
<div class="relative h-[36rem] w-full transform-gpu overflow-hidden [--top-bar:0px] rounded-lg ring-1 ring-secondary ring-inset">
  <ConnieUI.Slideouts.docked_slideout id="catalog-docked">
    <:main>
      <ConnieUI.Layouts.block hspace vspace>
        <ConnieUI.Typography.heading level="h1">Director Agreement</ConnieUI.Typography.heading>
        <ConnieUI.Typography.muted>The document's page sits here, beside the panel.</ConnieUI.Typography.muted>
      </ConnieUI.Layouts.block>
    </:main>
    <:header>
      <ConnieUI.Typography.heading level="h2">Details</ConnieUI.Typography.heading>
    </:header>
    <ConnieUI.Slideouts.contents>
      <ConnieUI.Slideouts.section>
        <ConnieUI.Typography.muted>Signers, dates and reminders go here.</ConnieUI.Typography.muted>
      </ConnieUI.Slideouts.section>
    </ConnieUI.Slideouts.contents>
  </ConnieUI.Slideouts.docked_slideout>
</div>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:string
:string

names the drawer and the floating button that opens it, below `xl`

:string

the `value` of the selected `:tab`

server-rendered mini state for the docked panel. When set, the host owns persistence: every desktop toggle pushes a `"nav:panel"` event with `%{"collapsed" => boolean}` for the host to store

Docs

A panel docked beside the page from `xl` up, and an overlay drawer below it. Docked, it is part of the page: it starts below the host's top bars, offset by `--top-bar` like the navigation. As a drawer it covers the page, bars included, the way a modal does: it is a labelled dialog while open, takes the focus and keeps it, closes on Escape or a tap on the backdrop, and gives the focus back to whatever opened it. Widening the window to `xl` puts an open drawer away, so it docks rather than coming back as a drawer later. In print, the panel and its controls are left out and the page gets the whole width.
Attribute Type Default Description
id * :string
label :string "Panel"
names the drawer and the floating button that opens it, below `xl`
current :string nil
the `value` of the selected `:tab`
collapsed :boolean nil
server-rendered mini state for the docked panel. When set, the host owns persistence: every desktop toggle pushes a `"nav:panel"` event with `%{"collapsed" => boolean}` for the host to store
Slot Slot attributes Description
:tab value, icon, click, badge, badge_label the panel's tabs; the content is the label. When given, the floating toggle is replaced on desktop by a collapsed icon strip, mirroring `ConnieUI.Navigation`'s mini mode, and two or more also get a tab bar under the header
:action icon, click, primary, flush the panel's actions; the content is the label. Each renders as a button at the end of the header, which runs `click`, and as an icon in the collapsed strip, which only expands the panel so the action is taken with it in view
:main *
:header the panel's title, rendered in a `header/1`
:header_actions header-only controls placed before the `:action` buttons (back links, dropdowns). There is no Cancel when there are neither: the panel is put away by its collapse control, Escape or the floating button
inner_block *