Catalog Dropdowns

<.selectable_item>

ConnieUI.Dropdowns

Payment file
Chasing signatures
HEEx 
<div class="w-xs rounded-lg bg-primary py-1 shadow-lg ring-1 ring-secondary_alt">
  <ConnieUI.Dropdowns.selectable_item value="payment-file" selected click={JS.push("select_view")}>
    Payment file
    <:actions>
      <ConnieUI.Buttons.utility
        icon="icon-edit-02"
        aria_label="Edit view"
        click={JS.push("edit_view")}
      />
    </:actions>
  </ConnieUI.Dropdowns.selectable_item>
  <ConnieUI.Dropdowns.selectable_item value="chasing" click={JS.push("select_view")}>
    Chasing signatures
  </ConnieUI.Dropdowns.selectable_item>
</div>

Variant matrix

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

Controls

:string

Set by the example

click

Docs

A row that is one of a set, with a check when it is the chosen one. The shape a combo box's items have, so a menu offering the same kind of choice looks the same: `ConnieUI.ComboBoxes.item/1` is this with the selector driving it, and a plain popover passes `:click` and drives it itself. The check leads the row and keeps its place when there is nothing to check, so every label in the list starts on the same edge. It is drawn from `data-selected` rather than chosen here, because a selector re-renders these rows from their own HTML and sets that attribute as the choice moves. `:actions` is a control at the end of the row, a pencil into the thing the row names. It sits inside the row's own hover surface and is marked `data-prevent-select`, so it reads as part of the row without picking it.
Attribute Type Default Description
value :string ""
selected :boolean false
click {:struct, Phoenix.LiveView.JS} nil
what picking the row does, for a row outside a selector
rest :global
e.g. `role="option"` and `aria-selected` inside a listbox
Slot Slot attributes Description
inner_block *
:actions