Catalog Slideouts

<.slideout>

ConnieUI.Slideouts

New document

HEEx 
<ConnieUI.Buttons.button color="secondary" click={JS.dispatch("show", to: "#catalog-slideout")}>
  Open slideout
</ConnieUI.Buttons.button>
<ConnieUI.Slideouts.slideout id="catalog-slideout">
  <ConnieUI.Slideouts.header>
    <ConnieUI.Typography.heading level="h2">New document</ConnieUI.Typography.heading>
  </ConnieUI.Slideouts.header>
  <ConnieUI.Slideouts.contents>
    <ConnieUI.Slideouts.section>
      <ConnieUI.Forms.input>
        <:label>
          <ConnieUI.Forms.label field={@form[:title]}>Title</ConnieUI.Forms.label>
        </:label>
        <ConnieUI.Forms.text field={@form[:title]} />
      </ConnieUI.Forms.input>
    </ConnieUI.Slideouts.section>
  </ConnieUI.Slideouts.contents>
</ConnieUI.Slideouts.slideout>

Variant matrix

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

Controls

:string

Set by the example

after_close callback

Docs

No @doc for this component.

Attribute Type Default Description
id :string
show :boolean false
after_close {:struct, Phoenix.LiveView.JS} nil
callback {:struct, Phoenix.LiveView.JS} nil
Slot Slot attributes Description
inner_block *