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