Bootstrap\ButtonGroup

• ButtonGroup
• Justify
• Toolbar
• Sizing
• Nesting
• SplitButton
• Dropup

Source

<?php

    $btngroup = new Barebone\Bootstrap\ButtonGroup();
    $btngroup
        ->addButton('Left')
        ->addButton('Middle', ['class' => 'btn-danger'])
        ->addButton('Right', ['onclick' => "alert('hey, you clicked me!')"]);
    echo $btngroup;

Result

<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button class="btn-danger btn" type="button">Middle</button>
<button onclick="alert('hey, you clicked me!')" type="button" class="btn btn-default">Right</button>
</div>
        

Source justify

<?php

    $btngroup = new Barebone\Bootstrap\ButtonGroup();
    $btngroup
        ->addButton('Left', ['onclick' => "alert('hey, you clicked me!')"])
        ->addButton('Middle', ['class' => 'btn-danger'])
        ->addButton('Right');
    $btngroup->justify(); // just say justify()
    echo $btngroup;

Result

<div class="btn-group btn-group-justified">
<div class="btn-group">
<button onclick="alert('hey, you clicked me!')" type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group">
<button class="btn-danger btn" type="button">Middle</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
        

Button toolbar

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

<?php

    $btngroup = new Barebone\Bootstrap\ButtonGroup();
    $btngroup->toolbar();
    $btngroup
        ->addGroup()
            ->addButton('Left', ['onclick' => "alert('hey, you clicked me!')"])
            ->addButton('Middle', ['class' => 'btn-danger'])
            ->addButton('Right');
            
    $btngroup
        ->addGroup()
            ->addButton('Bold', ['onclick' => "alert('hey, you clicked me!')"])
            ->addButton('Underline', ['class' => 'btn-success'])
            ->addButton('Italic');
    echo $btngroup;

Toolbar example

<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button onclick="alert('hey, you clicked me!')" type="button" class="btn btn-default">Left</button>
<button class="btn-danger btn" type="button">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group">
<button onclick="alert('hey, you clicked me!')" type="button" class="btn btn-default">Bold</button>
<button type="button" class="btn btn-default">Underline</button>
<button class="btn-success btn" type="button">Italic</button>
</div>
</div>
        

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.

Source Sizing

<?php

    $btngroup = new Barebone\Bootstrap\ButtonGroup();
    $btngroup
        ->addButton('Left', ['onclick' => "alert('hey, you clicked me!')"])
        ->addButton('Middle', ['class' => 'btn-danger'])
        ->addButton('Right');
    //$btngroup->large(); // just call large() on btngroup for large buttons
    //$btngroup->small(); // just call small() on btngroup for small buttons
    //$btngroup->extrasmall(); // just call extrasmall() on btngroup for extrasmall buttons
    // omit the size for default
    echo $btngroup;

Result Sizing

<div class="btn-group btn-group-xs">
<button onclick="alert('hey, you clicked me!')" type="button" class="btn btn-default">Left</button>
<button class="btn-danger btn" type="button">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
        

Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons. The important part of the code is: $btngroup->addItem($dropdown->asBtnGroup()); If you just add the dropdown as item it will not render properly.

Source Nesting

<?php 
    // create a dropdown
    $dropdown = new Barebone\Bootstrap\Dropdown('Dropdown');
    // add some items
    $dropdown->addHeader('Header actions');
    $dropdown->addItem('Action', '#');
    $dropdown->addItem('Another action', '#');
    $dropdown->addItem('Something else here', '#');
    // create a buttongroup
    $btngroup = new Barebone\Bootstrap\ButtonGroup();
    $btngroup
        // first add group
        ->addGroup()
            // then add buttons to the group
            ->addButton('Left') 
            ->addButton('Middle')
            ->addButton('Right');
    // buttongroup will identify the dropdown and automaticly render asBtnGroup()
    $btngroup->addItem($dropdown); 
    // buttongroup will render asBtnGroup()
    $btngroup->addItem($dropdown->asBtnGroup()); 
    echo $btngroup;    

<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" id="ddbtn6aa117905b0ab" data-toggle="dropdown">
Dropdown<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="ddbtn6aa117905b0ab">
<li role="presentation" class="dropdown-header">Header actions</li>
<li role="menuitem" tabindex="-1">
<a href="#">Action</a>
</li>
<li role="menuitem" tabindex="-1">
<a href="#">Another action</a>
</li>
<li role="menuitem" tabindex="-1">
<a href="#">Something else here</a>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" id="ddbtn6aa117905b0ab" data-toggle="dropdown">
Dropdown<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="ddbtn6aa117905b0ab">
<li role="presentation" class="dropdown-header">Header actions</li>
<li role="menuitem" tabindex="-1">
<a href="#">Action</a>
</li>
<li role="menuitem" tabindex="-1">
<a href="#">Another action</a>
</li>
<li role="menuitem" tabindex="-1">
<a href="#">Something else here</a>
</li>
</ul>
</div>
</div>
        

Split button dropdowns

Similarly, create split button dropdowns, only with a separate button.

Source Split button

<?php

    $splitbtn = new Barebone\Bootstrap\SplitButton('Dropdown');
    $splitbtn->addHeader('Header actions');
    $splitbtn->addItem('Action', '#');
    $splitbtn->addItem('Another action', '#');
    $splitbtn->addItem('Something else here', '#');
    echo $splitbtn; 

<div class="btn-group">
<button class="btn-danger btn btn-lg" id="ddbtn6aa117905b23e" type="button">Dropdown</button>
<button class="btn-danger btn dropdown-toggle btn-lg" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="ddbtn6aa117905b23e">
<li role="presentation" class="dropdown-header">Header actions</li>
<li role="menuitem" tabindex="-1">
<a href="#">Action</a>
</li>
<li role="menuitem" tabindex="-1">
<a href="#">Another action</a>
</li>
<li role="menuitem" tabindex="-1">
<a href="#">Something else here</a>
</li>
</ul>
</div>
        

Dropup variation

Trigger dropdown menus above elements by adding .dropup to the parent.

Source Dropup button

<?php

    $splitbtn = new Barebone\Bootstrap\SplitButton('Drop Up');
    $splitbtn->dropup();
    $splitbtn->addHeader('Header actions');
    $splitbtn->addItem('Action', '#');
    $splitbtn->addItem('Another action', '#');
    $splitbtn->addItem('Something else here', '#');
    echo $splitbtn; 

<div class="btn-group dropup">
<button class="btn-default btn" id="ddbtn6aa117905b2a6" type="button">Drop Up</button>
<button class="btn-default btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="ddbtn6aa117905b2a6">
<li role="presentation" class="dropdown-header">Header actions</li>
<li role="menuitem" tabindex="-1">
<a href="#">Action</a>
</li>
<li role="menuitem" tabindex="-1">
<a href="#">Another action</a>
</li>
<li role="menuitem" tabindex="-1">
<a href="#">Something else here</a>
</li>
</ul>
</div>
        

• Barebone\Bootstrap\ButtonGroup

  Barebone\Bootstrap\ButtonGroup extends Barebone\Bootstrap\Element
  • [P] $items : array
  • [M] __construct( Barebone\Bootstrap\Element $element ) : void
  • [M] addItem( Barebone\Bootstrap\Element $element ) : void
  • [M] addButton( $caption, $attributes ) : void
  • [M] large() : void
  • [M] small() : void
  • [M] extrasmall() : void
  • [M] justify() : void
  • [M] toolbar() : void
  • [M] addGroup() : void
  • [M] addSplitButton( $caption, $attributes ) : 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