Tremorx

Menu

Renders the dropdown menu

Attribute Type Documentation Default Value
on_click %JS{} Action triggered when menu button is clicked
class :string CSS classes styles to apply to the menu parent container
menu_btn_class :string CSS classes styles to apply to the menu button
menu_items_class :string CSS classes styles to apply to the menu items container
menu_item_class :string CSS classes styles to apply to the menu item container. Use this to style active and hover states
id :string "menu"
rest :global
enter :string CSS class to apply on enter transition "transition ease-out duration-200"
enter_from :string CSS class to apply on enter from "transform opacity-0 scale-95 -translate-y-2"
enter_to :string CSS class to apply on enter to "transform opacity-100 scale-100 translate-y-0"
leave :string CSS class to apply on leave transition "transition ease-in duration-150"
leave_from :string CSS class to apply on leave from "transform opacity-100 scale-100 translate-y-0"
leave_to :string CSS class to apply on leave to "transform opacity-0 scale-95 -translate-y-2"
button :slot The element that will be placed as a child of the menu button 
<:button>
  <p>Click Me</p>
</:button>

<:item>
  <button class="px-4 py-2 space-x-4 inline-flex items-center">
    <.icon name="hero-pencil-solid" class="h-5 w-5" />
    <p>Edit</p>
  </button>
</:item>

<:item>
  <button class="px-4 py-2 space-x-4 inline-flex items-center">
    <.icon name="hero-document-duplicate-solid" class="h-5 w-5" />
    <p>Duplicate</p>
  </button>
</:item>

<:item>
  <button class="px-4 py-2 space-x-4 inline-flex items-center">
    <.icon name="hero-archive-box-solid" class="h-5 w-5" />
    <p>Archive</p>
  </button>
</:item>

<:item>
  <button class="px-4 py-2 space-x-4 inline-flex items-center">
    <.icon name="hero-trash-solid" class="h-5 w-5" />
    <p>Delete</p>
  </button>
</:item>
item :slot A list of items that will be displayed in the menu items container 
<:button>
  <p>Click Me</p>
</:button>

<:item>
  <button class="px-4 py-2 space-x-4 inline-flex items-center">
    <.icon name="hero-pencil-solid" class="h-5 w-5" />
    <p>Edit</p>
  </button>
</:item>

<:item>
  <button class="px-4 py-2 space-x-4 inline-flex items-center">
    <.icon name="hero-document-duplicate-solid" class="h-5 w-5" />
    <p>Duplicate</p>
  </button>
</:item>

<:item>
  <button class="px-4 py-2 space-x-4 inline-flex items-center">
    <.icon name="hero-archive-box-solid" class="h-5 w-5" />
    <p>Archive</p>
  </button>
</:item>

<:item>
  <button class="px-4 py-2 space-x-4 inline-flex items-center">
    <.icon name="hero-trash-solid" class="h-5 w-5" />
    <p>Delete</p>
  </button>
</:item>