Class: Fluxbit::HeadingComponent

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

Overview

The ‘Fluxbit::HeadingComponent` is a customizable heading component that extends Component. It provides a straightforward way to generate heading elements (`<h1>` through `<h6>`) with configurable sizes, letter spacing, and line heights. Additional HTML attributes can be passed to further control the component’s behavior and styling.

Example usage:

= render Fluxbit::HeadingComponent.new(size: 2, spacing: :wider, line_height: :relaxed) do
  "My Heading"

Constant Summary

Constants inherited from Component

Component::ComponentObj

Instance Method Summary collapse

Methods inherited from Component

#add, #add_popover_or_tooltip, #anyicon, #element_name, #fx_id, #options, #random_id, #remove_class, #render_popover_or_tooltip, #target

Constructor Details

#initialize(size: nil, spacing: nil, line_height: nil, **props) ⇒ Fluxbit::HeadingComponent

Initializes the heading component with the provided options.

Examples:

= render Fluxbit::HeadingComponent.new(size: 2, spacing: :wider, line_height: :relaxed) do
  "My Heading"

Parameters:

  • size (Integer) (defaults to: nil) —

    (1) The heading level (1 through 6). Determines whether the component is ‘<h1>`, `<h2>`, etc.

  • spacing (Symbol) (defaults to: nil) —

    (:tight) The letter spacing style for the heading. Must be one of the keys defined in styles[:spacings].

  • line_height (Symbol) (defaults to: nil) —

    (:none) The line height style for the heading. Must be one of the keys defined in styles[:line_heights].

  • props (Hash) —

    Additional HTML attributes to be applied to the heading element, such as class, id, +data-*, etc.



30
31
32
33
34
35
36
37
38
39
40
41
42
 
# File 'app/components/fluxbit/heading_component.rb', line 30

def initialize(size: nil, spacing: nil, line_height: nil, **props)
  super
  @props = props
  @base_component = "h#{size || @@size}".to_sym

  add to: @props, class: [
    styles[:base],
    styles[:sizes][@base_component],
    styles[:spacings][spacing || @@spacing],
    styles[:line_heights][line_height || @@line_height]
  ]
  @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
end

Instance Method Details

#call ⇒ Object 



44
45
46
 
# File 'app/components/fluxbit/heading_component.rb', line 44

def call
  content_tag @base_component, content, **@props
end