Formula Field(ui_formula_field)

UiBibz::Ui::Core::Forms::Numbers::FormulaField

By default, the second input name will take the first input name + "_formula".
If there is an error in your formula, a warning will be diplay with an explain through attribute title in addon warning.

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

 # or by block 
 ui_formula_field options, html_options do 
   name 
 end

Options

The specific options for this component are:
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • state[symbol](:disabled, :active)(use component state method)
  • ui_formula_field_name[symbole]
  • 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.

Formula Field

=
ui_formula_field "value", {}, { placeholder: "Type your formula..."}

<div class="input-group ui_formula_field">
  <input type="text" name="value" id="value" value="" placeholder="Type your formula..." class="ui_formula_field_input form-control">
  <span class="ui_formula_field_sign input-group-addon">=</span>
  <input type="text" name="value_formula" id="value_formula" value="" readonly="readonly" class="ui_formula_field_result form-control">
  <span class="ui_formula_field_alert input-group-addon" data-toggle="tooltip">
    <i class="glyph-danger glyph fa fa-exclamation-triangle"></i>
  </span>
</div>

Formula Field Status

=
ui_formula_field "value", status: :success

<div class="input-group has-success ui_formula_field">
  <input type="text" name="value" id="value" value="" placeholder="Type your formula..." class="ui_formula_field_input form-control">
  <span class="ui_formula_field_sign input-group-addon">=</span>
  <input type="text" name="value_formula" id="another_value_formula" value="" readonly="readonly" class="ui_formula_field_result form-control">
  <span class="ui_formula_field_alert input-group-addon" data-toggle="tooltip">
    <i class="glyph-danger glyph fa fa-exclamation-triangle"></i>
  </span>
</div>

Formula Field Options

=
ui_formula_field "value", ui_formula_field_name: :another_value_formula

<div class="input-group ui_formula_field">
  <input type="text" name="value" id="value" value="" placeholder="Type your formula..." class="ui_formula_field_input form-control">
  <span class="ui_formula_field_sign input-group-addon">=</span>
  <input type="text" name="value_formula" id="another_value_formula" value="" readonly="readonly" class="ui_formula_field_result form-control">
  <span class="ui_formula_field_alert input-group-addon" data-toggle="tooltip">
    <i class="glyph-danger glyph fa fa-exclamation-triangle"></i>
  </span>
</div>

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

=
ui_form_for(@search) do |f|
  ...
  f.input :price, as: :ui_formula_field
  ...
end

Contents