<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);
* 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);
*
* (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);
