UiBibz::Ui::Core::Lists::ListGroup
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
ui_list_group options, html_options do |lg|
# by variable
lg.list content, options, html_options
# or by block
lg.list options, html_options do
content
end
# or by block with tap
lg.list options, html_options do |l|
l.header content, options, html_options
# or
l.header options, html_options do
content
end
l.body content, options, html_options
# or
l.body options, html_options do
content
end
end
end
ui_list_group do |lg|
lg.list "Cras justo odio"
lg.list "Dapibus ac facilisis in"
lg.list "Morbi leo risus"
lg.list "Porta ac consectetur ac"
lg.list "Vestibulum at eros"
end
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
ui_list_group flush: true do |lg|
lg.list "Cras justo odio"
lg.list "Dapibus ac facilisis in"
lg.list "Morbi leo risus"
lg.list "Porta ac consectetur ac"
lg.list "Vestibulum at eros"
end
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
ui_list_group do |lg|
lg.list "Cras justo odio", badge: 14
lg.list "Dapibus ac facilisis in", badge: { content: 2, type: :square }
end
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge-secondary badge badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge-secondary badge">2</span>
</li>
</ul>
ui_list_group tag_type: :a do |lg|
lg.list "Cras justo odio", url: "#1",state: :active
lg.list "Dapibus ac facilisis in", url: "#2"
lg.list "Morbi leo risus", url: "#3"
lg.list "Porta ac consectetur ac", url: "#4"
lg.list "Vestibulum at eros", url: "#5"
end
<div class="list-group">
<a class="active list-group-item" href="#1">Cras justo odio</a>
<a class="list-group-item" href="#2">Dapibus ac facilisis in</a>
<a class="list-group-item" href="#3">Morbi leo risus</a>
<a class="list-group-item" href="#4">Porta ac consectetur ac</a>
<a class="list-group-item" href="#5">Vestibulum at eros</a>
</div>
ui_list_group tag_type: :button do |lg|
lg.list "Cras justo odio"
lg.list "Dapibus ac facilisis in"
lg.list "Morbi leo risus"
lg.list "Porta ac consectetur ac"
lg.list "Vestibulum at eros"
end
<div class="list-group">
<button class="active list-group-item">Cras justo odio</button>
<button class="list-group-item">Dapibus ac facilisis in</button>
<button class="list-group-item">Morbi leo risus</button>
<button class="list-group-item">Porta ac consectetur ac</button>
<button class="list-group-item">Vestibulum at eros</button>
</div>
ui_list_group do |lg|
lg.list "Cras justo odio", state: :disabled
lg.list "Dapibus ac facilisis in"
lg.list "Morbi leo risus"
lg.list "Porta ac consectetur ac"
lg.list "Vestibulum at eros"
end
<ul class="list-group">
<li class="disabled list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
ui_list_group do |lg|
lg.list "This is a normal list group item"
lg.list "This is a primary list group item", status: :primary
lg.list "This is a secondary list group item", status: :secondary
lg.list "This is a success list group item", status: :success
lg.list "This is a danger list group item", status: :danger
lg.list "This is a warning list group item", status: :warning
lg.list "This is a info list group item", status: :info
lg.list "This is a light list group item", status: :light
lg.list "This is a dark list group item", status: :dark
end
<ul class="list-group">
<li class="list-group-item-danger list-group-item">Cras justo odio</li>
<li class="list-group-item-info list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item-warning list-group-item">Morbi leo risus</li>
<li class="list-group-item-success list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item-primary list-group-item">Vestibulum at eros</li>
</ul>
List group list has several block type:
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi portaDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi portaDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta
ui_list_group tag_type: :a do |lg|
lg.list tap: true, state: :active do |l|
l.header "List group item heading", extra: "3 days ago"
l.body "Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.", extra: "Donec id elit non mi porta"
end
lg.list tap: true do |l|
l.header class: "my-header", extra: "3 days ago" do
"List group item heading"
end
l.body class: "my-body", extra: "Donec id elit non mi porta" do
"Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit."
end
lg.list tap: true do |l|
l.header "List group item heading", extra: "3 days ago"
l.body "Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.", extra: "Donec id elit non mi porta"
end
end
<div class="list-group">
<a href="#" class="active list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="my-header d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="my-body mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta</small>
</a>
</div>