UiBibz::Ui::Core::Lists::List
List component for displaying custom content.
# by variable
ui_list content, options, html_options
# or by block
ui_list options, html_options do
content
end
# or by block with tap
ui_list options, html_options do |l|
# by variable
l.header content, options, html_options
# or by block
l.header options, html_options do
content
end
# by variable
l.body content, options, html_options
# or by block
l.body options, html_options do
content
end
end
ui_list "Cras justo odio"
ui_list do
Cras justo odio by block
end
<li class="list-group-item">Cras justo odio</li>
ui_list "Cras justo odio", badge: 14
ui_list "Dapibus ac facilisis in", badge: { content: 2, type: :square }
<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>
ui_list "Cras justo odio", url: "#1", state: :active, tag: :a
ui_list "Porta ac consectetur ac", url: "#2", tag: :a
<a class="active list-group-item" href="#1">Cras justo odio</a>
<a class="list-group-item" href="#2">Porta ac consectetur ac</a>
ui_list "Cras justo odio", url: "#1", state: :active, tag: :button
ui_list "Porta ac consectetur ac", url: "#2", tag: :button
<button class="active list-group-item" href="#1">Cras justo odio</button>
<button class="list-group-item" href="#2">Porta ac consectetur ac<button>
ui_list "Cras justo odio", state: :disabled
<li class="disabled list-group-item">Cras justo odio</li>
ui_list "This is a primary list group item", status: :primary
ui_list "This is a secondary list group item", status: :secondary
ui_list "This is a success list group item", status: :success
ui_list "This is a danger list group item", status: :danger
ui_list "This is a warning list group item", status: :warning
ui_list "This is a info list group item", status: :info
ui_list "This is a light list group item", status: :light
ui_list "This is a dark list group item", status: :dark
<li class="list-group-item-primary list-group-item">This is a primary list group item</li>
<li class="list-group-item-secondary list-group-item">This is a secondary list group item</li>
<li class="list-group-item-success list-group-item">This is a success list group item</li>
<li class="list-group-item-danger list-group-item">This is a danger list group item</li>
<li class="list-group-item-warning list-group-item">This is a warning list group item</li>
<li class="list-group-item-info list-group-item">This is a info list group item</li>
<li class="list-group-item-light list-group-item">This is a light list group item</li>
<li class="list-group-item-dark list-group-item">This is a dark list group item</li>
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 porta
ui_list tap: true, state: :active, tag: :a 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
ui_list tap: true, tag: :a 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
end
<a tag="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 tag="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>