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.

Parameters:

  • vertical (Boolean) —

    Whether the flex direction is vertical. Defaults to ‘false`.

  • reverse (Boolean) —

    Whether the flex direction is reversed. Defaults to ‘false`.

  • justify_content (Symbol) —

    The justification of content. Options include ‘:start`, `:end`, `:center`, `:space_around`, `:space_between`, `:space_evenly`, etc. Defaults to `:center`.

  • align_items (Symbol) —

    The alignment of items. Options include ‘:start`, `:end`, `:center`, `:baseline`, `:stretch`. Defaults to `:center`.

  • wrap (Boolean) —

    Whether the flex container should wrap. Defaults to ‘false`.

  • wrap_reverse (Boolean) —

    Whether the flex container should wrap in reverse. Defaults to ‘false`.

  • gap (Integer) —

    The gap between flex items. Defaults to ‘0`.

  • props (Hash) —

    Additional HTML attributes for the container.



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