Surround Field(ui_surround_field)

UiBibz::Ui::Core::Forms::Surrounds::SurroundField

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

 # or by block 
 ui_surround_field options, html_options do 
   name 
 end

Options

The specific options for this component are:

action[string](use component stimulus-options method)
addon[component]
append[html]Add a content before the field
cache[string](use to cache your component)
controller[string](use component stimulus-options method)
prepend[html]Add a content after the field
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)

Items

The allowed items for this component are:

addon(inherit of component)
auto_complete_field(inherit of auto_complete_field)
button(inherit of button)
button_group(inherit of button_group)
button_link(inherit of button_link)
checkbox_field(inherit of checkbox_field)
date_picker_field(inherit of date_picker_field)
dropdown_select_field(inherit of dropdown_select_field)
glyph(inherit of glyph)
html[html/string]Insert html as a component
radio_field(inherit of radio_field)
select_field(inherit of select_field)
text_field(inherit of text_field)

Examples

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

Surround Field

€

link

Ruby
Html

ui_surround_field do |sf|
  sf.checkbox_field 'check', label: false
  sf.auto_complete_field 'name', option_tags: select_options_tags
  sf.button 'button'
  sf.addon  '€'
end
ui_surround_field do |sf|
  sf.radio_field 'check', label: false
  sf.select_field 'select', option_tags: select_options_tags
  sf.dropdown 'dropdown' do |d|
    d.link 'test', url: '#test'
  sf.glyph 'pencil-alt'
  sf.date_picker_field 'date'
end
ui_surround_field do |sf|
  sf.button_refresh
  sf.dropdown_select_field 'select', option_tags: select_options_tags
  sf.button_link 'link', url: '#link'
end

<div class="card-header">
  <div class="input-group">
    <div class="abc-checkbox-default checkbox abc-checkbox input-group-addon">
      <input type="checkbox" name="check" id="check" class="styled">
      <label class="fix-label" for="check">&nbsp;</label>
    </div>
    <input type="text" name="name" id="name" class="form-control auto-complete-field" autocomplete="true" list="name-datalist">
    <datalist id="name-datalist">
      <option value="0">option 0</option>
      <option value="1">option 1</option>
      <option value="2">option 2</option>
      <option value="3">option 3</option>
      <option value="4">option 4</option>
    </datalist>
    <div class="input-group-btn">
      <button class="btn-primary btn">button</button>
    </div>
    <span class="input-group-addon">€</span>
  </div>
  <br>
  <div class="input-group">
    <div class="abc-radio-default radio abc-radio input-group-addon">
      <input type="radio" name="check" id="check_">
      <label class="fix-label" for="check_">&nbsp;</label>
    </div>
    <select name="select" id="select" class="select-field form-control">
      <option value="0">option 0</option>
      <option value="1">option 1</option>
      <option value="2">option 2</option>
      <option value="3">option 3</option>
      <option value="4">option 4</option>
    </select>
    <div class="dropdown btn-group input-group-btn">
      <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret">
        </span>
      </button>
      <div class="dropdown-menu dropdown-menu-left">
        <a class="dropdown-item" href="#test">test</a>
      </div>
    </div>
    <span class="input-group-addon">
      <i class="glyph fas fa-pencil-alt">
      </i>
    </span>
    <input type="text" name="date" id="date" data-date-locale="en" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-today-btn="linked" class="date_picker form-control">
  </div>
  <br>
  <div class="input-group">
    <div class="input-group-btn">
      <span data-connect="{&quot;events&quot;:&quot;click&quot;,&quot;mode&quot;:&quot;remote&quot;,&quot;target&quot;:{&quot;selector&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;,&quot;data&quot;:[]}}" class="btn-primary ui-bibz-connect btn input-refresh-button">
        <i class="glyph fa fa-refresh">
        </i> </span>
    </div>
    <div class="btn-group bootstrap-select input-group-btn dropdown-select-field">
      <button type="button" class="btn dropdown-toggle btn-secondary" data-bs-toggle="dropdown" data-id="select" title="option 0">
        <span class="filter-option pull-left">option 0</span>&nbsp;<span class="bs-caret">
          <span class="caret">
          </span>
        </span>
      </button>
      <div class="dropdown-menu open">
        <ul class="dropdown-menu inner" role="menu">
          <li data-original-index="0" class="selected">
            <a tabindex="0" class="" style="" data-tokens="null">
              <span class="text">option 0</span>
              <span class="fa fa-check check-mark">
              </span>
            </a>
          </li>
          <li data-original-index="1">
            <a tabindex="0" class="" style="" data-tokens="null">
              <span class="text">option 1</span>
              <span class="fa fa-check check-mark">
              </span>
            </a>
          </li>
          <li data-original-index="2">
            <a tabindex="0" class="" style="" data-tokens="null">
              <span class="text">option 2</span>
              <span class="fa fa-check check-mark">
              </span>
            </a>
          </li>
          <li data-original-index="3">
            <a tabindex="0" class="" style="" data-tokens="null">
              <span class="text">option 3</span>
              <span class="fa fa-check check-mark">
              </span>
            </a>
          </li>
          <li data-original-index="4">
            <a tabindex="0" class="" style="" data-tokens="null">
              <span class="text">option 4</span>
              <span class="fa fa-check check-mark">
              </span>
            </a>
          </li>
        </ul>
      </div>
      <select name="select" id="select" class="dropdown-select-field" tabindex="-98">
        <option value="0">option 0</option>
        <option value="1">option 1</option>
        <option value="2">option 2</option>
        <option value="3">option 3</option>
        <option value="4">option 4</option>
      </select>
    </div>
    <div data-bs-toggle="buttons" class="input-group-btn" role="group">
      <label class="btn-primary btn">
        <input type="checkbox" autocomplete="off">choice 1</label>
      <label class="btn-primary btn">
        <input type="checkbox" autocomplete="off">choice 2</label>
    </div>
    <select name="select[]" id="select" class="btn-secondary multi-select-field" multiple="multiple" style="display: none;">
      <option value="0">option 0</option>
      <option value="1">option 1</option>
      <option value="2">option 2</option>
      <option value="3">option 3</option>
      <option value="4">option 4</option>
    </select>
    <div class="btn-group input-group-btn">
      <button type="button" class="multiselect dropdown-toggle btn btn-secondary multi-select-field" data-bs-toggle="dropdown" title="None selected">None selected <b class="caret">
        </b>
      </button>
      <ul class="multiselect-container dropdown-menu">
        <li>
          <a href="javascript:void(0);">
            <label class="checkbox">
              <input type="checkbox" value="0"> option 0</label>
          </a>
        </li>
        <li>
          <a href="javascript:void(0);">
            <label class="checkbox">
              <input type="checkbox" value="1"> option 1</label>
          </a>
        </li>
        <li>
          <a href="javascript:void(0);">
            <label class="checkbox">
              <input type="checkbox" value="2"> option 2</label>
          </a>
        </li>
        <li>
          <a href="javascript:void(0);">
            <label class="checkbox">
              <input type="checkbox" value="3"> option 3</label>
          </a>
        </li>
        <li>
