Star(ui_star)Ui Bibz Logo

UiBibz::Ui::Core::Icons::Star

Star is a component to displaying stars grade with different sizes and pre-built styles.

Usage

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

 # by variable 
 star number, options, html_options 

 # or by block 
 star options, html_options do 
   number 
 end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • num[number]
  • size[symbol](:lg, :md, :sm)(use component size method)
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)

Examples

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

Star

ui_star 2

<span class="stars-notation">
  <i class="glyph fa fa-star"></i>
  <i class="glyph fa fa-star"></i>
  <i class="glyph fa fa-star-o"></i>
  <i class="glyph fa fa-star-o"></i>
  <i class="glyph fa fa-star-o"></i>
</span>
Documentation

Size

The size option has following symbols for argument:
  • :lg
  • :md
  • :sm








ui_star 4, size: :1
ui_star 4, size: :md
ui_star 4, size: :lg

<span class="stars-notation">
  <i class="glyph fa fa-star fa-1x"></i>
  <i class="glyph fa fa-star fa-1x"></i>
  <i class="glyph fa fa-star fa-1x"></i>
  <i class="glyph fa fa-star fa-1x"></i>
<i class="glyph fa fa-star-o fa-1x"></i>
</span>
<span class="stars-notation">
  <i class="glyph fa fa-star fa-3x"></i>
  <i class="glyph fa fa-star fa-3x"></i>
  <i class="glyph fa fa-star fa-3x"></i>
  <i class="glyph fa fa-star fa-3x"></i>
<i class="glyph fa fa-star-o fa-3x"></i>
</span>
<span class="stars-notation">
  <i class="glyph fa fa-star fa-5x"></i>
  <i class="glyph fa fa-star fa-5x"></i>
  <i class="glyph fa fa-star fa-5x"></i>
  <i class="glyph fa fa-star fa-5x"></i>
<i class="glyph fa fa-star-o fa-5x"></i>
</span>
Documentation

Status






ui_star 0
ui_star 1, status: :danger
ui_star 2, status: :warning
ui_star 3, status: :primary
ui_star 4, status: :success

<span class="stars-notation">
  <i class="glyph-secondary glyph fa fa-star-o"></i>
  <i class="glyph-secondary glyph fa fa-star-o"></i>
  <i class="glyph-secondary glyph fa fa-star-o"></i>
  <i class="glyph-secondary glyph fa fa-star-o"></i>
  <i class="glyph-secondary glyph fa fa-star-o"></i>
</span>
<br>
<span class="stars-notation">
  <i class="glyph-danger glyph fa fa-star"></i>
  <i class="glyph-danger glyph fa fa-star-o"></i>
  <i class="glyph-danger glyph fa fa-star-o"></i>
  <i class="glyph-danger glyph fa fa-star-o"></i>
  <i class="glyph-danger glyph fa fa-star-o"></i>
</span>
<br>
<span class="stars-notation">
  <i class="glyph-warning glyph fa fa-star"></i>
  <i class="glyph-warning glyph fa fa-star"></i>
  <i class="glyph-warning glyph fa fa-star-o"></i>
  <i class="glyph-warning glyph fa fa-star-o"></i>
  <i class="glyph-warning glyph fa fa-star-o"></i>
</span>
<br>
<span class="stars-notation">
  <i class="glyph-primary glyph fa fa-star"></i>
  <i class="glyph-primary glyph fa fa-star"></i>
  <i class="glyph-primary glyph fa fa-star"></i>
  <i class="glyph-primary glyph fa fa-star-o"></i>
  <i class="glyph-primary glyph fa fa-star-o"></i>
</span>
<br>
<span class="stars-notation">
  <i class="glyph-success glyph fa fa-star"></i>
  <i class="glyph-success glyph fa fa-star"></i>
  <i class="glyph-success glyph fa fa-star"></i>
  <i class="glyph-success glyph fa fa-star"></i>
  <i class="glyph-success glyph fa fa-star-o"></i>
</span>
<br>
Documentation

Float

ui_star 3.5

<span class="stars-notation">
  <i class="glyph fa fa-star"></i>
  <i class="glyph fa fa-star"></i>
  <i class="glyph fa fa-star"></i>
  <i class="glyph fa fa-star-half-o"></i>
  <i class="glyph fa fa-star-o"></i>
</span>
Documentation

Other range

ui_star 6, num: 8

<span class="stars-notation">
  <i class="glyph fa fa-star"></i>
  <i class="glyph fa fa-star"></i>
  <i class="glyph fa fa-star"></i>
  <i class="glyph fa fa-star"></i>
  <i class="glyph fa fa-star"></i>
  <i class="glyph fa fa-star"></i>
  <i class="glyph fa fa-star-o"></i>
  <i class="glyph fa fa-star-o"></i>
</span>
Documentation