GitHub::MenuComponent

back edit

To render a basic menu:

<%= render(GitHub::MenuComponent.new(
  title: "Options",
  items: [1, 2, 3].map { |index| GitHub::Menu::ButtonComponent.new(text: "Option #{index}", type: "button") }
)) %>
<details class="details-reset details-overlay d-inline-block" id="details-000">
  <summary role="button" class="btn btn-sm select-menu-button">
    <span class="">
      Options
    </span>
  </summary>
  <details-menu class="SelectMenu" role="menu" aria-label="Choose">
    <div class="SelectMenu-modal">
      <header class="SelectMenu-header">
        <div class="SelectMenu-title">Choose</div>
        <button class="SelectMenu-closeButton" type="button" aria-label="Close menu" data-toggle-for="details-000">
          <%= octicon "x" %>
        </button>
      </header>
      <div id="filter-menu-000" class="d-flex flex-column flex-1 overflow-hidden">
        <div class="SelectMenu-list">
          <button class="SelectMenu-item" role="menuitem" type="button">
            <div><div class="">Option 1</div></div>
          </button>
          <button class="SelectMenu-item" role="menuitem" type="button">
            <div><div class="">Option 2</div></div>
          </button>
          <button class="SelectMenu-item" role="menuitem" type="button">
            <div><div class="">Option 3</div></div>
          </button>
        </div>
      </div>
    </div>
  </details-menu>
</details>

To render a filterable menu:

<%= render(GitHub::MenuComponent.new(
  title: "Options",
  filterable: true,
  items: [1, 2, 3].map { |index| GitHub::Menu::ButtonComponent.new(text: "Option #{index}", type: "button") }
)) %>
<details class="details-reset details-overlay d-inline-block" id="details-001">
  <summary role="button" class="btn btn-sm select-menu-button">
    <span class="<% if @replaceable %>text-normal<% end %>">
      Options
    </span>
  </summary>
  <details-menu class="SelectMenu SelectMenu--hasFilter">
    <div class="SelectMenu-modal">
      <header class="SelectMenu-header">
        <div class="SelectMenu-title">Options</div>
        <button class="SelectMenu-closeButton" type="button" aria-label="Close menu" data-toggle-for="details-001">
          <%= octicon "x" %>
        </button>
      </header>
      <filter-input aria-owns="filter-menu-001" class="SelectMenu-filter">
        <input
          autofocus
          aria-owns="filter-menu-001"
          class="width-full form-control"
          type="text"
          aria-label="Options"
          placeholder="Options"
        >
      </filter-input>
      <div id="filter-menu-001" class="d-flex flex-column flex-1 overflow-hidden" role="menu" aria-label="Options">
        <div class="SelectMenu-list" data-filter-list>
          <button class="SelectMenu-item" role="menuitem" type="button">
            <div><div class="">Option 1</div></div>
          </button>
          <button class="SelectMenu-item" role="menuitem" type="button">
            <div><div class="">Option 2</div></div>
          </button>
          <button class="SelectMenu-item" role="menuitem" type="button">
            <div><div class="">Option 3</div></div>
          </button>
          <div class="SelectMenu-blankslate" data-filter-empty-state hidden>
            No results found.
          </div>
        </div>
      </div>
    </div>
  </details-menu>
</details>

To render a menu with defer loaded content:

<%= render(GitHub::MenuComponent.new(title: "Options", src: "/accounts", preload: true)) %>

To render a menu with Catalyst event binding:

<package-registry>
  <%= render(GitHub::MenuComponent.new(
    items: items,
    onselected: "package-registry#itemSelected"
  )) %>
</package-registry>
@controller
class PackageRegistryElement extends HTMLElement {
  itemSelected(event) {
    alert(event.detail.relatedTarget.value)
  }
}

To render a menu with custom body content instead of passing in an items array:

<%= render(GitHub::MenuComponent.new(
  title: "Options"
)) do |menu| %>
  <% menu.with(:body) do %>
    <%= render(GitHub::Menu::LinkComponent.new(href: "/new")) do %>
      <%= octicon "repo" %>
      Create a repository
    <% end %>
  <% end %>
<% end %>

To render a menu with a custom header and extra menu content:

<%= render(GitHub::MenuComponent.new(items: items, text: "Choose")) do |menu| %>
  <% menu.with(:header) do %>
    <div class="f2">
      BIG HEADER
    </div>
  <% end %>
  <% menu.with(:extra) do %>
    <div class="p-2">
      This text isn't a menu item.
    </div>
  <% end %>
<% end %>

To render a menu with a custom trigger using GitHub::MenuSummaryComponent:

<%= render(GitHub::MenuComponent.new(items: items, title: "License")) do |menu| %>
  <% menu.with(:summary) do %>
    <%= render(GitHub::MenuSummaryComponent(menu: menu)) do |summary| %>
      <% summary.with(:body) do %>
        <%= octicon "info" %>
        Choose
      <% end %>
    <% end %>
  <% end %>
<% end %>

To render a menu with a custom trigger using HTML:

<%= render(GitHub::MenuComponent.new(items: items, title: "License")) do |menu| %>
  <% menu.with(:summary) do %>
    <summary class="text-red" data-confirm="Are you sure?">Dangerous menu</summary>
  <% end %>
<% end %>