Class: Fluxbit::BottomNavigationComponent

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

Overview

The ‘Fluxbit::BottomNavigationComponent` is a customizable bottom navigation component that extends `Fluxbit::Component`. It allows you to create fixed bottom navigation bars with multiple menu items, icons, and text labels.

Examples:

Basic usage

= fx_bottom_navigation do |nav|
  nav.with_item(href: "/", icon: "heroicons_solid:home") { "Home" }
  nav.with_item(href: "/search", icon: "heroicons_solid:magnifying-glass") { "Search" }
end

With button group

= fx_bottom_navigation do |nav|
  nav.with_button_group(columns: 3) do |group|
    group.with_button(active: true) { "New" }
    group.with_button { "Popular" }
    group.with_button { "Following" }
  end
  nav.with_item(href: "/", icon: "heroicons_solid:home") { "Home" }
  nav.with_item(href: "/wallet", icon: "heroicons_solid:wallet") { "Wallet" }
end

See Also:

  • For detailed documentation.

Defined Under Namespace

Classes: ButtonGroup, CTA, Item, Pagination

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) ⇒ Fluxbit::BottomNavigationComponent

Initializes the bottom navigation component with the given properties.

Parameters:

  • **props (Hash) —

    The properties to customize the component.

  • props (Hash) —

    a customizable set of options

Options Hash (**props):

  • :variant (Symbol) — default: :default —

    The style variant (:default or :app_bar).

  • :border (Boolean) — default: true —

    Shows border at the top of the navigation.

  • :remove_class (String) — default: '' —

    CSS classes to remove from the default class list.

  • **props (Hash) —

    Remaining options declared as HTML attributes.



54
55
56
57
58
59
60
61
 
# File 'app/components/fluxbit/bottom_navigation_component.rb', line 54

def initialize(**props)
  super
  @props = props

  @variant = options(@props.delete(:variant), collection: styles[:variants].keys, default: @@variant)
  @border = options(@props.delete(:border), default: @@border)
  @remove_class = @props.delete(:remove_class) || ""
end

Instance Method Details

#call ⇒ Object 



63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
# File 'app/components/fluxbit/bottom_navigation_component.rb', line 63

def call
  items      # Ensure items are rendered
  cta        # Ensure CTA is rendered if present
  pagination # Ensure pagination is rendered if present
  button_group # Ensure button_group is rendered if present

  # Declare classes after button_group is rendered so we know which variant to use
  declare_classes

  # Handle class removal after classes are declared
  @props[:class] = remove_class(@remove_class, @props[:class])

  tag.div(**@props) do
    safe_join([
      (button_group if button_group?),
      tag.div(class: container_classes) do
        if cta?
          # Insert CTA in the middle for both variants
          half = (items.size / 2.0).floor
          safe_join(items[0...half] + [tag.div(cta, class: styles[:cta_wrapper])] + items[half..])
        elsif pagination?
          # Insert pagination in the middle
          half = (items.size / 2.0).floor
          safe_join(items[0...half] + [pagination] + items[half..])
        else
          safe_join(items)
        end
      end
    ].compact)
  end
end