List(ui_list)Bootstrap Logo

UiBibz::Ui::Core::Lists::List

List component for displaying 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: {}>

# by variable
ui_list content, options, html_options

# or by block
ui_list options, html_options do
  content
end

# or by block tapped options
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

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • badge[hash/string](use component badge method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • glyph[string/hash](use component glyph method)
  • popover[string/hash](use component popover method)
  • state[symbol](:disabled, :active)(use component state method)
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • target[string](use component stimulus-options method)
  • tooltip[string/hash](use component tooltip method)
  • turbo[string](use component turbo method)

Items

The allowed items for this component are:

Examples

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

List

  • Cras justo odio

  • Cras justo odio by block 
    • ui_list "Cras justo odio"

ui_list do
  Cras justo odio by block
end

    <li class="list-group-item">Cras justo odio</li>

    Badge

  • Cras justo odio14

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

    Link

  • Cras justo odio

  • Porta ac consectetur ac
    • 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>

    Button

  • Cras justo odio

  • Porta ac consectetur ac
    • 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>

    Disabled items

  • Cras justo odio
    • ui_list "Cras justo odio", state: :disabled

    
  <li class="disabled list-group-item">Cras justo odio</li>

    Status

  • 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 "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>

    Block

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