Box Switch Field(ui_box_switch_field)Ui Bibz Logo

UiBibz::Ui::Core::Forms::Choices::SwitchField

This component is based on the library Bootstrap Switch.

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 
 ui_box_switch_field name, options, html_options 

 # or by block 
 ui_box_switch_field options, html_options do 
   name 
 end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • animate[boolean]
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • inline[boolean](true, false)
  • intermediate[boolean]
  • label[string]
  • left_color[symbol](primary, secondary, success, danger, warning, info, light, dark)
  • left_text[string]
  • middle_text[string]
  • right_color[symbol](primary, secondary, success, danger, warning, info, light, dark)
  • right_text[string]
  • size[symbol](:lg, :md, :sm)(use component size method)
  • state[symbol](:disabled, :active)(use component state method)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)
  • value[boolean/string/integer]

Html Options

The specific html options for this component are:
  • checked[boolean]
  • readonly[boolean]

Examples

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

Switch Field

ui_box_switch_field 'examplebasic'

<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-id-examplebasic bootstrap-switch-animate" style="width: 106px;">
  <div class="bootstrap-switch-container" style="width: 156px; margin-left: -52px;">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 52px;">ON</span>
    <span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">OFF</span>
    <input type="checkbox" name="examplebasic" id="examplebasic" class="switch">
  </div>
</div>

Inline

ui_box_switch_field "examplestate", inline: true
ui_box_switch_field "examplestate2", inline: true

<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-id-examplestate bootstrap-switch-animate" style="width: 106px;">
  <div class="bootstrap-switch-container" style="width: 156px; margin-left: -52px;">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 52px;">ON</span>
    <span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">OFF</span>
    <input type="checkbox" name="examplestate" id="examplestate" class="switch">
  </div>
</div>
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-disabled bootstrap-switch-id-examplestate2 bootstrap-switch-animate" style="width: 106px;">
  <div class="bootstrap-switch-container" style="width: 156px; margin-left: -52px;">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 52px;">ON</span>
    <span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">OFF</span>
    <input type="checkbox" name="examplestate2" id="examplestate2" disabled="disabled" class="true switch">
  </div>
</div>

State

ui_box_switch_field "examplestate", { state: :active, inline: true }
ui_box_switch_field "examplestate2", { state: :disabled, inline: true }

<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-id-examplestate bootstrap-switch-animate" style="width: 106px;">
  <div class="bootstrap-switch-container" style="width: 156px; margin-left: -52px;">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 52px;">ON</span>
    <span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">OFF</span>
    <input type="checkbox" name="examplestate" id="examplestate" class="switch">
  </div>
</div>
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-disabled bootstrap-switch-id-examplestate2 bootstrap-switch-animate" style="width: 106px;">
  <div class="bootstrap-switch-container" style="width: 156px; margin-left: -52px;">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 52px;">ON</span>
    <span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">OFF</span>
    <input type="checkbox" name="examplestate2" id="examplestate2" disabled="disabled" class="true switch">
  </div>
</div>

Animate

ui_box_switch_field "exampleanimate", { animate: true, inline: true }
ui_box_switch_field "exampleanimate2", { animate: false, inline: true }

<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-id-exampleanimate bootstrap-switch-animate" style="width: 106px;">
  <div class="bootstrap-switch-container" style="width: 156px; margin-left: -52px;">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 52px;">ON</span>
    <span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">OFF</span>
    <input type="checkbox" name="exampleanimate" id="exampleanimate" data-animate="true" class="switch">
  </div>
</div>
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-id-exampleanimate2" style="width: 106px;">
  <div class="bootstrap-switch-container" style="width: 156px; margin-left: -52px;">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 52px;">ON</span>
    <span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">OFF</span>
    <input type="checkbox" name="exampleanimate2" id="exampleanimate2" data-animate="false" class="switch">
  </div>
</div>

Color

ui_box_switch_field "examplecolor", { left_color: :success, right_color: :danger }

<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-id-examplecolor bootstrap-switch-animate" style="width: 106px;">
  <div class="bootstrap-switch-container" style="width: 156px; margin-left: -52px;">
    <span class="bootstrap-switch-handle-on bootstrap-switch-success" style="width: 52px;">ON</span>
    <span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-danger" style="width: 52px;">OFF</span>
    <input type="checkbox" name="examplecolor" id="examplecolor" data-on-color="success" data-off-color="danger" class="switch">
  </div>
