Toolbar(ui_toolbar)

UiBibz::Ui::Core::Navigations::Toolbar

Group a series of button group together on a single line with the button toolbar.

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: {}>

ui_toolbar options, html_options do |bt|
  bt.button_group options, html_options do |bg|
    # by variable
    bg.button content, options, html_options
    # or by block
    bg.button options, html_options do
      content
    end

    n.form url, options, html_options do
      content
    end

  end
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)
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:

button_group(inherit of button_group)
form
- type[symbol](:form_for, :ui_form_for, :form_tag)<default: :form_tag>
html[html/string]Insert html as a component
spacer

Examples

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

Spacer

Allow to add spaces between items.
Spacer values:

nil
auto
1
2
3
4
5

Ruby
Html

ui_toolbar do |t|
  t.button_group do |bg|
    bg.button 1
    bg.button 2
    bg.button 3
  end
  t.spacer 2
  t.button_group do |bg|
    bg.button 4
    bg.button 5
    bg.button 6
  end
  t.spacer 4
  t.button_group do |bg|
    bg.button 8
    bg.button 9
  end
  t.spacer
  t.button_group do |bg|
    bg.button 10
    bg.button 11
  end
end

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group me-2" role="group">
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
  </div>
  <div class="btn-group me-4" role="group">
    <button class="btn">4</button>
    <button class="btn">5</button>
    <button class="btn">6</button>
  </div>
  <div class="btn-group me-auto" role="group">
    <button class="btn">8</button>
    <button class="btn">9</button>
  </div>
  <div class="btn-group" role="group">
    <button class="btn">10</button>
    <button class="btn">11</button>
  </div>
</div>

ui_toolbar justify: true do |t|
  t.button_group status: :success do |bg|
    bg.button "Copy", text: false, glyph: "copy"
    bg.button "Paste", text: false, glyph: "paste", status: :danger
    bg.button "Cut", text: false, glyph: "cut"
  end
  t.form "form", url: '#', type: :form_tag do
    ui_text_field "text"
  end
  t.button_group do |bg|
    bg.button 4
    bg.button 5
    bg.dropdown "Dropdown", do |d| 6
      d.link "Link", url: "#link"
    end
  end
end

<div class="btn-toolbar justify-content-between" role="toolbar">
  <div class="btn-group" role="group">
    <button class="btn-success btn without-text" title="" data-original-title="Copy"><i class="glyph fa fa-copy"></i> &nbsp;</button>
    <button class="btn-danger btn without-text" title="" data-original-title="Paste"><i class="glyph fa fa-paste"></i> &nbsp;</button>
    <button class="btn-success btn without-text" title="" data-original-title="Cut"><i class="glyph fa fa-cut"></i> &nbsp;</button>
  </div>
  <form url="#" type="form_tag" class="btn-group" action="form" accept-charset="UTF-8" method="post">
    <input type="text" name="text" id="text" class="form-control">
  </form>
  <div class="btn-group" role="group">
    <button class="btn">6</button>
    <button class="btn">7</button>
    <div class="dropdown btn-group">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-124592266235445737550728140034240625579">Dropdown <span class="caret"></span></button>
      <div class="dropdown-menu" arial-labelledby="dropdown-124592266235445737550728140034240625579">
        <a class="dropdown-item" href="#link">link</a>
      </div>
    </div>
  </div>
</div>