Barebone\Bootstrap\Listgroup

List groups

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. Basic example

The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

<?php
    $listgroup = new Barebone\Bootstrap\Listgroup();
    $listgroup->addItem('Cras justo odio');
    $listgroup->addItem('Cras justo odio');
    $listgroup->addItem('Morbi leo risus');
    $listgroup->addItem('Cras justo odio');
    $listgroup->addItem('Morbi leo risus');
    echo $listgroup;

Result

• Cras justo odio
• Cras justo odio
• Morbi leo risus
• Cras justo odio
• Morbi leo risus

Badges

Add the badges component to any list group item and it will automatically be positioned on the right.

<?php
    $listgroup = new Barebone\Bootstrap\Listgroup();
    $listgroup->addItem('Cras justo odio', 24);
    $listgroup->addItem('Cras justo odio', 42);
    $listgroup->addItem('Morbi leo risus', 'abc');
    $listgroup->addItem('Cras justo odio', 'NULL');
    $listgroup->addItem('Morbi leo risus', '33');
    echo $listgroup;

Result

• Cras justo odio24
• Cras justo odio42
• Morbi leo risusabc
• Cras justo odioNULL
• Morbi leo risus33

<ul class="list-group">
<li class="list-group-item">
Cras justo odio<span class="badge">24</span>
</li>
<li class="list-group-item">
Cras justo odio<span class="badge">42</span>
</li>
<li class="list-group-item">
Morbi leo risus<span class="badge">abc</span>
</li>
<li class="list-group-item">
Cras justo odio<span class="badge">NULL</span>
</li>
<li class="list-group-item">
Morbi leo risus<span class="badge">33</span>
</li>
</ul>

Linked items

Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.

<?php
    $listgroup = new Barebone\Bootstrap\Listgroup();
    $listgroup->addItem('Cras justo odio', 24, '/');
    $listgroup->addItem('Cras justo odio', 42, '#');
    $listgroup->addItem('Morbi leo risus', 'abc', '#');
    $listgroup->addItem('Cras justo odio', 'NULL', '#');
    $listgroup->addItem('Morbi leo risus', '33', '#');
    echo $listgroup;

Result

<div class="list-group">
<a class="list-group-item" href="/">
Cras justo odio<span class="badge">24</span>
</a>
<a class="list-group-item" href="#">
Cras justo odio<span class="badge">42</span>
</a>
<a class="list-group-item" href="#">
Morbi leo risus<span class="badge">abc</span>
</a>
<a class="list-group-item" href="#">
Cras justo odio<span class="badge">NULL</span>
</a>
<a class="list-group-item" href="#">
Morbi leo risus<span class="badge">33</span>
</a>
</div>

Contextual classes

Use contextual classes to style list items, default or linked. Also includes .active state.

<?php
    $listgroup = new Barebone\Bootstrap\Listgroup();
    $listgroup->addItem('Cras justo odio', 24, '/', 'primary');
    $listgroup->addItem('Cras justo odio', 42, '#', 'info');
    $listgroup->addItem('Morbi leo risus', 'abc', '#', 'success');
    $listgroup->addItem('Cras justo odio', 'NULL', '#', 'warning');
    $listgroup->addItem('Morbi leo risus', '33', '#', 'danger');
    echo $listgroup;

Result

<div class="list-group">
<a class="list-group-item list-group-item-primary" href="/">
Cras justo odio<span class="badge">24</span>
</a>
<a class="list-group-item list-group-item-info" href="#">
Cras justo odio<span class="badge">42</span>
</a>
<a class="list-group-item list-group-item-success" href="#">
Morbi leo risus<span class="badge">abc</span>
</a>
<a class="list-group-item list-group-item-warning" href="#">
Cras justo odio<span class="badge">NULL</span>
</a>
<a class="list-group-item list-group-item-danger" href="#">
Morbi leo risus<span class="badge">33</span>
</a>
</div>

• Barebone\Bootstrap\Listgroup

  Barebone\Bootstrap\Listgroup extends Barebone\Bootstrap\Element
  • [M] __construct() : void
  • [M] addItem( $caption, $bagde, $href, $contextual ) : void

  • Barebone\Bootstrap\Element

    Barebone\Bootstrap\Element extends Barebone\HTML\TElement
    • [M] __construct( string $tag, array $attributtes ) : void
    • [M] muted( string $context ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Contextual
    • [M] primary( string $context ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Contextual
    • [M] success( string $context ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Contextual
    • [M] info( string $context ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Contextual
    • [M] warning( string $context ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Contextual
    • [M] danger( string $context ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Contextual
    • [M] align( string $alignement ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Visibility
    • [M] invisible() : void

      ↳ trait: Barebone\Bootstrap\Traits\Visibility
    • [M] hide() : void

      ↳ trait: Barebone\Bootstrap\Traits\Visibility
    • [M] show() : void

      ↳ trait: Barebone\Bootstrap\Traits\Visibility
    • [M] tooltip( string $tooltip, string $placement ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Interactive
    • [M] popover( string $title, string $content, string $placement ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Interactive

    • Barebone\HTML\TElement

      Barebone\HTML\TElement
      • [P] $tag : string
      • [P] $innertext : string
      • [P] $children : array
      • [P] $attributes : array
      • [P] $non_closing_tags : mixed
      • [M] __construct( string $tag, array $attributes ) : void
      • [M] append( Barebone\HTML\TElement $element ) : void
      • [M] prepend( Barebone\HTML\TElement $element ) : void
      • [M] class_exists( $cssclass ) : void
      • [M] add_class( $cssclass ) : void
      • [M] remove_class( $cssclass ) : void
      • [M] innertext( string $value ) : void
      • [M] data( string $name, string $value ) : void
      • [M] aria( string $name, string $value ) : void
      • [M] on( string $event, string $callback ) : void
      • [M] css( string $identifier, string $rule ) : void
      • [M] wrap( string $tagname, array $attributes ) : void
      • [M] enable() : void
      • [M] disable() : void
      • [M] has_closing_tag() : void
      • [M] has_children() : void
      • [M] count_children() : void
      • [M] get_children() : void
      • [M] replace_child( $key, $new_child ) : void
      • [M] get_child( $key ) : void
      • [M] __unset( $name ) : void
      • [M] __isset( $name ) : void
      • [M] __set( $name, $value ) : void
      • [M] __get( $name ) : void
      • [M] render() : void
      • [M] __toString() : string
      • [M] editable() : void