</div>

Text

ui_box_switch_field "exampletext", { left_text: "Yes", right_text: "No" }

<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-id-exampletext bootstrap-switch-off bootstrap-switch-animate" style="width: 196px;">
  <div class="bootstrap-switch-container" style="width: 291px; margin-left: -97px;">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 97px;">Yes</span>
    <span class="bootstrap-switch-label" style="width: 97px;">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 97px;">No</span>
    <input type="checkbox" name="exampletext" id="exampletext" data-on-text="ExampleOn" data-off-text="ExampleOff" class="switch">
  </div>
</div>

Label

ui_box_switch_field "examplelabel", { middle_text: "MyText", inline: true  }
ui_box_switch_field "examplelabel2", { middle_text: ui_glyph("gem"), inline: true  }

<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-id-examplelabel bootstrap-switch-animate" style="width: 124px;">
  <div class="bootstrap-switch-container" style="width: 174px; margin-left: -52px;">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 52px;">ON</span>
    <span class="bootstrap-switch-label" style="width: 70px;">MyText</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">OFF</span>
    <input type="checkbox" name="examplelabel" id="examplelabel" data-label-text="MyText" class="switch">
  </div>
</div>
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-id-examplelabel2 bootstrap-switch-animate" style="width: 106px;">
  <div class="bootstrap-switch-container" style="width: 156px; margin-left: -52px;">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 52px;">ON</span>
    <span class="bootstrap-switch-label" style="width: 52px;"><i class="glyph fa fa-gem"></i></span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">OFF</span>
    <input type="checkbox" name="examplelabel2" id="examplelabel2" data-label-text="<i class=&quot;glyph fa fa-gem&quot;></i>" class="switch">
  </div>
</div>

Readonly

ui_box_switch_field "examplereadonly", { inline: true }, { readonly: true }
ui_box_switch_field "examplereadonly2", { inline: true }, { readonly: false }

<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-readonly bootstrap-switch-id-examplereadonly bootstrap-switch-animate" style="width: 106px;">
  <div class="bootstrap-switch-container" style="width: 156px; margin-left: -52px;">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 52px;">ON</span>
    <span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">OFF</span>
    <input type="checkbox" name="examplereadonly" id="examplereadonly" readonly="readonly" class="switch">
  </div>
</div>
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-id-examplereadonly2 bootstrap-switch-animate" style="width: 106px;">
  <div class="bootstrap-switch-container" style="width: 156px; margin-left: -52px;">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 52px;">ON</span>
    <span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">OFF</span>
    <input type="checkbox" name="examplereadonly2" id="examplereadonly2" class="switch">
  </div>
</div>

Checked

ui_box_switch_field "examplechecked", { inline: true }, { checked: true }
ui_box_switch_field "examplechecked2", { inline: true }, { checked: false }

<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-id-examplechecked bootstrap-switch-animate bootstrap-switch-off" style="width: 106px;">
  <div class="bootstrap-switch-container" style="width: 156px; margin-left: -52px;">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 52px;">ON</span>
    <span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">OFF</span>
    <input type="checkbox" name="examplechecked" id="examplechecked" checked="checked" class="switch">
  </div>
</div>
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-id-examplechecked2 bootstrap-switch-animate" style="width: 106px;">
  <div class="bootstrap-switch-container" style="width: 156px; margin-left: -52px;">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 52px;">ON</span>
    <span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">OFF</span>
    <input type="checkbox" name="examplechecked2" id="examplechecked2" class="switch">
  </div>
</div>

Size

The size option has following symbols for argument:
  • :lg
  • :md
  • :sm
ui_button "Large button", size: :lg, inline: true
ui_button "Medium button", size: :md, inline: true
ui_button "Small button", size: :sm , inline: true

<button class="btn-secondary btn btn-lg">Large button</button>
<button class="btn-secondary btn">Medium button</button>
<button class="btn-secondary btn btn-sm">Small button</button>

Simple form

Ui Bibz is compatible with simple form. You can use defaults inputs of Simple Form and defaults inputs of Ui Bibz like ui_box_switch_field. You can use Simple Form input options and Ui Bibz ui_box_switch_field options.

ui_bibz_form_for(@user) do |f|
  ...
  f.input :active, as: :ui_box_switch_field
  ...
end