Fluxbit::AlertComponent or fx_alert

The Fluxbit::AlertComponent is a customizable alert component that extends Fluxbit::Component. It provides various options to display alert messages with different styles, icons, and behaviors such as close functionality and animations.

To start using the alert box you can use the default way to call the component:

&lt;%= render Fluxbit::AlertComponent.new(color: :danger).with_content('Alert') %&gt;

&lt;!-- or --&gt;

&lt;%= render Fluxbit::AlertComponent.new(color: :danger) do %&gt;
    Alert
&lt;% end %&gt;

or you can use the alias (from the helpers):

&lt;%= fx_alert(color: :danger).with_content('Alert') %&gt;

&lt;!-- or --&gt;

&lt;%= fx_alert(color: :danger) do %&gt;
    Alert
&lt;% end %&gt;

The result is:

Options

Param	Default	Description
color:	:info	Sets the color scheme of the component, with being the standard color.
icon:	:default	Icon to be displayed (`:default` for default icon based on color).
can_close:	true	Adds a close button.
dismiss_timeout:	3000	Number of miliseconds before the alert disappears. Set to 0 to disable. Only works with Stimulus Component Notification installed.
out_animation:	:fade_out	Choose the dismiss animation. You can see the available options on the styles below.
fade_in_animation:	true	Set to true to fade in when the alert opens.
all_rounded:	true	Rounded corners on all sides with a border.
class_icon:	nil	Custom class styles to icon element
remove_class:	””	Classes to be removed from the default class list.
**props		Additional HTML attributes.

Note: The Fade out / Dissiming timeout animation only works with Stimulus Component Notification installed.

Examples

Default alert (with default icons)

Alerts with icon

Alerts without icon

Alerts with list

Fade Out / Dismissing timeout

Note: This Fade out / Dissiming timeout animation only works with Stimulus Component Notification installed.

Fade Out/Dismissing animation

Additional content

Adding/Removing classes

Adding other properties

Customization

You can customize the appearance and behavior of this component by passing different initialization parameters and adding custom styles. To do this you can create a initializer file like the:

# /config/initializerss/change_alert_component_defaults.rb

Fluxbit::Config::AlertComponent.color = :danger # the default is :info
Fluxbit::Config::AlertComponent.icon = :default # the default is :default
Fluxbit::Config::AlertComponent.can_close = false # the default is true
Fluxbit::Config::AlertComponent.out_animation = :fade_out # the default is :fade_out
Fluxbit::Config::AlertComponent.fade_in = true # the default is true
Fluxbit::Config::AlertComponent.dismiss_timeout = 5000 # the default is 3000
Fluxbit::Config::AlertComponent.all_rounded = true # the default is true
Fluxbit::Config::AlertComponent.styles[:all_rounded][:on] = '' # the default is 'rounded-lg border-2'

Dependencies

Stimulus Component Notification: Used for removing the element with animation.
Anyicon: Used for rendering icons.
Tailwind CSS: Used for styling the component.
Flowbite: Used for styling.

Styles

  <%= html_escape(JSON.pretty_generate(Fluxbit::Config::AlertComponent.styles)) %>

References

Flowbite Alert