Class: Primer::Dropdown

Inherits:
Component
  • Object
show all
Defined in:
app/components/primer/dropdown.rb,
app/components/primer/dropdown/menu.rb

Overview

‘Dropdown` is a lightweight context menu for housing navigation and actions. They’re great for instances where you don’t need the full power (and code) of the SelectMenu.

Defined Under Namespace

Classes: Menu

Constant Summary

Constants inherited from Component

Component::INVALID_ARIA_LABEL_TAGS

Constants included from Status::Dsl

Status::Dsl::STATUSES

Constants included from ViewHelper

ViewHelper::HELPERS

Constants included from TestSelectorHelper

TestSelectorHelper::TEST_SELECTOR_TAG

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::InvalidValueError

Instance Method Summary collapse

Methods included from JoinStyleArgumentsHelper

#join_style_arguments

Methods included from TestSelectorHelper

#add_test_selector

Methods included from FetchOrFallbackHelper

#fetch_or_fallback, #fetch_or_fallback_boolean, #silence_deprecations?

Methods included from ClassNameHelper

#class_names

Constructor Details

#initialize(overlay: :default, with_caret: false, **system_arguments) ⇒ Dropdown

Returns a new instance of Dropdown.

Examples:

Default

<%= render(Primer::Dropdown.new) do |c| %>
  <% c.button do %>
    Dropdown
  <% end %>

  <% c.menu(header: "Options") do |menu|
    menu.item { "Item 1" }
    menu.item { "Item 2" }
    menu.item { "Item 3" }
  end %>
<% end %>

With dividers


@description
  Dividers can be used to separate a group of items. They don't have any content.
@code
  <%= render(Primer::Dropdown.new) do |c| %>
    <% c.button do %>
      Dropdown
    <% end %>

    <% c.menu(header: "Options") do |menu|
      menu.item { "Item 1" }
      menu.item { "Item 2" }
      menu.item(divider: true)
      menu.item { "Item 3" }
      menu.item { "Item 4" }
      menu.item(divider: true)
      menu.item { "Item 5" }
      menu.item { "Item 6" }
    end %>
  <% end %>

With direction

<%= render(Primer::Dropdown.new(display: :inline_block)) do |c| %>
  <% c.button do %>
    Dropdown
  <% end %>

  <% c.menu(header: "Options", direction: :s) do |menu|
    menu.item { "Item 1" }
    menu.item { "Item 2" }
    menu.item { "Item 3" }
    menu.item { "Item 4" }
  end %>
<% end %>

With caret

<%= render(Primer::Dropdown.new(with_caret: true)) do |c| %>
  <% c.button do %>
    Dropdown
  <% end %>

  <% c.menu(header: "Options") do |menu|
    menu.item { "Item 1" }
    menu.item { "Item 2" }
    menu.item { "Item 3" }
    menu.item { "Item 4" }
  end %>
<% end %>

Customizing the button

<%= render(Primer::Dropdown.new) do |c| %>
  <% c.button(scheme: :primary, size: :small) do %>
    Dropdown
  <% end %>

  <% c.menu(header: "Options") do |menu|
    menu.item { "Item 1" }
    menu.item { "Item 2" }
    menu.item { "Item 3" }
    menu.item { "Item 4" }
  end %>
<% end %>

Menu as list

<%= render(Primer::Dropdown.new) do |c| %>
  <% c.button do %>
    Dropdown
  <% end %>

  <% c.menu(as: :list, header: "Options") do |menu|
    menu.item { "Item 1" }
    menu.item { "Item 2" }
    menu.item(divider: true)
    menu.item { "Item 3" }
    menu.item { "Item 4" }
  end %>
<% end %>

Customizing menu items

<%= render(Primer::Dropdown.new) do |c| %>
  <% c.button do %>
    Dropdown
  <% end %>

  <% c.menu(header: "Options") do |menu|
    menu.item(tag: :button) { "Item 1" }
    menu.item(classes: "custom-class") { "Item 2" }
    menu.item { "Item 3" }
  end %>
<% end %>

Parameters:

  • overlay (Symbol) (defaults to: :default) —

    <%= one_of(Primer::DetailsComponent::OVERLAY_MAPPINGS.keys) %>

  • with_caret (Boolean) (defaults to: false) —

    Whether or not a caret should be rendered in the button.

  • system_arguments (Hash) —

    <%= link_to_system_arguments_docs %>



134
135
136
137
138
139
140
141
142
143
144
 
# File 'app/components/primer/dropdown.rb', line 134

def initialize(overlay: :default, with_caret: false, **system_arguments)
  @with_caret = with_caret

  @system_arguments = system_arguments
  @system_arguments[:overlay] = overlay
  @system_arguments[:reset] = true
  @system_arguments[:classes] = class_names(
    @system_arguments[:classes],
    "dropdown"
  )
end

Instance Method Details

#render? ⇒ Boolean

Returns:

  • (Boolean) 


146
147
148
 
# File 'app/components/primer/dropdown.rb', line 146

def render?
  button.present? && menu.present?
end