SolRengine Starter · solrengine-ui v0.4.0
x
1
2
3
4
5
6
7
8
9
<div data-controller="sui-dropdown" class="relative inline-block">
  <div data-action="click->sui-dropdown#toggle">
    <button class='px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg text-sm'>Menu</button>
  </div>
  <div data-sui-dropdown-target="menu" class="hidden absolute z-40 left-0 mt-2 w-48 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-lg py-1">
    <a href='#' class='block px-4 py-2 text-sm text-gray-700 dark:text-gray-300'>Item 1</a>
    <a href='#' class='block px-4 py-2 text-sm text-gray-700 dark:text-gray-300'>Item 2</a>
  </div>
</div>
1
2
3
4
5
render(Solrengine::Ui::DropdownComponent.new(align: :left)) do |c|
  c.with_trigger { "<button class='px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg text-sm'>Menu</button>".html_safe }
  c.with_item { "<a href='#' class='block px-4 py-2 text-sm text-gray-700 dark:text-gray-300'>Item 1</a>".html_safe }
  c.with_item { "<a href='#' class='block px-4 py-2 text-sm text-gray-700 dark:text-gray-300'>Item 2</a>".html_safe }
end

No notes provided.

No params configured.