UiBibz::Ui::Core::Forms::Selects::SelectField
# by variable
ui_select_field name, options, html_options
# or by block
ui_select_field options, html_options do
name
end
option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_select_field 'example 0', option_tags: option_tags
<select name="example 0" id="example_0" class="select-field form-control">
<option value="option 0">option 0</option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>
<option value="option 4">option 4</option>
</select>
grouped_options = { 'North America' => [['United states','US'], 'Canada'], 'Europe' => ['Denmark','Germany','France'] }
ui_select_field 'example 1', option_tags: grouped_options_for_select(grouped_options)
<select name="example 1" id="example_1" class="select-field form-control">
<optgroup label="North America">
<option value="US">United states</option>
<option value="Canada">Canada</option></optgroup>
<optgroup label="Europe">
<option value="Denmark">Denmark</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</optgroup>
</select>
option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_select_field "example1", status: :success, option_tags: select_options_tags
option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_select_field "example1", option_tags: select_options_tags, append: ui_glyph("pencil-alt"), prepend: ui_glyph("gem")
size
option has following symbols for argument:
option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_select_field 'example lg', option_tags: select_options_tags, size: :lg
ui_select_field 'example md', option_tags: select_options_tags, size: :md
ui_select_field 'example sm', option_tags: select_options_tags, size: :sm
You can connect several components together using option connect
.
With this option, you can determine the target, the trigger event, and the connection mode.
Output data, whether local or remote, must be written in this way:
[{ value: Integer||String, text: String||Integer, connect_option_id: Integer||String }, {...}]
.
To have optgroup, format must be like that: { label1: [{ text: String||Integer, value: String||Integer, connect_option_id: Integer||String }, {...}], label2: [...]}
connect: {
event: String, # change|click|change click|... <default: 'change'>
mode: String, # local|remote <default: 'remote'>
target: {
selector: String, # .my-target|#my-target
data: Array, # [{ text: 'option', value: 1, connect_option_id: 2}]
url: String, # url_data.html'
}
}
You can connect an input to any other input:
Select field | Dropdown select field | Multi column field | Multi select field | |
---|---|---|---|---|
Select field | ||||
Dropdown select field | ||||
Multi column field | ||||
Multi select field |
option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
# First select input
connect = { mode: "remote", target: { selector: "#example_1_target", url: components_forms_selects_select_field_path }}
ui_select_field "example 1", { option_tags: options_tags, connect: connect }
# Second select input
ui_select_field "example 1 target", option_tags: option_tags
<select name="example 0" id="example_0" class="select-field form-control">
<option value="option 0">option 0</option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>
<option value="option 4">option 4</option>
</select>
option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
# First Select input
options_data = 5.times.map{ |o| 5.times.map{ |i| { text: "New option #{ o }.#{ i }", value: i, connect_option_id: o }}}.flatten
connect = { mode: "local", target: { selector: "#example_2_target", data: options_data }}}
ui_select_field "example 2", { option_tags: options_html, connect: connect }
# Second Select input
options_html = options_for_select(5.times.map{ |i| "option #{i}" })
ui_select_field "example 2 target", option_tags: options_html
<select name='example 1' id='example_1' data-connect="{'type':'remote','target':{'selector':'#example_1_target','url':'/components/forms/selects/select-field'}}" class="ui-bibz-connect select-field form-control">
<option value="option 0">option 0</option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>
<option value="option 4">option 4</option></select>
<select name="example 1 target" id="example_1_target" class="select-field form-control">
<option value="option 0">option 0</option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>
<option value="option 4">option 4</option>
</select>
Option refresh
take same arguments than connect
option.
option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
connect = { target: { url: components_forms_selects_select_field_path }}
ui_select_field "example 3", option_tags: option_tags, refresh: connect
<div class="input-group select-field-refresh">
<select name="example 3" id="example_3" class="select-field form-control">
<option value="option 0">option 0</option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>
<option value="option 4">option 4</option>
</select>
<span class="input-group-btn">
<button class='input-refresh-button btn-primary ui-bibz-connect btn' data-connect="{'events':'click','type':'remote','target':{'selector':'#example_3','url':'/components/forms/selects/select-field','data':[]}}">
<i class="glyph fa fa-refresh"></i>
</button>
</span>
</div>
Ui Bibz is compatible with simple form.
You can use defaults inputs of Simple Form and defaults inputs of Ui Bibz like ui_select_field
. You can use Simple Form input options and Ui Bibz ui_select_field options.
Then in your view, you can insert your input dropdown select field.
This simple form component is based on simple_form
collection
Collection inputs accept two other options beside collections:
ui_form_for(@user) do |f|
...
f.association :country, as: :ui_select_field, collection: @countries, label_method: :name, value_method: :id
...
end
You can use `grouped: true` option to group collection
Grouped collection inputs accept the same :label_method and :value_method options, which will be used to retrieve label/value attributes for the option tags. Besides that, you can give:
ui_form_for(@search) do |f|
...
f.input :country, as: :ui_select_field, grouped: true, collection: @continents, group_method: :countries, label_method: :name, value_method: :id
...
end
You can add option refresh
in your association.
ui_form_for(@user) do |f|
...
f.association :country, as: :ui_select_field, refresh: { target: { url: components_forms_selects_select_field_path }}, collection: @countries, label_method: :name, value_method: :id
...
end