Catalog Dropdowns

<.trigger>

ConnieUI.Dropdowns

HEEx 
<div class="w-56">
  <ConnieUI.Dropdowns.dropdown
    :let={[popover: popover, button: button]}
    id="catalog-trigger"
    match_width
  >
    <ConnieUI.Dropdowns.trigger placeholder id={button} popovertarget={popover}>
      All projects
    </ConnieUI.Dropdowns.trigger>
    <:popover>
      <ConnieUI.Dropdowns.selectable_item value="all" selected click={JS.push("filter")}>
        All projects
      </ConnieUI.Dropdowns.selectable_item>
      <ConnieUI.Dropdowns.selectable_item value="p1" click={JS.push("filter")}>
        Northern Lights
      </ConnieUI.Dropdowns.selectable_item>
    </:popover>
  </ConnieUI.Dropdowns.dropdown>
</div>

Variant matrix

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

Controls

:string
:string
:string

the label is standing in for a choice nobody has made yet, and reads in placeholder grey the way a combo box's does. A filter showing "All projects" is not narrowing anything and should not look like one that is.

Set by the example

class

Docs

A dropdown's trigger, dressed as a form control rather than as a button. For a dropdown that reads as one of the fields on a filter bar: it sits at the same height, weight and type size as `ConnieUI.Forms.select`, in the same ring, with the chevron pinned to the right rather than trailing the label. `ConnieUI.Buttons.button` is the trigger for a dropdown that reads as an action, which is a different thing and still the common one. Use this when the dropdown is standing in for a select and only the popover stops it being one, because a semibold, centred label in a row of inputs reads as the one control that does something rather than the one that filters something. <ConnieUI.Dropdowns.dropdown :let={[popover: popover, button: button]} id={@id}> <ConnieUI.Dropdowns.trigger id={button} popovertarget={popover}> {@label} </ConnieUI.Dropdowns.trigger> <:popover>...</:popover> </ConnieUI.Dropdowns.dropdown>
Attribute Type Default Description
id :string nil
popovertarget :string nil
popovertargetaction :string "toggle"
placeholder :boolean false
the label is standing in for a choice nobody has made yet, and reads in placeholder grey the way a combo box's does. A filter showing "All projects" is not narrowing anything and should not look like one that is.
class :any nil
Slot Slot attributes Description
inner_block *