Badge(ui_badge)

UiBibz::Ui::Core::Notifications::Badge

Add any of the below mentioned modifier classes to change the appearance of a badge.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • options[hash]<default: {}>
  • html_options[hash]<default: {}>

 # by variable 
 badge content, options, html_options 

 # or by block 
 badge options, html_options do 
   content 
 end

Options

The specific options for this component are:
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • glyph[string/hash](use component glyph method)
  • type[symbol](:pill, :square)
  • url[string]If url is used, tag change from span to link.
  • popover[string/hash](use component popover method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • action[string](use component stimulus-options method)
  • target[string](use component stimulus-options method)

Examples

Some examples explain how to use the options present in the component.

Badge

Primary Secondary Success Danger Warning Info Light Dark 
ui_badge 'Primary', status: :primary
ui_badge 'Secondary', status: :secondary
ui_badge 'Success', status: :success
ui_badge 'Danger', status: :danger
ui_badge 'Warning', status: :warning
ui_badge 'Info', status: :info
ui_badge 'Light', status: :light
ui_badge 'Dark', status: :dark

<span class="badge-primary badge">Primary</span>
<span class="badge-secondary badge">Secondary</span>
<span class="badge-success badge">Success</span>
<span class="badge-danger badge">Danger</span>
<span class="badge-warning badge">Warning</span>
<span class="badge-info badge">Info</span>
<span class="badge-light badge">Light</span>
<span class="badge-dark badge">Dark</span>

Badge Options

Use url options to change tag from span to a.

Primary Secondary Success Danger Warning Info Light Dark 
ui_badge 'Primary', status: :primary, type: :pill, glyph: 'gem', url: '#primary'
ui_badge 'Secondary', status: :secondary, type: :pill, glyph: 'gem', url: '#secondary'
ui_badge 'Success', status: :success, type: :pill, glyph: 'gem', url: '#success'
ui_badge 'Danger', status: :danger, type: :pill, glyph: 'gem', url: '#danger'
ui_badge 'Warning', status: :warning, type: :pill, glyph: 'gem', url: '#warning'
ui_badge 'Info', status: :info, type: :pill, glyph: 'gem', url: '#info'
ui_badge 'Light', status: :light, type: :pill, glyph: 'gem', url: '#light'
ui_badge 'Dark', status: :dark, type: :pill, glyph: 'gem', url: '#dark'

<a href="#primary" class="badge-primary badge badge-pill"><i class="glyph fa fa-gem"></i> Primary</span>
<a href="#secondary" class="badge-secondary badge badge-pill"><i class="glyph fa fa-gem"></i> Secondary</span>
<a href="#success" class="badge-success badge badge-pill"><i class="glyph fa fa-gem"></i> Success</span>
<a href="#danger" class="badge-danger badge badge-pill"><i class="glyph fa fa-gem"></i> Danger</span>
<a href="#warning" class="badge-warning badge badge-pill"><i class="glyph fa fa-gem"></i> Warning</span>
<a href="#info" class="badge-info badge badge-pill"><i class="glyph fa fa-gem"></i> Info</span>
<a href="#light" class="badge-light badge badge-pill"><i class="glyph fa fa-gem"></i> Light</span>
<a href="#dark" class="badge-dark badge badge-pill"><i class="glyph fa fa-gem"></i> Dark</span>

Contents