Dropdown - Hakumi Components

Basic

The most basic dropdown menu. Hover to show menu items.

Code

<%= render HakumiComponents::Dropdown::Component.new do |dropdown| %>
  <% dropdown.with_trigger do %>
    <%= render HakumiComponents::Space::Component.new do %>
      <span>Hover me</span>
      <%= render HakumiComponents::Icon::Component.new(name: :down) %>
    <% end %>
  <% end %>
  <% dropdown.with_item(key: "1", label: "1st menu item", href: "https://www.antgroup.com", target: "_blank") %>
  <% dropdown.with_item(key: "2", label: "2nd menu item", href: "https://www.aliyun.com", icon: :smile, disabled: true) %>
  <% dropdown.with_item(key: "3", label: "3rd menu item", disabled: true) %>
  <% dropdown.with_divider %>
  <% dropdown.with_item(key: "4", label: "a danger item", danger: true) %>
<% end %>

Trigger Mode

The default trigger mode is hover. You can change it to click.

Code

<%= render HakumiComponents::Space::Component.new(size: :large) do %>
  <%= render HakumiComponents::Dropdown::Component.new(trigger: :hover) do |dropdown| %>
    <% dropdown.with_trigger do %>
      <%= render HakumiComponents::Button::Component.new do %>Hover<% end %>
    <% end %>
    <% dropdown.with_item(key: "1", label: "Hover item 1") %>
    <% dropdown.with_item(key: "2", label: "Hover item 2") %>
  <% end %>

  <%= render HakumiComponents::Dropdown::Component.new(trigger: :click) do |dropdown| %>
    <% dropdown.with_trigger do %>
      <%= render HakumiComponents::Button::Component.new do %>Click<% end %>
    <% end %>
    <% dropdown.with_item(key: "1", label: "Click item 1") %>
    <% dropdown.with_item(key: "2", label: "Click item 2") %>
  <% end %>
<% end %>

Placement

Support 6 placements: bottomLeft, bottom, bottomRight, topLeft, top, topRight.

Code

<%= render HakumiComponents::Space::Component.new(wrap: true, size: :large) do %>
  <% %i[bottom_left bottom bottom_right top_left top top_right].each do |placement| %>
    <%= render HakumiComponents::Dropdown::Component.new(placement: placement) do |dropdown| %>
      <% dropdown.with_trigger do %>
        <%= render HakumiComponents::Button::Component.new do %><%= placement.to_s.titleize %><% end %>
      <% end %>
      <% dropdown.with_item(key: "1", label: "1st menu item") %>
      <% dropdown.with_item(key: "2", label: "2nd menu item") %>
      <% dropdown.with_item(key: "3", label: "3rd menu item") %>
    <% end %>
  <% end %>
<% end %>

Arrow

Render an arrow between the trigger and dropdown menu.

Code

<%= render HakumiComponents::Dropdown::Component.new(arrow: true) do |dropdown| %>
  <% dropdown.with_trigger do %>
    <%= render HakumiComponents::Space::Component.new do %>
      <span>Hover me</span>
      <%= render HakumiComponents::Icon::Component.new(name: :down) %>
    <% end %>
  <% end %>
  <% dropdown.with_item(key: "1", label: "1st menu item") %>
  <% dropdown.with_item(key: "2", label: "2nd menu item") %>
  <% dropdown.with_item(key: "3", label: "3rd menu item") %>
<% end %>

Dropdown API

Prop	Type	Default	Description
`trigger`	`:hover \| :click or :context_menu`	`:hover`	The trigger mode which executes the dropdown action.
`placement`	`:bottom \| :bottom_left \| :bottom_right \| :top \| :top_left or :top_right`	`:bottom_left`	Placement of popup menu.
`disabled`	`Boolean`	`false`	Whether the dropdown menu is disabled.
`arrow`	`Boolean`	`false`	Whether to render the dropdown arrow.

Dropdown Item API

Prop	Type	Default	Description
`key`	`String`	`-`	Unique key of menu item (required).
`label`	`String`	`-`	Menu item label text.
`href`	`String`	`-`	URL for link items.
`target`	`String`	`-`	Link target attribute.
`icon`	`Symbol or Component`	`-`	Icon displayed before the label.
`disabled`	`Boolean`	`false`	Whether the item is disabled.
`danger`	`Boolean`	`false`	Display item in danger style.
`block`	`Block`	`-`	Custom content for the item.

HTML Options

Additional HTML attributes can be passed as keyword arguments and will be merged into the root element.

Prop	Type	Default	Description
`**html_options`	`Keyword args`	`{}`	Extra attributes merged to the wrapper element

JavaScript API

Access via element.hakumiComponent.api

Prop	Type	Default	Description
`open()`	`Method`	`-`	Open the dropdown menu
`close()`	`Method`	`-`	Close the dropdown menu
`toggle(event)`	`Method`	`-`	Toggle the dropdown menu open or closed
`isOpen()`	`Method`	`-`	Check if the dropdown menu is currently open
`getState()`	`Method`	`-`	Get current dropdown state