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.