35 lines
1.5 KiB
Plaintext
35 lines
1.5 KiB
Plaintext
<div data-controller="dropdown" data-action="click->dropdown#toggle click@window->dropdown#hide">
|
|
<div class="relative inline-block">
|
|
<div role="button" tabindex="0" data-dropdown-target="button"
|
|
class="inline-block select-none">
|
|
<% if @size == :large %>
|
|
<span class="appearance-none flex items-center inline-block">
|
|
<span class="p-2 bg-gray-50 hover:bg-gray-100 rounded-full">
|
|
<%= render partial: "icons/#{@icon_name}",
|
|
locals: { custom_class: "inline text-gray-500 h-6 w-6" } %>
|
|
</span>
|
|
</span>
|
|
<% elsif @size == :small %>
|
|
<span class="appearance-none flex items-center inline-block">
|
|
<span class="text-gray-500 hover:text-blue-600">
|
|
<%= render partial: "icons/#{@icon_name}",
|
|
locals: { custom_class: "inline h-4 w-4" } %>
|
|
</span>
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
<div data-dropdown-target="menu"
|
|
data-transition-enter="transition ease-out duration-200"
|
|
data-transition-enter-from="opacity-0 translate-y-1"
|
|
data-transition-enter-to="opacity-100 translate-y-0"
|
|
data-transition-leave="transition ease-in duration-150"
|
|
data-transition-leave-from="opacity-100 translate-y-0"
|
|
data-transition-leave-to="opacity-0 translate-y-1"
|
|
class="hidden absolute top-4 right-0 z-10 mt-5 flex w-screen max-w-max">
|
|
<div class="bg-white shadow-lg rounded border overflow-hidden w-auto">
|
|
<%= content %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|