Class: Fluxbit::FlexComponent

Inherits:
Component
  • Object
show all
Includes:
Config::FlexComponent
Defined in:
app/components/fluxbit/flex_component.rb

Overview

The Fluxbit::FlexComponent is a component for rendering customizable flex containers. It extends Fluxbit::Component and provides options for configuring the flex container’s appearance and behavior. You can control the flex direction, alignment, wrapping, gap, and other attributes. This component is useful for creating responsive layouts and aligning content dynamically.

Instance Method Summary collapse

Methods inherited from Component

#add, #add_popover_or_tooltip, #anyicon, #element_name, #fx_id, #icon, #options, #popover?, #random_id, #remove_class, #remove_class_from_props, #render_popover_or_tooltip, #target, #tooltip?

Methods included from IconHelpers

#chevron_double_left, #chevron_double_right, #chevron_down, #chevron_left, #chevron_right, #chevron_up, #close_icon, #ellipsis_horizontal, #eye_icon, #eye_slash_icon, #plus_icon

Constructor Details

#initialize(**props) ⇒ FlexComponent

Initializes the flex component with various customization options.



21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
# File 'app/components/fluxbit/flex_component.rb', line 21

def initialize(**props)
  @props = props

  declare_classes(@props)
  %i[vertical reverse justify_content align_items wrap wrap_reverse gap].each do |key|
    @props.delete(key)
  end

  styles[:resolutions].each do |resolution|
    if @props.key?(resolution)
      declare_classes(@props.delete(resolution), resolution)
    end
  end
end

Instance Method Details

#call ⇒ Object 



36
37
38
 
# File 'app/components/fluxbit/flex_component.rb', line 36

def call
  tag.div(content, **@props)
end