Class: NfgUi::Components::Foundations::Icon
- Inherits:
-
Base
- Object
- Bootstrap::Components::Base
- Base
- NfgUi::Components::Foundations::Icon
- Includes:
- Bootstrap::Utilities::Themeable, Bootstrap::Utilities::Tooltipable, Traits::Alignment, Traits::Icon, Traits::Muted, Traits::Theme
- Defined in:
- lib/nfg_ui/components/foundations/icon.rb
Overview
Icon doc coming soon Implementation and usage is designed to mimic the font_awesome_rails gem
Example usage:
ui.nfg :icon, ‘rocket’, :right, text: ‘Example text with icon on the right’
Constant Summary collapse
- LEFT_ICON_SPACER_CSS_CLASS =
Officially declare the icon spacer classes so that other iconable components that have more than one icon e.g.: :left_icon & :icon can use the spacer class manually
'mr-1'
- RIGHT_ICON_SPACER_CSS_CLASS =
'ml-1'
Constants included from Traits::Alignment
Constants included from Traits::Theme
Traits::Theme::COLOR_TRAITS, Traits::Theme::TRAITS
Constants included from Traits::Muted
Constants included from Traits::Icon
Constants included from Traits
Traits::REGISTERED_TRAITS, Traits::TRAIT_MODULES
Instance Attribute Summary
Attributes included from Bootstrap::Utilities::Disableable
Attributes inherited from Bootstrap::Components::Base
#body, #options, #view_context
Instance Method Summary collapse
-
#icon ⇒ Object
Utilize a trait or ‘:icon` within options.
-
#render ⇒ Object
Outputs a Font Awesome icon using the #fa_icon method.
-
#right ⇒ Object
Tap into the font_awesome_rails :right method to place the icon on the right side of the text.
-
#text ⇒ Object
Tap into the font_awesome_rails :text method to insert text into the rendered component.
Methods included from Traits::Alignment
#center_trait, #left_trait, #right_trait
Methods included from Traits::Theme
#danger_trait, #dark_trait, #info_trait, #light_trait, #outlined_trait, #primary_trait, #secondary_trait, #success_trait, #warning_trait, #white_trait
Methods included from Traits::Muted
Methods included from Traits::Icon
Methods included from Bootstrap::Utilities::Tooltipable
#data, #disabled_component_tooltip_wrapper_html_options, #html_options, #tooltip
Methods included from Bootstrap::Utilities::Disableable
Methods included from Bootstrap::Utilities::Themeable
Methods included from Utilities::Traitable
Methods included from Utilities::Renderable
Methods included from Utilities::Describable
Methods inherited from Bootstrap::Components::Base
#component_family, #data, #href, #html_options, #id, #initialize, #style
Constructor Details
This class inherits a constructor from NfgUi::Bootstrap::Components::Base
Instance Method Details
#icon ⇒ Object
Utilize a trait or ‘:icon` within options. When setting the icon as a trait, you must pass in a string. If a symbol is detected, the component assumes it’s a registered trait
Example usage as a trait:
ui.nfg :icon, ‘heart’
Example usage as an option:
ui.nfg :icon, icon: ‘heart’
This is useful in syncing up the ability to pass in ‘:icon` to components that accept `:icon` in options and automatically render an icon.
38 39 40 |
# File 'lib/nfg_ui/components/foundations/icon.rb', line 38 def icon [:icon] || (traits.slice!(0).to_s if traits.first.is_a?(String)) end |
#render ⇒ Object
Outputs a Font Awesome icon using the #fa_icon method.
43 44 45 |
# File 'lib/nfg_ui/components/foundations/icon.rb', line 43 def render view_context.fa_icon icon, **, text: text, right: right end |
#right ⇒ Object
Tap into the font_awesome_rails :right method to place the icon on the right side of the text. This also automatically adds the right side css spacer class to the icon <i> tag.
50 51 52 |
# File 'lib/nfg_ui/components/foundations/icon.rb', line 50 def right .fetch(:right, false) end |
#text ⇒ Object
Tap into the font_awesome_rails :text method to insert text into the rendered component.
56 57 58 |
# File 'lib/nfg_ui/components/foundations/icon.rb', line 56 def text .fetch(:text, nil) end |