Fluxbit::DrawerComponent or fx_drawer

The Fluxbit::DrawerComponent is a customizable drawer component that extends Fluxbit::Component. It allows you to create slide-out panels with various placements, sizes, and interactive behaviors. The drawer supports Stimulus integration for enhanced JavaScript interactions, swipeable functionality, and backdrop control for creating modal-like experiences.

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

&lt;%= render Fluxbit::DrawerComponent.new(placement: :left, sizing: :md) do |drawer| %&gt;
  &lt;% drawer.with_header do %&gt;
    Header Content
  &lt;% end %&gt;
  Drawer content goes here
&lt;% end %&gt;

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

&lt;%= fx_drawer(placement: :left, sizing: :md) do |drawer| %&gt;
  &lt;% drawer.with_header do %&gt;
    Header Content
  &lt;% end %&gt;
  Drawer content goes here
&lt;% end %&gt;

The result is:

Options

Param	Default	Description
placement:	:left	Position of the drawer (`:left`, `:right`, `:top`, `:bottom`)
sizing:	:sm	Size of the drawer (`:sm`, `:md`, `:lg`, `:xl`, `:full`)
show_close_button:	true	Whether to show a close button in the drawer
swipeable:	false	Enable swipe-to-open functionality (forces `:bottom` placement)
shadow:	true	Apply shadow effect to the drawer
backdrop:	true	Show backdrop behind the drawer
auto_show:	false	Automatically show drawer when component loads
body_scrolling:	false	Allow body scrolling when drawer is open
edge_offset:	nil	Offset from edge for swipeable drawers (pixels)
backdrop_classes:	nil	Custom CSS classes for the backdrop element
remove_class:	””	Classes to be removed from the default class list
**props		Additional HTML attributes

Slots

The component supports the following slots:

with_header: Add header content to the drawer with optional icon and title styling.

Examples

Default drawer

Using with Stimulus controller

Alternative Stimulus usage

Right drawer

Top drawer

Bottom drawer

Swipeable drawer

Body scrolling enabled

Backdrop disabled

Right drawer with Stimulus

Swipeable drawer with Stimulus

Body scrolling enabled with Stimulus

Backdrop disabled with Stimulus

Auto show

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_drawer_component_defaults.rb

Fluxbit::Config::DrawerComponent.placement = :right # the default is :left
Fluxbit::Config::DrawerComponent.sizing = :lg # the default is :sm
Fluxbit::Config::DrawerComponent.show_close_button = false # the default is true
Fluxbit::Config::DrawerComponent.swipeable = true # the default is false
Fluxbit::Config::DrawerComponent.shadow = false # the default is true
Fluxbit::Config::DrawerComponent.backdrop = false # the default is true
Fluxbit::Config::DrawerComponent.auto_show = true # the default is false
Fluxbit::Config::DrawerComponent.body_scrolling = true # the default is false
Fluxbit::Config::DrawerComponent.styles[:sizes][:horizontal][:xxl] = 'w-160' # add custom size

Dependencies

Stimulus: Used for JavaScript behavior and interactions.
Anyicon: Used for rendering icons in drawer headers.
Tailwind CSS: Used for styling the component.
Flowbite: Used for styling.

Styles

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

References

Flowbite Drawer