The Fluxbit::BannerComponent is a customizable banner component that extends Fluxbit::Component. It provides various options to display important information or announcements to users with different styles, positions, and interactive elements such as close functionality and call-to-action buttons.

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

<%= render Fluxbit::BannerComponent.new(color: :info).with_content('Banner message') %>

<!-- or -->

<%= render Fluxbit::BannerComponent.new(color: :info) do %>
    Banner message
<% end %>

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

<%= fx_banner(color: :info).with_content('Banner message') %>

<!-- or -->

<%= fx_banner(color: :info) do %>
    Banner message
<% end %>

The result is:

Options

Param	Default	Description
position:	:top	Sets the position of the banner (:top, :bottom, :sticky_top, :sticky_bottom).
color:	:info	Sets the color scheme of the component.
icon:	:default	Icon to be displayed (:default for default icon based on color, false to omit).
dismissible:	true	Adds a close/dismiss button.
full_width:	true	Determines if the banner spans the full width or uses constrained layout.
class_icon:	nil	Custom class styles to icon element.
remove_class:	””	Classes to be removed from the default class list.
**props		Additional HTML attributes.

Slots

Slot	Description
cta_button	Optional call-to-action button using Fluxbit::ButtonComponent.
logo	Optional logo image element.

Examples

Default banner

Sticky banners

Marketing banner

Newsletter signup banner

Informational banner

Banner colors

Banner without icon

Banner with call-to-action

Banner with logo

Adding/Removing classes

Adding other properties

Usage with slots

You can use the banner component with CTA buttons and logos:

<%= fx_banner(color: :primary, icon: false) do |banner| %>
  <% banner.with_logo(src: "logo.svg", alt: "Company Logo", class: "h-6") %>
  <strong>Special Offer!</strong> Get 50% off your first order.
  <% banner.with_cta_button(href: "/offer", color: :primary, size: 1) do %>
    Claim Now
  <% end %>
<% end %>

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/initializers/change_banner_component_defaults.rb

Fluxbit::Config::BannerComponent.position = :sticky_top # the default is :top
Fluxbit::Config::BannerComponent.color = :warning # the default is :info
Fluxbit::Config::BannerComponent.icon = false # the default is :default
Fluxbit::Config::BannerComponent.dismissible = false # the default is true
Fluxbit::Config::BannerComponent.full_width = false # the default is true
Fluxbit::Config::BannerComponent.styles[:colors][:custom] = 'bg-purple-50 text-purple-800 border-purple-200'

Dependencies

• Anyicon: Used for rendering icons.
• Tailwind CSS: Used for styling the component.
• Flowbite: Used for styling.

Styles

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

References

Flowbite Banner