List group(ui_list_group)Bootstrap Logo

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.

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_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 tapped
  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

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)
  • flush[boolean]
  • tag_type[symbol](:a, :button, :li)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)

Items

The allowed items for this component are:
  • html[html/string]Insert html as a component
  • list(inherit of component)

Examples

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

List group

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
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>

Flush

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
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>

badges

  • Cras justo odio14
  • Dapibus ac facilisis in2
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>

Linked items

Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
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>

Button items

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>

Disabled items

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
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>

Status

  • This is a normal list group item
  • This is a primary list group item
  • This is a secondary list group item
  • This is a success list group item
  • This is a danger list group item
  • This is a warning list group item
  • This is a info list group item
  • This is a light list group item
  • This is a dark list group item
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>

Custom content

List group list has several block type:

List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta
List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta
List group item heading
3 days ago

Donec 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 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 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 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>