<a href="javascript:void(0);">
  <label class="checkbox">
    <input type="checkbox" value="4"> option 4</label>
</a>
        </li>
      </ul>
    </div>
    <div class="input-group-btn">
      <a class="btn-primary btn" href="#link">link</a>
    </div>
  </div>
</div>

Button choice blocks

Button choice has on block type:

button (inherit of button)
button_group (inherit of button_group)
button_link (inherit of button_link)
checkbox_field (inherit of checkbox_field)
radio_field (inherit of radio_field)
date_picker_field (inherit of date_picker_field)
dropdown_select_field (inherit of dropdown_select_field)
select_field (inherit of select_field)
auto_complete_field (inherit of auto_complete_field)
text_field (inherit of text_field)

Size options

The size option has following symbols for argument:

Ruby

ui_surround_field size: size  do |sf|
  sf.glyph 'car'
  sf.text_field :example
  sf.button 'calendar', text: false, glyph: 'calendar', status: :info
end
ui_surround_field size: size  do |sf|
  sf.glyph 'car'
  sf.text_field :example
  sf.button 'calendar', text: false, glyph: 'calendar', status: :info
end
ui_surround_field size: size  do |sf|
  sf.glyph 'car'
  sf.text_field :example
  sf.button 'calendar', text: false, glyph: 'calendar', status: :info
end

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_surround_field. You can use Simple Form input options and Ui Bibz ui_surround_field options.

Ruby

ui_form_for(@user) do |f|
  ...
  f.ui_surround_field label: 'Email' do |sf|
    sf.addon glyph: 'envelope'
    sf.input :email
    sf.button_link 'button', url: "#button_link"
    sf.addon glyph: 'calendar'
  end
  ...
end