Available contexts are <code>success</code>, <code>info</code>, <code>warning</code> and <code>danger</code>.', 'php_code' => "echo BootHelp::progress_bar(['percentage'=>30, 'context'=>'warning']);", 'result' => BootHelp::progress_bar(['percentage' => 30, 'context' => 'warning']), 'html_code' => '<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" style="width: 30%" role="progressbar" class="progress-bar progress-bar-warning">
<span class="sr-only">30% (warning)</span>
</div>
</div>'], ['name' => 'Striped progress bar', 'description' => 'Use <code>progress_bar</code> with the <code>["striped"=> true]"</code> option to display a striped progress bar.', 'php_code' => "echo BootHelp::progress_bar(['percentage'=>30, 'striped'=>true]);", 'result' => BootHelp::progress_bar(['percentage' => 30, 'striped' => true]), 'html_code' => '<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" style="width: 30%" role="progressbar" class="progress-bar progress-bar-striped">
<span class="sr-only">30%</span>
</div>
</div>'], ['name' => 'Animated progress bar', 'description' => 'Use progress_bar with the <code>["animated"=> true]</code> option to display a striped animated progress bar.', 'php_code' => "echo BootHelp::progress_bar(['percentage'=>30, 'animated'=>true]);", 'result' => BootHelp::progress_bar(['percentage' => 30, 'animated' => true]), 'html_code' => '<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" style="width: 30%" role="progressbar" class="progress-bar progress-bar-striped active">
<span class="sr-only">30%</span>
</div>
</div>'], ['name' => 'Stacked progress bar', 'description' => 'Use <code>progress_bar</code> with an array of options to display a set of stacked progress bars.', 'php_code' => "echo BootHelp::progress_bar([\n ['percentage'=>30, 'context'=>'success', 'label'=>'Completed'],\n ['percentage'=>40, 'context'=>'warning', 'animated'=>true, 'label'=>'Pending']\n]);", 'result' => BootHelp::progress_bar([['percentage' => 30, 'context' => 'success', 'label' => 'Completed'], ['percentage' => 40, 'context' => 'warning', 'animated' => true, 'label' => 'Pending']]), 'html_code' => '<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" style="width: 30%" role="progressbar" class="progress-bar progress-bar-success">
Completed
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" style="width: 40%" role="progressbar" class="progress-bar progress-bar-warning progress-bar-striped active">
Pending
</div>
</div>'], ['name' => 'Complex progress bar', 'description' => 'You can specify custom options for each progress bar which will be added to the progress bar’s <code>div</code> tag.
You can also specify custom options for the wrapping <code>div</code> container by passing them as the last argument.', 'php_code' => "echo BootHelp::progress_bar(['percentage'=>30, 'id'=>'bar', 'data-js'=>1], ['id'=>'container', 'class'=>'en']);", 'result' => BootHelp::progress_bar(['percentage' => 30, 'id' => 'bar', 'data-js' => 1], ['id' => 'container', 'class' => 'en']), 'html_code' => '<div class="en progress" id="container">
<div data-js="1" id="bar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" style="width: 30%" role="progressbar" class="progress-bar">
<span class="sr-only">
30%
</span>
</div>
</div>']]];
/**
* Progress bar samples.
*/
echo new Sample($progress_bar);
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
use cobisja\BootHelp\BootHelp;
use cobisja\BootHelp\Guide\Sample;
$alerts = ['title' => 'Alerts', 'samples' => [['name' => 'Standard alerts', 'description' => 'Use <code>alert_box</code> without options to display a basic informational message.', 'php_code' => "echo BootHelp::alert_box('You successfully read this important alert message.');", 'result' => BootHelp::alert_box('You successfully read this important alert message.'), 'html_code' => '<div class="alert alert-info" role="alert">
You successfully read this important alert message.
</div>'], ['name' => 'Dismisible alerts', 'description' => 'Add <code>["dismissible"=> true]</code> to add a close button to the alert box.', 'php_code' => "echo BootHelp::alert_box('You accepted the Terms of service.', ['dismissible'=>true]);", 'result' => BootHelp::alert_box('You accepted the Terms of service.', ['dismissible' => true]), 'html_code' => '<div class="alert alert-info alert-dismissible" role="alert">
<button aria-label="Close" data-dismiss="alert" class="close" type="button">
<span aria-hidden="true">×</span>
</button>
You accepted the Terms of service.
</div>'], ['name' => 'Contextual alerts', 'description' => 'Set the <code>context</code> option to change the color (and semantic context) of the alert message.
Available contexts are <code>"success"</code>, <code>"info"</code> (default), <code>"warning"</code> and <code>"danger"</code>.', 'php_code' => "echo BootHelp::alert_box('You accepted the Terms of service.', ['context'=>'success']);", 'result' => BootHelp::alert_box('You accepted the Terms of service.', ['context' => 'success']), 'html_code' => '<div class="alert alert-success" role="alert">
You accepted the Terms of service.
</div>'], ['name' => 'Links in alerts', 'description' => 'When a link is within any alert box, class <code>.alert-link</code> is automatically added to quickly provide matching colored links.', 'php_code' => "echo BootHelp::alert_box(['context'=>'warning', 'dismissible'=>true, 'id'=>'my-alert', 'class'=>'en', 'data-js'=>1], function(){\n return [\n '<strong>Well done!</strong> You successfully read ',\n BootHelp::link_to('this important alert message', ['href'=> '#']),\n '.'\n ];\n});", 'result' => BootHelp::alert_box(['context' => 'warning', 'dismissible' => true, 'id' => 'my-alert', 'class' => 'en', 'data-js' => 1], function () {
return ['<strong>Well done!</strong> You successfully read ', BootHelp::link_to('this important alert message', ['href' => '#']), '.'];
}), 'html_code' => '<div data-js="1" class="en alert alert-warning alert-dismissible" id="my-alert" role="alert">
<button aria-label="Close" data-dismiss="alert" class="close" type="button">
<span aria-hidden="true">×</span>
</button>
<strong>Well done!</strong> You successfully read <a class="alert-link" href="#">this important alert message</a>.
</div>']]];
/**
* AlertBox samples.
*/
echo new Sample($alerts);
})];
}), 'html_code' => '<div role="toolbar" aria-label="toolbar" class="btn-toolbar">
<div role="group" aria-label="button-group" class="btn-group">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
<button class="btn btn-default">Button 3</button>
</div>
<div role="group" aria-label="button-group" class="btn-group">
<button class="btn btn-default">Button 4</button>
<button class="btn btn-default">Button 5</button>
</div>
</div>'], ['name' => 'Complex Button Toolbar', 'description' => 'You can specify additional options wich will be used for the button toolbar <code>div</code>.', 'php_code' => "echo BootHelp::button_toolbar(['id'=>'my-toolbar', 'class'=>'en'], function() {\n return [\n BootHelp::button_group(function(){\n return [\n BootHelp::button('Button 1'),\n BootHelp::button('Button 2'),\n BootHelp::button('Button 3')\n ];\n }),\n BootHelp::button_group(function(){\n return [\n BootHelp::button('Button 4'),\n BootHelp::button('Button 5')\n ];\n })\n ];\n});", 'result' => BootHelp::button_toolbar(['id' => 'my-toolbar', 'class' => 'en'], function () {
return [BootHelp::button_group(function () {
return [BootHelp::button('Button 1'), BootHelp::button('Button 2'), BootHelp::button('Button 3')];
}), BootHelp::button_group(function () {
return [BootHelp::button('Button 4'), BootHelp::button('Button 5')];
})];
}), 'html_code' => '<div id="my-toolbar" role="toolbar" aria-label="toolbar" class="en btn-toolbar">
<div role="group" aria-label="button-group" class="btn-group">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
<button class="btn btn-default">Button 3</button>
</div>
<div role="group" aria-label="button-group" class="btn-group">
<button class="btn btn-default">Button 4</button>
<button class="btn btn-default">Button 5</button>
</div>
</div>']]];
/**
* Button Toolbar samples.
*/
put it inside the Nav definition, to get the Nav code cleaner. In these cases, you have to use <code>["into_nav"=>true]</code>
to indicates that the Dropdown is embedded the Nav.', 'php_code' => "\$sub_menu = Boothelp::dropdown('Social networks', ['into_nav'=>true], function(){\n return [\n BootHelp::link_to('Twitter'),\n BootHelp::link_to('Facebook'),\n BootHelp::divider(),\n BootHelp::link_to('Others')\n ];\n});\necho BootHelp::nav(function() use (\$sub_menu) {\n return [\n new LinkTo('Home', ['href'=>'/']),\n \$sub_menu\n new LinkTo('Profile')\n ];\n});", 'result' => BootHelp::nav(function () use($href) {
return [new LinkTo('Home', ['href' => $href]), Boothelp::dropdown('Social networks', function () {
return [BootHelp::link_to('Twitter'), BootHelp::link_to('Facebook'), BootHelp::divider(), BootHelp::link_to('Other')];
}), new LinkTo('Profile')];
}), 'html_code' => '<ul class="nav nav-tabs">
<li class="active"><a href="/">Home</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
Social networks
<span class="caret"></span>
</a>
<ul aria-labelledby="label-dropdown-705851964" role="menu" class="dropdown-menu">
<li><a href="#" role="menuitem">Twitter</a></li>
<li><a href="#" role="menuitem">Facebook</a></li>
<li class="divider"></li><li><a href="#" role="menuitem">Other</a></li>
</ul>
</li>
<li><a href="#">Profile</a></li>
</ul>'], ['name' => 'Complex navs', 'description' => 'To include HTML tags or a long text in the nav, pass your content in a block.
You can also specify custom options which will be added to the nav’s <code>ul</code> tag.', 'php_code' => "echo BootHelp::nav(['as'=>'pills', 'id'=>'nav', 'class'=>'en', 'data-js'=>1], function(){\n return [\n new LinkTo('Home', ['href'=>'/']),\n new LinkTo('Users'),\n new LinkTo('Profile')\n ];\n});", 'result' => BootHelp::nav(['as' => 'pills', 'id' => 'nav', 'class' => 'en', 'data-js' => 1], function () use($href) {
return [new LinkTo('Home', ['href' => $href]), new LinkTo('Users'), new LinkTo('Profile')];
}), 'html_code' => '<ul data-js="1" class="en nav nav-pills" id="nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Profile</a></li>
</ul>']]];
/**
* Nav samples.
*/
echo new Sample($navs);
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
use cobisja\BootHelp\BootHelp;
use cobisja\BootHelp\Guide\Sample;
$buttons = ['title' => 'Buttons', 'samples' => [['name' => 'Basic buttons', 'description' => 'Use <code>button</code> without options to display a button with the given caption.', 'php_code' => "echo BootHelp::button('Menu');", 'result' => BootHelp::button('Menu'), 'html_code' => '<button class="btn btn-default">
Menu
</button>'], ['name' => 'Contextual buttons', 'description' => 'Use button with the <code>"context"</code> option to change the color (and semantic context) of the toggle button.
Available contexts are <code>"default"</code> (default), <code>"primary"</code>, <code>"success"</code>, <code>"info"</code>, <code>"warning"</code> and <code>"danger"</code>.', 'php_code' => "echo BootHelp::button('Menu', ['context'=>'info']);", 'result' => BootHelp::button('Menu', ['context' => 'info']), 'html_code' => '<button class="btn btn-info">
Menu
</button>'], ['name' => 'Custom-sized buttons', 'description' => 'Use button with the <code>"size"</code> option to change the size of the button.', 'php_code' => "echo BootHelp::button('Menu', ['size'=>'large']);", 'result' => BootHelp::button('Menu', ['size' => 'large']), 'html_code' => '<button class="btn btn-default btn-lg">
Menu
</button>'], ['name' => 'Block-level buttons', 'description' => 'Use button with the <code>["layout"=> "block"]</code> option to display a button that spans the full width of the parent.', 'php_code' => "echo BootHelp::button('Menu', ['layout'=>'block']);", 'result' => BootHelp::button('Menu', ['layout' => 'block']), 'html_code' => '<button class="btn btn-default btn-block">
Menu
</button>'], ['name' => 'Buttons with badge support', 'description' => 'Use button with the <code>["badge"=>value]</code> option to display a badge inside the button.', 'php_code' => "echo BootHelp::button('Messages', ['context'=>'primary', 'badge'=>42]);", 'result' => BootHelp::button('Messages', ['context' => 'primary', 'badge' => 42]), 'html_code' => '<button class="btn btn-primary">
Messages
<span class="badge">42</span>
</button>'], ['name' => 'Complex buttons', 'description' => 'To include HTML tags or a long text in the button, pass the caption as a closure.
You can also specify custom options which will be added to the <code>button</code> tag.', 'php_code' => "echo BootHelp::button(['context'=>'warning', 'id'=>'button', 'class'=>'en', 'data-js'=>1], function(){\n return 'Your <em>personal</em> menu';", 'result' => BootHelp::button(['context' => 'warning', 'id' => 'button', 'class' => 'en', 'data-js' => 1], function () {
return 'Your <em>personal</em> menu';
}), 'html_code' => '<button data-js="1" class="en btn btn-warning" id="button">
Your <em>personal</em> menu
</button>']]];
/**
* Button samples.
*/
echo new Sample($buttons);
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
use cobisja\BootHelp\BootHelp;
use cobisja\BootHelp\Guide\Sample;
$images = ['title' => 'Labels', 'samples' => [['name' => 'Basic labels', 'description' => 'Use <code>label</code> without options to display a label with the given text content.', 'php_code' => "echo BootHelp::label('New');", 'result' => BootHelp::label('New'), 'html_code' => '<span class="label label-default">New</span>'], ['name' => 'Contextual labels', 'description' => 'Use label with the <code>"context"</code> option to change the color (and semantic context) of the label.
Available contexts are <code>"default"</code> (default), <code>"primary"</code>, <code>"success"</code>, <code>"info"</code>, <code>"warning"</code> and <code>"danger"</code>.', 'php_code' => "echo BootHelp::label('New', ['context'=>'success']);", 'result' => BootHelp::label('News', ['context' => 'success']), 'html_code' => '<span class="label label-success">New</span>'], ['name' => 'Complex label\'s content', 'description' => 'You are not limited to pass a string as Label\'s content. You can pass others components too.
In fact, you can pass specific attributes for the <code>span</code> tag that contains the <code>label</code> definition.
To get that, pass the label\'s content as a closure.', 'php_code' => "echo BootHelp::label(['id'=>'my-label', 'context'=>'primary'], function(){\n return [\n BootHelp::icon('headphones'),\n 'Enjoy the music'\n ];\n});", 'result' => BootHelp::label(['id' => 'my-label', 'context' => 'primary'], function () {
return [BootHelp::icon('headphones'), 'Enjoy the music'];
}), 'html_code' => '<span class="label label-primary" id="my-label">
<span class="glyphicon glyphicon-headphones"></span>
Enjoy the music
</span>'], ['name' => 'Complex labels', 'description' => 'To include HTML tags or a long text in the label, pass the label\'s content as a closure.
Actually, you can combine <code>label</code> with others components to get interesting results.', 'php_code' => "echo BootHelp::content_tag('h1', function(){\n return [\n 'Example heading ',\n BootHelp::label(['id'=>'my-label', 'class'=>'en', 'context'=>'danger'], function(){\n return [\n BootHelp::icon('heart'),\n 'My Love!'\n ];\n })\n ];\n});", 'result' => BootHelp::content_tag('h1', function () {
return ['Example heading ', BootHelp::label(['id' => 'my-label', 'class' => 'en', 'context' => 'danger'], function () {
return [BootHelp::icon('heart'), 'My Love!'];
})];
}), 'html_code' => '<h1>
Example heading
<span id="my-label" class="en label label-default">
<span class="glyphicon glyphicon-heart"></span>My Love!
</span>
</h1>']]];
/**
* Label samples.
*/
echo new Sample($images);
<div class="panel-body">Panel #1</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-body">Panel #2</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-body">Panel #3</div>
</div>
</div>
</div>'], ['name' => 'Complex row of panels', 'description' => 'You can specify custom options which will be added to the panel row’s <code>div</code> tag.', 'php_code' => "echo BootHelp::panel_row(['column_class'=>'col-sm-6', 'id'=>'panel_row', 'class'=>'en', 'data-js'=>1], function(){\n return [\n BootHelp::panel('John Smith', ['title'=>'User', 'context'=>'info']),\n BootHelp::panel(['title'=>'Phone'], function(){\n return BootHelp::icon('earphone') . ' 323-555-5555';\n })\n ];\n});", 'result' => BootHelp::panel_row(['column_class' => 'col-sm-6', 'id' => 'panel_row', 'class' => 'en', 'data-js' => 1], function () {
return [BootHelp::panel('John Smith', ['title' => 'User', 'context' => 'info']), BootHelp::panel(['title' => 'Phone'], function () {
return BootHelp::icon('earphone') . ' 323-555-5555';
})];
}), 'html_code' => '<div data-js="1" class="en row" id="panel_row">
<div class="col-sm-6">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">User</h3>
</div>
<div class="panel-body">
John Smith
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-body">You accepted the Terms of service.</div>
<div class="panel-footer">Pay attention to this!</div>
</div>'], ['name' => 'Panel with title', 'description' => 'Use the <code>title</code> options to display a title above the panel.', 'php_code' => "echo BootHelp::panel('You accepted the Terms of service.', ['title'=>'Congratulations']);", 'result' => BootHelp::panel('You accepted the Terms of service.', ['title' => 'Congratulations']), 'html_code' => '<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Congratulations</h3>
</div>
<div class="panel-body">
You accepted the Terms of service.
</div>
</div>'], ['name' => 'Contextual panels', 'description' => 'Set the <code>"context"</code> option to change the color (and semantic context) of the panel.
Available contexts are <code>"default"</code> (default), <code>"primary"</code>, <code>"success"</code>, <code>"info"</code>, <code>"warning"</code> and <code>"danger"</code>.', 'php_code' => "echo BootHelp::panel('You accepted the Terms of service.', ['title'=>'Thanks', 'context'=>'success']);", 'result' => BootHelp::panel('You accepted the Terms of service.', ['title' => 'Thanks', 'context' => 'success']), 'html_code' => '<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Thanks</h3>
</div>
<div class="panel-body">You accepted the Terms of service.</div>
</div>'], ['name' => 'Panels with custom tag', 'description' => 'Set the <code>tag</code> option to use a different HTML tag to wrap the panel.', 'php_code' => "echo BootHelp::panel('You accepted the Terms of service.', ['tag'=>'aside']);", 'result' => BootHelp::panel('You accepted the Terms of service.', ['tag' => 'aside']), 'html_code' => '<aside class="panel panel-default">
<div class="panel-body">You accepted the Terms of service.</div>
</aside>'], ['name' => 'Complex panels', 'description' => 'To include HTML tags or a long text in the panel, pass your content in a block.
You can also specify custom options which will be added to the alert’s <code>div</code> tag.', 'php_code' => "echo BootHelp::panel(['heading'=>'Thanks', 'context'=>'info', 'id'=>'panel', 'class'=>'en', 'data-js'=>1], function(){\n return 'You accepted the Terms of service. ' . BootHelp::icon('ok');\n});", 'result' => BootHelp::panel(['heading' => 'Thanks', 'context' => 'info', 'id' => 'panel', 'class' => 'en', 'data-js' => 1], function () {
return 'You accepted the Terms of service. ' . BootHelp::icon('ok');
}), 'html_code' => '<div data-js="1" class="en panel panel-info" id="panel">
<div class="panel-heading">Thanks</div>
<div class="panel-body">
You accepted the Terms of service.
<span class="glyphicon glyphicon-ok"></span>
</div>
</div>']]];
/**
* Panel samples.
*/
echo new Sample($panels);
<code>"size"</code> option.', 'php_code' => "echo BootHelp::button_group(['size'=>'large'], function(){\n return [\n BootHelp::button('Button 1'),\n BootHelp::button('Button 2'),\n BootHelp::button('Button 3')\n ];\n});", 'result' => BootHelp::button_group(['size' => 'large'], function () {
return [BootHelp::button('Button 1'), BootHelp::button('Button 2'), BootHelp::button('Button 3')];
}), 'html_code' => '<div role="group" aria-label="button-group" class="btn-group btn-group-lg">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
<button class="btn btn-default">Button 3</button>
</div>'], ['name' => 'Vertical variation', 'description' => 'Make a set of buttons appear vertically stacked rather than horizontally using
<code>["vertical"=>true]</code> option.', 'php_code' => "echo BootHelp::button_group(['vertical'=>true], function(){\n return [\n BootHelp::button('Button 1'),\n BootHelp::button('Button 2'),\n BootHelp::button('Button 3')\n ];\n});", 'result' => BootHelp::button_group(['vertical' => true], function () {
return [BootHelp::button('Button 1'), BootHelp::button('Button 2'), BootHelp::button('Button 3')];
}), 'html_code' => '<div role="group" aria-label="button-group" class="btn-group-vertical">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
<button class="btn btn-default">Button 3</button>
</div>'], ['name' => 'Justified Button Group', 'description' => 'Make a group of buttons stretch at equal sizes to span the entire width of its parent
using <code>["justified"=>true]</code> option.', 'php_code' => "echo BootHelp::button_group(['justified'=>true], function(){\n return [\n BootHelp::button('Button 1'),\n BootHelp::button('Button 2'),\n BootHelp::button('Button 3')\n ];\n});", 'result' => BootHelp::button_group(['justified' => true], function () {
return [BootHelp::button('Button 1'), BootHelp::button('Button 2'), BootHelp::button('Button 3')];
}), 'html_code' => '<div role="group" aria-label="button-group" class="btn-group btn-group-justified">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
<button class="btn btn-default">Button 3</button>
</div>'], ['name' => 'Complex Button Group', 'description' => 'You can specify additional options wich will be used for the button group <code>div</code>.', 'php_code' => "echo BootHelp::button_group(['id'=>'my-button-group', 'class'=>'en'], function(){\n return [\n BootHelp::button('Button 1'),\n BootHelp::button('Button 2'),\n BootHelp::button('Button 3')\n ];\n});", 'result' => BootHelp::button_group(['id' => 'my-button-group', 'class' => 'en'], function () {
return [BootHelp::button('Button 1'), BootHelp::button('Button 2'), BootHelp::button('Button 3')];
}), 'html_code' => '<div id="my-button-group" role="group" aria-label="button-group" class="en btn-group">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
<button class="btn btn-default">Button 3</button>
</div>']]];
/**
* ButtonGroup samples.
*/
echo new Sample($button_groups);
return [BootHelp::link_to('Home'), BootHelp::link_to('Users'), BootHelp::link_to('Profile')];
}), 'html_code' => '<div class="dropdown">
<button class="btn btn-default" type="button">Menu</button>
<button data-toggle="dropdown" id="label-dropdown-6883494473" type="button" class="dropdown-toggle btn btn-default">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul aria-labelledby="label-dropdown-6883494473" role="menu" class="dropdown-menu">
<li><a href="#" role="menuitem">Home</a></li>
<li><a href="#" role="menuitem">Users</a></li>
<li><a href="#" role="menuitem">Profile</a></li>
</ul>
</div>'], ['name' => 'Complex dropdowns', 'description' => 'To include HTML tags or a long text in the dropdown, pass your content in a closure.
You can specify a custom <code>id</code> which will be added to the dropdown’s <code>ul</code> tag.
You can also specify a custom <code>["button"=> "class"]</code> which will be added to the toggle <code>button</code> tag.', 'php_code' => "echo BootHelp::dropdown('Menu', ['split'=>true, 'id'=>'dropdown', 'button'=>['class'=>'en']], function(){\n return [\n BootHelp::link_to('Home'),\n BootHelp::link_to(BootHelp::content_tag('em', 'Profile'))\n ];\n});", 'result' => BootHelp::dropdown('Menu', ['split' => true, 'id' => 'dropdown', 'button' => ['class' => 'en']], function () {
return [BootHelp::link_to('Home'), BootHelp::link_to(BootHelp::content_tag('em', 'Profile'))];
}), 'html_code' => '<div class="dropdown">
<button class="en btn btn-default" type="button">Menu</button>
<button data-toggle="dropdown" id="dropdown" type="button" class="dropdown-toggle en btn btn-default">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul aria-labelledby="dropdown" role="menu" class="dropdown-menu">
<li><a href="#" role="menuitem">Home</a></li>
<li><a href="#" role="menuitem"><em>Profile</em></a></li>
</ul>
</div>']]];
/**
* Dropdowns samples.
*/
echo new Sample($dropdowns);
* (The MIT License)
*
* Copyright (c) 2015 Jorge Cobis <jcobis@gmail.com / http://twitter.com/cobisja>.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
use cobisja\BootHelp\BootHelp;
use cobisja\BootHelp\Guide\Sample;
$images = ['title' => 'Images', 'samples' => [['name' => 'Basic images', 'description' => 'Use <code>image</code> without any extra options to display a simple image.', 'php_code' => "echo BootHelp::image(['src'=>'pic3.jpg']);", 'result' => BootHelp::image(['src' => 'Guide/img/pic3.jpg']), 'html_code' => '<img alt="pic3" src="pic3.jpg">'], ['name' => 'Responsive images', 'description' => 'Image can be made responsive using <code>["responsive"=>true]</code> option.', 'php_code' => "echo BootHelp::image(['src'=>'pic3.jpg', 'responsive'=>true]);", 'result' => BootHelp::image(['src' => 'Guide/img/pic3.jpg', 'responsive' => true]), 'html_code' => '<img class="img-responsive" alt="pic3" src="pic3.jpg">'], ['name' => 'Image shapes', 'description' => 'Image can be easily styled using <code>shape</code> option. Available shapes values are
<code>rounded</code>, <code>circle</code> and <code>thumbnail</code>.', 'php_code' => "echo BootHelp::image(['src'=>'pic3.jpg', 'shape'=>'circle']);", 'result' => BootHelp::image(['src' => 'Guide/img/pic3.jpg', 'shape' => 'circle']), 'html_code' => '<img class="img-circle" alt="pic3" src="pic3.jpg">'], ['name' => 'Additional attributes and complex content', 'description' => 'You can pass additional attributes to the <code>img</code> tag using options array.
Also, if you need to build a complex image content, do it using a closure.', 'php_code' => "echo BootHelp::image(['src'=>'pic3.jpg', 'id'=>'my-image', 'class'=>'en', 'shape'=>'thumbnail']);", 'result' => BootHelp::image(['src' => 'Guide/img/pic3.jpg', 'id' => 'my-image', 'class' => 'en', 'shape' => 'thumbnail']), 'html_code' => '<img alt="pic3" class="en img-thumbnail" id="my-image" src="pic3.jpg">']]];
/**
* Images samples.
*/
echo new Sample($images);
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
use cobisja\BootHelp\BootHelp;
use cobisja\BootHelp\Guide\Sample;
$badges = ['title' => 'Badges', 'samples' => [['name' => 'Basic badge', 'description' => 'Use <code>badge</code> without options to display a badge component useful to highlight new or unread items.', 'php_code' => "echo BootHelp::link_to(function(){\n return [\n 'Inbox ',\n BootHelp::badge('42')\n ];\n});", 'result' => BootHelp::link_to(function () {
return ['Inbox ', BootHelp::badge('42')];
}), 'html_code' => '<a href="#">Inbox <span class="badge">42</span></a>'], ['name' => 'Additional options to badges', 'description' => 'You can pass an array with the attributes for the <code>span</code> tag that defines the
<code>badge</code> component, achieving additional customization.', 'php_code' => "echo BootHelp::link_to(function(){\n return [\n 'Inbox ',\n BootHelp::badge('42', ['id'=>'my-badge', 'class'=>'en'])\n ];\n});", 'result' => BootHelp::link_to(function () {
return ['Inbox ', BootHelp::badge('42', ['id' => 'my-badge', 'class' => 'en'])];
}), 'html_code' => '<a href="#">Inbox <span id="my-badge" class="en badge">42</span></a>'], ['name' => 'Implicit support for badges', 'description' => 'All <code>BootHelp</code> components have implicit support for <code>badges</code>, so you don\'t
have to build a Badge component by hand. To get <code>badge</code> support, just pass <code>["badge"=>value]</code> and
BootHelp take care to create it!.', 'php_code' => "echo BootHelp::link_to('Inbox', ['badge'=>42]);", 'result' => BootHelp::link_to('Inbox', ['badge' => 42]), 'html_code' => '<a href="#">Inbox <span class="badge">42</span></a>']]];
/**
* Badge samples.
*/
echo new Sample($badges);
*
* (The MIT License)
*
* Copyright (c) 2015 Jorge Cobis <jcobis@gmail.com / http://twitter.com/cobisja>.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
use cobisja\BootHelp\BootHelp;
use cobisja\BootHelp\Guide\Sample;
$icons = ['title' => 'Icons', 'samples' => [['name' => 'Basic example', 'description' => 'Use <code>icon</code> without options to display any of the <a href="http://getbootstrap.com/components/#icons">200 glyphicons</a> available in Bootstrap.', 'php_code' => "BootHelp::icon('user');", 'result' => BootHelp::icon('user'), 'html_code' => '<span class="glyphicon glyphicon-user"></span>'], ['name' => 'Font awesome example', 'description' => 'Use <code>icon</code> with the <code>["library"=> "font_awesome"]</code> option to display any of the <a href="http://fortawesome.github.io/Font-Awesome/icons">479 icons</a> available in Font Awesome.
You can also specify custom options which will be added to the alert’s <code>span</code> tag.', 'php_code' => "BootHelp::icon('user', ['library'=>'font_awesome', 'class'=>'fa-2x', 'id'=>'icon', 'data-value'=>1]);", 'result' => BootHelp::icon('user', ['library' => 'font_awesome', 'class' => 'fa-2x', 'id' => 'icon', 'data-value' => 1]), 'html_code' => '<span data-value="1" id="icon" class="fa-2x fa fa-user"></span>']]];
/**
* Icon samples.
*/
echo new Sample($icons);
</ul>
</li>
</ul>
</div>
<ul class="nav navbar-nav">
<li><a href="#">About us</a></li>
</ul>
</div>
</div>
</nav>'], ['name' => 'Complex nabvars', 'description' => 'You can specify a custom <code>id</code> which will be used for the navbar’s collapsable <code>div</code>.
You can also specify custom options in the <code>vertical</code> and <code>horizontal</code> helpers which will be added to their <code>div</code> tags. ', 'php_code' => "echo BootHelp::navbar(['id'=>'navbar'], function(){\n return [\n BootHelp::vertical(['id'=>'vertical', 'class'=>'en', 'data-js'=>1], function(){\n return BootHelp::link_to('Home');\n }),\n BootHelp::horizontal(['class'=>'en', 'data-js'=>2], function(){\n return BootHelp::nav(['class'=>'navbar-left'], function(){\n return\n BootHelp::link_to('Profile') .\n BootHelp::link_to('Settings');\n });\n })\n ];\n});", 'result' => BootHelp::navbar(['id' => 'navbar'], function () {
return [BootHelp::vertical(['id' => 'vertical', 'class' => 'en', 'data-js' => 1], function () {
return BootHelp::link_to('Home');
}), BootHelp::horizontal(['class' => 'en', 'data-js' => 2], function () {
return BootHelp::nav(['class' => 'navbar-left'], function () {
return BootHelp::link_to('Profile') . BootHelp::link_to('Settings');
});
})];
}), 'html_code' => '<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div data-js="1" class="en navbar-header" id="vertical">
<button data-target="#navbar" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Home</a>
</div>
<div id="navbar" data-js="2" class="en collapse navbar-collapse">
<ul class="navbar-left nav navbar-nav">
return BootHelp::content_tag('div', ['class' => 'caption'], function () {
return [BootHelp::content_tag('h3', 'Thumbnail label'), BootHelp::content_tag('p', 'Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh
ultricies vehicula ut id elit.'), BootHelp::button('Button', ['context' => 'primary']), BootHelp::button('Button')];
});
}), BootHelp::thumbnail(['column_class' => 'col-sm-6 col-md-4', 'src' => 'Guide/img/pic3.jpg', 'href' => 'http://pixabay.com/'], function () {
return BootHelp::content_tag('div', ['class' => 'caption'], function () {
return [BootHelp::content_tag('h3', 'Thumbnail label'), BootHelp::content_tag('p', 'Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh
ultricies vehicula ut id elit.'), BootHelp::button('Button', ['context' => 'primary']), BootHelp::button('Button')];
});
}), BootHelp::thumbnail(['column_class' => 'col-sm-6 col-md-4', 'src' => 'Guide/img/pic4.jpg', 'href' => 'http://pixabay.com/'], function () {
return BootHelp::content_tag('div', ['class' => 'caption'], function () {
return [BootHelp::content_tag('h3', 'Thumbnail label'), BootHelp::content_tag('p', 'Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh
ultricies vehicula ut id elit.'), BootHelp::button('Button', ['context' => 'primary']), BootHelp::button('Button')];
});
})];
}), 'html_code' => '<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img alt="pic1" src="pic1.jpg">
<div class="caption">
<h3>Thumbnail label</h3>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh
ultricies vehicula ut id elit.
</p>
<button class="btn btn-primary">Button</button>
<button class="btn btn-default">Button</button>
echo BootHelp::content_tag('h1', 'Overview', ['id' => 'overview', 'class' => 'page-header']);
echo BootHelp::content_tag('p', function () {
return "Nowadays Bootstrap is a great framework commonly used by a lot of web designers and web developers to " . " build web sites with a \"fresh looking\" using its HTML and CSS based design templates " . "for typography, forms, buttons, navigation, and other interface components, as well " . "JavaScript extensions.";
});
echo BootHelp::content_tag('p', function () {
return 'However, to get all of its powerful resources, usually you have to write a lot of HTML code, no matters if ' . 'you want to use a simple component, like <a href="http://getbootstrap.com/components/#modal">Modal</a> for instance.';
});
echo BootHelp::content_tag('p', function () {
return "<code>BootHelp</code> (<strong>Boot</strong>strap <strong>Help</strong>ers) is a set of " . "classes that allow you to get all the power of Bootstrap's components with no need " . "to write any HTML code (or at least a minimun amount of it).";
});
echo BootHelp::content_tag('p', function () {
return "You have 2 ways to use BootHelp: Using <code>BootHelp</code> abstract class and then call any of its methods. " . "The other way is to get an instance of the component you want and then echo it.";
});
echo BootHelp::content_tag('h4', ['class' => 'subtitle'], function () {
return "Method 1 - Using BootHelp abstract class:";
});
echo BootHelp::content_tag('div', ['class' => 'bs-example'], function () {
return '<pre><code data-lang="php">' . htmlentities("<?php\nuse BootHelp;\n\n// Let's create a Modal component.\necho BootHelp::modal('How easy is to use BootHelp!!!');\n\n...\n") . '</code></pre>';
});
echo BootHelp::content_tag('h4', ['class' => 'subtitle'], function () {
return "Method 2 - Using directly the component class:";
});
echo BootHelp::content_tag('div', ['class' => 'bs-example'], function () {
return '<pre><code data-lang="php">' . htmlentities("<?php\nuse BootHelp\\Modal;\n\n// Let's create a Modal component.\necho new Modal('How easy is to use BootHelp!!!');\n\n...\n") . '</code></pre>';
});
echo BootHelp::content_tag('p', function () {
return "<code>BootHelp</code> creates all HTML code required!!!. :-D";
});
echo BootHelp::content_tag('p', function () {
return "Now let's review some examples of using <code>BootHelp</code>. " . "(Actually this page has been built using <code>BootHelp</code> class :-P)";
});
