Bootstrap components Listgroup

Edit on Gitlab

Table of Contents

Listgroup

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Bootstrap docs: https://getbootstrap.com/docs/5.3/components/list-group/

Listgroup

Syntax

$Bootstrap = new renderabootstrap5component();
echo $Bootstrap->listgroup($aItems, [$aOptions])
Returns: string

Parameters: 2

Parameter #0 [ <required> array $aItems ] 
items of the list. Per item set an array with these keys

Output:


    

  • 

    label {string} required: text / html code
    

    • 

  • 

    title {string} optional: title (in bold text above)
    

    • 

  • 

    badge {array} optional: badge on top right - for param keys see badge() method
    

    • 



Styling:


    

  • active {bool} highlight item as active (primary color)
    • 

  • bgtype {string} color the background; eg. primary|secondary|…
Parameter #1 [ <optional> array $aOptions = [] ] 
options for styling

  • flush {bool} flag: true= remove borders and rounded corners
    • 

  • numbered {bool} flag: numbered list (ol tag); default: false (no numbering; ul tag)
    • 

  • tag {string} TODO: type of list elements; default: “li”; others: “a”|“button”

    • Example

    PHP snippet

    $Bootstrap->listgroup([
  0 => [
    'title' => 'First title',
    'label' => 'Content of 1st item.',
    'badge' => [
      'bgtype' => 'danger',
      'label' => '7',
    ],
  ],
  1 => [
    'title' => 'Second title',
    'label' => 'Content of 2nd item.',
    'badge' => [
      'bgtype' => 'warning',
      'label' => '2',
    ],
  ],
  2 => [
    'title' => 'Third title',
    'label' => 'Content of 3rd item.',
    'badge' => [
      'bgtype' => 'success',
      'label' => '9',
    ],
  ],
],
[
  'numbered' => true,
]);

    Generated html output

    <ol class="list-group list-group-numbered">
          <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
              <div class="fw-bold">
            First title
              </div>
          Content of 1st item.
            </div>
            <span class="badge text-bg-danger">
          7
            </span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
              <div class="fw-bold">
            Second title
              </div>
          Content of 2nd item.
            </div>
            <span class="badge text-bg-warning">
          2
            </span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-start">
            <div class="ms-2 me-auto">
              <div class="fw-bold">
            Third title
              </div>
          Content of 3rd item.
            </div>
            <span class="badge text-bg-success">
          9
            </span>
          </li>
    </ol>