x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div data-controller="dropdown" class="elevate-dropdown--global-container"> <span data-action="click->dropdown#toggleMenu" class="elevate-dropdown--trigger"> <button type="button" class="elevate-button elevate-button--primary elevate-button--size-s elevate-button--align-center cursor-pointer"> Dropdown with Button </button> </span> <div role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1" data-dropdown-target="menu" data-transition-enter="transition ease-out duration-100" data-transition-enter-from="transform opacity-0 scale-90" data-transition-enter-to="transform opacity-100 scale-100" data-transition-leave="transition ease-in duration-75" data-transition-leave-from="transform opacity-100 scale-100" data-transition-leave-to="transform opacity-0 scale-90" class="elevate-dropdown--menu-container hidden"> <div class="elevate-dropdown--actions-container" role="none"> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Duplicate</a> <a href="#" class="block px-4 py-2 text-sm text-red-700 hover:bg-gray-100">Delete</a> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%= render(Elevate::DropdownComponent.new) do |component| %> <% component.with_trigger do %> <%= elevate_button(scheme: :primary, classes: "cursor-pointer") { 'Dropdown with Button' } %> <% end %> <% component.with_action do %> <%= elevate_link(url: "#", scheme: :none, classes: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100") { "Edit" } %> <% end %> <% component.with_action do %> <%= elevate_link(url: "#", scheme: :none, classes: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100") { "Duplicate" } %> <% end %> <% component.with_action do %> <%= elevate_link(url: "#", scheme: :none, classes: "block px-4 py-2 text-sm text-red-700 hover:bg-gray-100") { "Delete" } %> <% end %><% end %>No notes provided.
No params configured.
app/assets/stylesheets/components/dropdown.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.elevate-dropdown--global-container { @apply relative inline-block text-left;}.elevate-dropdown--actions-container { @apply py-1;}.elevate-dropdown--menu-container { @apply absolute right-0 z-10 mt-2 w-[150px] origin-top-right rounded bg-white shadow-lg ring-1 ring-indigo-500/5 focus:outline-none;}.elevate-dropdown--trigger { @apply cursor-pointer;}app/assets/javascripts/components/dropdown_controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { Controller } from "@hotwired/stimulus";import { transition } from "../helpers/transition";export default class extends Controller { static targets = ["menu"]; connect() { document.addEventListener('click', this.handleOutsideClick); } disconnect() { document.removeEventListener('click', this.handleOutsideClick); } toggleMenu(event) { event.preventDefault(); event.stopPropagation(); const dropdownControllers = this.application.controllers.filter(controller => controller instanceof this.constructor); dropdownControllers.forEach(controller => { if (controller !== this) { transition(controller.menuTarget, false) } }); if (this.menuTarget.classList.contains('hidden')) { transition(this.menuTarget, true) } else { transition(this.menuTarget, false) } } handleOutsideClick = (event) => { if (this.menuTarget && !this.menuTarget.contains(event.target)) { transition(this.menuTarget, false) } }}