Fork me on GitHub

Mesour Button

Packagist Travis

  • Twitter bootstrap 3.2+ Download
  • Font Awesome (in default, can change) 4.5+ Download

Installation

Suggests

  • None

Demo

To mesour.com >>

Defaults

protected $defaults = [
    self::WRAPPER => [
        'el' => 'a',
        'attributes' => [
            'class' => 'btn btn-{_BTN_type_} {_BTN_size_}',
            'role' => 'button',
        ]
    ],
    self::DEFAULTS => [
        '_BTN_type_' => 'default',
        '_BTN_size_' => '',
        '_ICON_name_' => 'cog',
        '_ICON_prefix_' => 'fa fa-',
        '_RICON_name_' => 'cog',
        '_RICON_prefix_' => 'fa fa-',
    ]
];

Features

Without settings

Init

$button = new \Mesour\UI\Button;

echo $button->render();

Output

<a class="btn btn-default" role="button"></a>

Demo

Set href and text

Init

$button = new \Mesour\UI\Button;

$button->setText('To mesour.com >>');

$button->setAttribute('href', $button->link('http://mesour.com'))
    ->setAttribute('target', '_blank');

echo $button->render();

Output

<a href="http://mesour.com?" target="_blank" class="btn btn-default" role="button">
    To mesour.com >>
</a>

Demo

To mesour.com >>

Set type, size and own class name

Init

$button = new \Mesour\UI\Button;

$button->setText('To mesour.com >>')
    ->setType('warning')
    ->setSize('btn-lg')
    ->setClassName('my-own-appended-class')
    ->setAttribute('href', $button->link('http://mesour.com'))
    ->setAttribute('target', '_blank');

echo $button->render();

Output

<a href="http://mesour.com?" target="_blank" class="btn btn-warning btn-lg my-own-appended-class" role="button">
    To mesour.com >>
</a>

Demo

To mesour.com >>

Set disabled

Info It will remove all attributes with link.

Init

$button = new \Mesour\UI\Button;

$button->setText('To mesour.com >>')
    ->setType('warning')
    ->setSize('btn-lg')
    ->setClassName('my-own-appended-class')
    ->setAttribute('href', $button->link('http://mesour.com'))
    ->setAttribute('target', '_blank');

$button->setDisabled();

echo $button->render();

Output

<a target="_blank" class="btn btn-warning btn-lg my-own-appended-class disabled" role="button">
    To mesour.com >>
</a>

Demo

To mesour.com >>

Without classes, own classes

Init

$button = new \Mesour\UI\Button();

$button->setText('To mesour.com >>')
    ->setAttribute('class', FALSE)// set own class name or FALSE for unset
    ->setAttribute('href', $button->link('http://mesour.com'))
    ->setAttribute('target', '_blank');

echo $button->render();

Output

<a href="http://mesour.com?" target="_blank" role="button">To mesour.com >></a>

Demo

To mesour.com >>

Left and right icons

Init

$button = new \Mesour\UI\Button();

$button->setIcon('tree');

$button->setRightIcon('chevron-right');

$button->setText('MESOUR.COM')
    ->setType('danger')
    ->setSize('btn-lg')
    ->setAttribute('href', $button->link('http://mesour.com'))
    ->setAttribute('target', '_blank');

echo $button->render();

Output

<a href="http://mesour.com?" target="_blank" class="btn btn-danger btn-lg" role="button">
    <span class="fa fa-tree"></span>
     MESOUR.COM 
    <span class="fa fa-chevron-right"></span>
</a>

Demo

 MESOUR.COM 

Only icon

Init

$button = new \Mesour\UI\Button();

$button->setIcon('edit');

$button->setType('primary')
    ->setSize('btn-lg')
    ->setAttribute('href', $button->link('http://mesour.com'))
    ->setAttribute('target', '_blank');

echo $button->render();

Output

<a href="http://mesour.com?" target="_blank" class="btn btn-primary btn-lg" role="button">
    <span class="fa fa-edit"></span>
</a>

Demo

Using data parser via { key }

Init

$button = new \Mesour\UI\Button();

$button->setIcon('edit');

$button->setType('primary')
    ->setSize('btn-lg')
    ->setAttribute('id', 'user-{username}')
    ->setAttribute('href', $button->link('/edit-user/', array('id' => '{id}')))
    ->setAttribute('target', '_blank');

echo $button->render(array(
    'id' => 25,
    'username' => 'root',
    'name' => 'Root'
));

// can render again with another data
echo $button->render(array(
    'id' => 50,
    'username' => 'admin',
    'name' => 'Admin'
));

Output

<a id="user-root" href="/edit-user/?id=25" target="_blank" class="btn btn-primary btn-lg" role="button">
    <span class="fa fa-edit"></span>
</a>
<!-- here next rendered anchor with id = 50 -->

Demo

Full example

Init

$button = new \Mesour\UI\Button();

// $button->setAttribute('class', 'my-own-class');
// same as
// $button->getControlPrototype()->class('my-own-class');

$button->setConfirm('Test confirm\' text?');

$button->setAttribute('data-text', 'Test title', FALSE, TRUE); // TRUE = allow translates

$button->setIcon('education');

$button->setRightIcon('option-horizontal');

$button->setSize('btn-lg');

$button->setText('My text');

$button->setClassName('my-test-2');

$button->setAttribute('href', $button->link('/test/', array('id' => '{id}')));

$button->onRender[] = function (\Mesour\UI\Button $button, $data) {
    if ($data['id'] <= 5) {
        $button->setDisabled();
        $button->setAttribute('data-xxx', 'ble');
        $button->getIconPrototype()
            ->class('fa fa-menu');
    } else {
        $button->setDisabled(FALSE);
    }

};

echo '< h5>Disabled id = 5< /h5>';

echo $button->render(array(
    'id' => 5
));

echo '< hr>< h5>Enabled id = 25< /h5>';

echo $button->render(array(
    'id' => 25
));

Output

<h5>Disabled id = 5</h5>
<a data-text="Test title" data-xxx="ble" class="btn btn-default btn-lg my-test-2 disabled" role="button">
    <span class="glyphicon glyphicon-menu-hamburger"></span>
     My text 
    <span class="glyphicon glyphicon-option-horizontal"></span>
</a>
<hr><h5>Enabled id = 25</h5>
<a onclick="return confirm('Test confirm\' text?');" data-text="Test title" href="/test/?id=25" class="btn btn-default btn-lg my-test-2" role="button">
    <span class="glyphicon glyphicon-education"></span>
     My text 
    <span class="glyphicon glyphicon-option-horizontal"></span>
</a>

Demo

Disabled id = 5
 My text 
Enabled id = 25
 My text