Fluxbit ViewComponents
x
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="fixed inset-x-0 top-0 z-50 h-screen overflow-y-auto overflow-x-hidden md:inset-0 md:h-full flex bg-gray-900/50 dark:bg-gray-900/80 items-center justify-center" data-modal-placement="center" aria-hidden="false" onclick="if(event.target === this) this.classList.add('hidden')">
  <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-gray-600">
        <h3 class="text-xl font-medium text-gray-900 dark:text-white">Title of the modal</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" 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>
1
2
3
4
5
6
7
8
9
10
render Fluxbit::ModalComponent.new(
  title: "Title of the modal",
  opened: true,
  only_css: true,
  close_button: close_button,
  flat: flat,
  size: size.to_i,
  placement: placement,
  static: static
).with_content("Content of the modal")

Fluxbit::ButtonComponent

You can use this component to display a message to the user

Param Description Input

Close button

flat

Size

Placement

Static