Fluxbit ViewComponents

Fluxbit::PopoverComponent or fx_popover

The Fluxbit::PopoverComponent is a component for rendering customizable popovers. It extends Fluxbit::Component and provides options for configuring the popover's appearance, behavior, and content areas. You can control the popover's trigger, placement, and other interactive elements. The popover is divided into different sections (trigger and content), each of which can be styled or customized through various properties.

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

<%= render Fluxbit::PopoverComponent.new(title: "A Title") do %>
  Content
<% end %>

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

<%= fx_popover(title: "A Title") do %>
  Content
<% end %>

The result look like this:

Options

Param Default Description
title: nil The title text displayed in the popover.
has_arrown: true Determines if an arrow should be displayed on the popover.
image: nil he URL of an image to be displayed in the popover.
image_position: :right The position of the image relative to the content (:left or :right).
image_props: {} Additional HTML attributes for the image element.
size: 1 The size of the popover, corresponding to predefined Tailwind classes (e.g., 0 to 4).
remove_class: "" Classes to be removed from the default popover class list.
**props Remaining options declared as HTML attributes, applied to the outer popover container.

Examples

Default Popover

Image Popover

User profile example

Customization

You can customize the appearance and behavior of the popover component by modifying the styles and classes options in the Fluxbit::Config::PopoverComponent module.

Here's an example of how you can customize the popover component:

# config/initializers/fluxbit.rb
Fluxbit::Config::PopoverComponent.styles[:size] = 1
Fluxbit::Config::PopoverComponent.styles[:has_arrow] = false
Fluxbit::Config::PopoverComponent.styles[:image_position] = :left
Fluxbit::Config::PopoverComponent.classes[:base] = "fixed inset-x-0 top-0 h-screen overflow-y-auto overflow-x-hidden md:inset-0 md:h-full flex"

Dependencies

  • Tailwind CSS: Used for styling the component.
  • Flowbite: Used for styling, including the backdrop and default classes.

Styles

To view the current styles configuration for the Fluxbit::PopoverComponent, you can inspect:

{
  "base": "absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800",
  "size": [
    "w-24",
    "w-32",
    "w-48",
    "w-64",
    "w-96"
  ],
  "title": {
    "div": "px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700",
    "h3": "font-semibold text-gray-900 dark:text-white"
  },
  "content": "px-3 py-2",
  "image_base": "grid grid-cols-5",
  "image_content": {
    "text": "col-span-3 p-3 space-y-2",
    "image": "h-full col-span-2"
  }
}

which will output a JSON representation of the default style mappings.

References

Flowbite Modals