Fluxbit ViewComponents
x
1
2
3
4
5
6
7
8
<div id="alert-xiiufkrmddpfdswwkdipefxlbenuwc" role="alert" class="text-blue-800 border-blue-300 bg-blue-50 dark:text-blue-400 dark:border-blue-800 rounded-lg border-2 flex p-4 mb-4 dark:bg-gray-800"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class=" w-4 h-4">
  <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"></path>
</svg>
<div class="ml-3 text-sm font-medium">Alert</div>
<button aria-label="Close" data-dismiss-target="#alert-xiiufkrmddpfdswwkdipefxlbenuwc" type="button" class="ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex justify-center h-8 w-8 dark:bg-gray-800 bg-blue-50 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:text-blue-400 dark:hover:bg-gray-700"><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>
1
2
3
4
5
6
7
8
9
render Fluxbit::AlertComponent.new(
  color: color,
  icon: icon,
  can_close: can_close,
  dismiss_timeout: dismiss_timeout,
  fade_in_animation: fade_in_animation,
  out_animation: out_animation,
  all_rounded: all_rounded
).with_content("Alert")

Fluxbit::AlertComponent

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

Param Description Input

Color

—

Can close?

Fade In Animation

Out Animation

Dismiss timeout

All rounded?