Catalog Modals

<.modal>

ConnieUI.Modals

New project folder

Folders group projects on the projects page. Nobody else sees them.

HEEx 
<ConnieUI.Buttons.button color="secondary" click={JS.dispatch("show", to: "#catalog-modal")}>
  Open modal
</ConnieUI.Buttons.button>
<ConnieUI.Modals.modal id="catalog-modal">
  <ConnieUI.Modals.contents icon="icon-folder-plus">
    <:heading>New project folder</:heading>
    <:paragraph>Folders group projects on the projects page. Nobody else sees them.</:paragraph>
  </ConnieUI.Modals.contents>
  <ConnieUI.Buttons.responsive_buttons>
    <ConnieUI.Buttons.button size="lg" color="secondary" click={JS.dispatch("close")}>
      Cancel
    </ConnieUI.Buttons.button>
    <ConnieUI.Buttons.button size="lg" color="primary" click={ConnieUI.Modals.close("created")}>
      Create folder
    </ConnieUI.Buttons.button>
  </ConnieUI.Buttons.responsive_buttons>
</ConnieUI.Modals.modal>

Variant matrix

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

Controls

:string
:string
: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
dismissable :boolean true
close_button :boolean true
size :string "sm"
3xs | 2xs | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | 6xl | 7xl
image :string nil
Slot Slot attributes Description
inner_block *