})];
}), '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.
*/
* 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);
return BootHelp::link_to('Home');
});
}), 'html_code' => '<style>body {padding-top: 70px}</style>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button data-target="#navbar-collapse-6453944" 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>
</nav>'], ['name' => 'Navbar fixed to bottom', 'additional_info' => '<p>' . BootHelp::button('Show navbar', ['class' => 'navbar-bottom-toggle']) . '</p>', 'description' => 'Use the <code>["position"=> "bottom"]</code> option to fix the navbar at the top of the page.
Set the <code>padding</code> option to specify the padding to leave between the body and the bottom of the page (defaults to 70px).', 'php_code' => "echo BootHelp::navbar(['position'=>'bottom', 'padding'=>100], function(){\n return BootHelp::vertical(function(){\n return BootHelp::link_to('Home');\n });\n});", 'result' => BootHelp::navbar(['position' => 'bottom', 'padding' => 100, 'data-navbar' => 'bottom'], function () {
return BootHelp::vertical(function () {
return BootHelp::link_to('Home');
});
}), 'html_code' => '<style>body {padding-bottom: 100px}</style>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-header">
<button data-target="#navbar-collapse-8602652" 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>
<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::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>
