UiBibz::Ui::Core::Navigations::Toolbar
Group a series of button group together on a single line with the button toolbar.
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
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 mr-2" role="group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
</div>
<div class="btn-group mr-4" role="group">
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
</div>
<div class="btn-group mr-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.button_group status: :primary do |bg|
bg.button 4
bg.button 5
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> </button>
<button class="btn-danger btn without-text" title="" data-original-title="Paste"><i class="glyph fa fa-paste"></i> </button>
<button class="btn-success btn without-text" title="" data-original-title="Cut"><i class="glyph fa fa-cut"></i> </button>
</div>
<div class="btn-group" role="group">
<button class="btn-primary btn">4</button>
<button class="btn-primary btn">5</button>
</div>
<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-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>