* 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);
<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' => 'Navs with Dropdowns - Option 2', 'description' => 'Maybe you want to build the <code>Dropdown</code> outside the <code>Nav</code> and then
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>
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);
* 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);
</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">
* 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;
echo BootHelp::content_tag('header', ['id' => 'top', 'role' => 'banner'], function () {
return BootHelp::navbar(['class' => 'navbar-brand', 'position' => 'top'], function () {
return BootHelp::horizontal(function () {
return BootHelp::link_to('BootHelp - PHP Helpers for Bootstrap', ['href' => '#overview']);
});
});
});
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.";
