SupabaseSurface.Components.Dropdown (supabase_surface v0.1.2)

A dropdown component using alpinejs.

The Dropdown defines an Alpine.js block and initializes a variable open: false indicating if the dropdown should be open. The default slot is used for the activator of the dropdown, for example a <button />, which needs to add the alpine click handlers. See example below:

Example

<Dropdown id="user-menu"
  transition={{
    enter: "transition ease-out origin-top-left duration-200",
    enter_start: "opacity-0 transform scale-90",
    enter_end: "opacity-100 transform scale-100",
    leave: "transition origin-top-left ease-in duration-100",
    leave_start: "opacity-100 transform scale-100",
    leave_end: "opacity-0 transform scale-90"
  }}
>
  <DropdownItem to="/profile">
    <DropdownItemIcon>{{ Heroicons.Outline.user(class: "w-4 h-4") }}</DropdownItemIcon>
    <Typography.Text>Profile</Typography.Text>
  </DropdownItem>
  <DropdownItem to="/logout" method={{ :post }}>
    <DropdownItemIcon>{{ Heroicons.Outline.logout(class: "w-4 h-4") }}</DropdownItemIcon>
    <Typography.Text>Logout</Typography.Text>
  </DropdownItem>
  <Button
    type="link"
    opts={{ "@click": "open = !open", "@click.away": "open = false", "@keydown.escape.window": "open = false" }}
  >
    Click me
  </Button>
</Dropdown>

Note: Alpine.js is used here to avoid needing a complete server roundtrip just to open the dropdown. As a result this can provide better UX.

Properties

  • transition :keyword, default: [] - Tailwind transition classes to apply to the dropdown..
  • side :string, values: ["top", "bottom", "left", "right"], default: "bottom" - Where to put the dropdown.
  • align :string, values: ["start", "end", "center"], default: "center" - How to align the dropdown.

Slots

  • items, required: true - The dropdown items.
  • default, required: true - The clickable element activating the dropdown.

Link to this section Summary

Link to this section Functions

Callback implementation for Phoenix.LiveComponent.mount/1.

Link to this function

update(assigns, socket)

Callback implementation for Phoenix.LiveComponent.update/2.