Fluxbit ViewComponents
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="modal" class="fixed inset-x-0 top-0 z-50 h-screen overflow-y-auto overflow-x-hidden md:inset-0 md:h-full flex hidden bg-red-100/50" aria-hidden="true">
  <div class="relative h-full w-full p-4 md:h-auto max-w-md">
    <div class="relative flex max-h-[90dvh] flex-col rounded-lg bg-white shadow-sm dark:bg-gray-700">
      <div class="flex items-start justify-between rounded-t border-b p-5 dark:border-red-600">
        <h3 class="text-xl font-medium text-gray-900 dark:text-white">A title</h3>
        <button class="close-button ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white" type="button" data-modal-hide="modal" aria-label="Close"><span class="sr-only">Dismiss</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
          </svg>
        </button></div>
      <div class="flex-1 overflow-auto p-6 ">
        Content of the modal
      </div>
    </div>
  </div>
</div>
<button data-modal-target="modal" data-modal-toggle="modal" class="text-white bg-blue-700 border border-transparent enabled:hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-lg text-sm p-1.5">Open modal</button>
<div class="h-40"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%= fx_modal(
  id: 'modal',
  title: 'A title',
  class: 'bg-red-100/50',
  header_props: {
    class: 'dark:border-red-600',
    remove_class: 'dark:border-gray-600'
  }
) do %>
  Content of the modal
<% end %>
<%= fx_button("data-modal-target": "modal", "data-modal-toggle": "modal", with_content: 'Open modal') %>
<div class="h-40"></div>

No notes provided.

No params configured.