Class: Yattho::Alpha::Dropdown

Inherits:
Component
  • Object
show all
Defined in:
app/components/yattho/alpha/dropdown.rb,
app/components/yattho/alpha/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.

Direct Known Subclasses

Dropdown

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 inherited from Component

deprecated?, generate_id

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(Yattho::Alpha::Dropdown.new) do |component| %>
  <% component.with_button do %>
    Dropdown
  <% end %>

  <% component.with_menu(header: "Options") do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_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(Yattho::Alpha::Dropdown.new) do |component| %>
    <% component.with_button do %>
      Dropdown
    <% end %>

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

With direction

<%= render(Yattho::Alpha::Dropdown.new(display: :inline_block)) do |component| %>
  <% component.with_button do %>
    Dropdown
  <% end %>

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

With caret

<%= render(Yattho::Alpha::Dropdown.new(with_caret: true)) do |component| %>
  <% component.with_button do %>
    Dropdown
  <% end %>

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

Customizing the button

<%= render(Yattho::Alpha::Dropdown.new) do |component| %>
  <% component.with_button(scheme: :primary, size: :small) do %>
    Dropdown
  <% end %>

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

Menu as list

<%= render(Yattho::Alpha::Dropdown.new) do |component| %>
  <% component.with_button do %>
    Dropdown
  <% end %>

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

Customizing menu items

<%= render(Yattho::Alpha::Dropdown.new) do |component| %>
  <% component.with_button do %>
    Dropdown
  <% end %>

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

Parameters:

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

    <%= one_of(Yattho::Beta::Details::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 %>



137
138
139
140
141
142
143
144
145
146
147
 
# File 'app/components/yattho/alpha/dropdown.rb', line 137

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) 


149
150
151
 
# File 'app/components/yattho/alpha/dropdown.rb', line 149

def render?
  button? && menu?
end