Fork me on GitHub

Mesour DropDown

Packagist

Installation

Suggests

  • None

Demo

Defaults

\Mesour\UI\DropDown::$defaults = array(
    self::CARET => ' class="caret">',
    self::WRAPPER => array(
        'el' => 'div',
        'attributes' => array(
            'class' => 'dropdown',
        )
    ),
    self::MENU => array(
        'el' => 'ul',
        'attributes' => array(
            'class' => 'dropdown-menu',
            'role' => 'menu'
        )
    ),
    self::MENU_ITEM => array(
        'el' => 'li',
        'attributes' => array(
            'role' => 'presentation'
        )
    ),
    self::ITEMS => array(
        'header_class' => 'dropdown-header',
        'button_class' => '',
        'divider_class' => 'divider'
    ),
    self::DEFAULTS => array()
);

Initializing

$dropDown = new \Mesour\UI\DropDown;

$dropDown->addHeader('Test header');

$first = $dropDown->addButton();

$first->setText('First button')
    ->setAttribute('href', $dropDown->link('/first/'));

$dropDown->addDivider();

$dropDown->addHeader('Test header 2');

$dropDown->addButton()
    ->setText('Second button')
    ->setConfirm('Test confirm :-)')
    ->setAttribute('href', $dropDown->link('/second/'));

$dropDown->addButton()
    ->setText('Third button')
    ->setAttribute('href', $dropDown->link('/third/'));

$mainButton = $dropDown->getMainButton();

$mainButton->setText('Actions')
    ->setType('danger');

echo $dropDown->render();

Output

<div class="dropdown">
    <button id="554d3bda59311" class="btn btn-danger" role="button" data-toggle="dropdown" aria-expanded="false">
        Actions <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="554d3bda59311">
        <li role="presentation" class="dropdown-header">Test header</li>
        <li role="presentation"><a href="/first/" class="" role="menuitem" tabindex="-1">First button</a></li>
        <li role="presentation" class="divider"></li><li role="presentation" class="dropdown-header">
            Test header 2
        </li>
        <li role="presentation">
            <a onclick="return confirm('Test confirm :-)');" href="/second/" class="" role="menuitem" tabindex="-1">
            Second button
            </a>
        </li>
        <li role="presentation"><a href="/third/" class="" role="menuitem" tabindex="-1">Third button</a></li>
    </ul>
</div>