<?php
/*
* BootHelp - PHP Helpers for Bootstrap
*
* (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;
$navbar = [
'title'=>'Navbars',
'samples'=>[
[
'name'=> 'Basic navbars',
'description'=>'Use <code>navbar</code> without options to display a basic navbar.
Wrap the content that should always be visible (no matter the screen size) with the <code>vertical</code> helper.
Wrap the content that should be collapsed for small screen sizes with the <code>horizontal</code> helper. Try resizing your browser!!!',
'php_code'=> "echo BootHelp::navbar(function(){
return [
BootHelp::vertical(function(){
return BootHelp::link_to('Home');
}),
BootHelp::horizontal(function(){
return BootHelp::nav(['class'=>'navbar-right'], function(){
return
BootHelp::link_to('Profile') .
BootHelp::link_to('Settings');
});
})
];
});",
'result'=> BootHelp::navbar(function(){
return [
BootHelp::vertical(function(){
return BootHelp::link_to('Home');
}),
BootHelp::horizontal(function(){
return BootHelp::nav(['class'=>'navbar-right'], function(){
return
BootHelp::link_to('Profile') .
BootHelp::link_to('Settings');
});
})
];
}),
'html_code'=>'<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button data-target="#navbar-collapse-4880904" 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-collapse-4880904" class="collapse navbar-collapse">
<ul class="navbar-right nav navbar-nav">
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
</ul>
</div>
</div>
</nav>'
],
[
'name'=> 'Navbars with inverted colors',
'description'=>'Use the <code>inverted</code> option to invert the palette of colors of the navbar.',
'php_code'=> "echo BootHelp::navbar(['inverted'=>true], function(){
return BootHelp::vertical(function(){
return BootHelp::link_to('Home');
});
});",
'result'=> BootHelp::navbar(['inverted'=>true], function(){return BootHelp::vertical(function(){return BootHelp::link_to('Home');});}),
'html_code'=>'<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button data-target="#navbar-collapse-8690626" 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'=> 'Navbars with a fluid container',
'description'=>'Use the <code>fluid</code> option for a full width navbar, spanning the entire width of your viewport.',
'php_code'=> "echo BootHelp::navbar(['fluid'=>true], function(){
return BootHelp::vertical(function(){
return BootHelp::link_to('Home');
});
});",
'result'=> BootHelp::navbar(['fluid'=>true], function(){return BootHelp::vertical(function(){return BootHelp::link_to('Home');});}),
'html_code'=>'<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button data-target="#navbar-collapse-5202644" 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'=> 'Static navbars',
'description'=>'Use the <code>["position"=> "static"]</code> option to have the navbar scroll away with the page.',
'php_code'=> "echo BootHelp::navbar(['position'=>'static'], function(){
return BootHelp::vertical(function(){
return BootHelp::link_to('Home');
});
});",
'result'=> BootHelp::navbar(['position'=>'static'], function(){return BootHelp::vertical(function(){return BootHelp::link_to('Home');});}),
'html_code'=>'<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button data-target="#navbar-collapse-4716800" 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 top',
'additional_info'=> '<p>' . BootHelp::button('Show navbar', ['class'=>'navbar-top-toggle']) . '</p>',
'description'=>'Use the <code>["position"=> "top"]</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 top of the page and the body (defaults to 70px).',
'php_code'=> "echo BootHelp::navbar(['position'=>'top'], function(){
return BootHelp::vertical(function(){
return BootHelp::link_to('Home');
});
});",
'result'=> BootHelp::navbar(['position'=>'top', 'data-navbar'=>'top'], function(){return BootHelp::vertical(function(){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(){
return BootHelp::vertical(function(){
return BootHelp::link_to('Home');
});
});",
'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>
</div>
</div>
</nav>'
],
[
'name'=> 'Navbar with Dropdowns - Option 1',
'description'=>'Dropdowns into Navbar has a different behaviour. Instead to build a Button to trigger the
the dropdown menu, a Link (<code>"a" tag</code>) is generated. So, to get a Dropdown into a Navbar just define the dropdown
as any other Navbar item.',
'php_code'=> "echo BootHelp::navbar(function() {
return [
BootHelp::vertical(function(){
return BootHelp::link_to('Home');
}),
BootHelp::horizontal(function(){
return [
BootHelp::nav(function(){return BootHelp::link_to('TV series');}),
Boothelp::dropdown('Menu', function(){
return [
BootHelp::link_to('The walking dead'),
BootHelp::link_to('Scorpion'),
BootHelp::divider(),
BootHelp::link_to('Old series')
];
}),
BootHelp::nav(function(){return BootHelp::link_to('About us');}),
];
})
];
});",
'result'=> BootHelp::navbar(function() {
return [
BootHelp::vertical(function(){
return BootHelp::link_to('Home');
}),
BootHelp::horizontal(function(){
return [
BootHelp::nav(function(){return BootHelp::link_to('Users');}),
Boothelp::dropdown('TV series', function(){
return [
BootHelp::link_to('The walking dead'),
BootHelp::link_to('Scorpion'),
BootHelp::divider(),
BootHelp::link_to('Old series')
];
}),
BootHelp::nav(function(){return BootHelp::link_to('About us');})
];
})
];
}),
'html_code'=>'<nav role="navigation" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button data-target="#navbar-collapse-1039423" 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-collapse-1039423" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Users</a></li>
</ul>
<div class="dropdown">
<ul class="nav navbar-nav">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"ç>
TV series
<span class="caret"></span>
</a>
<ul aria-labelledby="label-dropdown-2259769408" role="menu" class="dropdown-menu">
<li><a href="#" role="menuitem">The walking dead</a></li>
<li><a href="#" role="menuitem">Scorpio</a></li>
<li class="divider"></li><li><a href="#" role="menuitem">Old series</a></li>
</ul>
</li>
</ul>
</div>
<ul class="nav navbar-nav">
<li><a href="#">About us</a></li>
</ul>
</div>
</div>
</nav>'
],
[
'name'=> 'Navbar with Dropdowns - Option 2',
'description'=>'Maybe you want to build the <code>Dropdown</code> outside the <code>Navbar</code> and then
put it inside the Navbar definition, to get the Navbar code cleaner. In these cases, you have to use <code>["into_navbar"=>true]</code>
to indicates that the Dropdown is embedded the Navbar.',
'php_code'=> "\$sub_menu = Boothelp::dropdown('Social networks', ['into_navbar'=>true], function(){
return [
BootHelp::link_to('The walking dead'),
BootHelp::link_to('Scorpion'),
BootHelp::divider(),
BootHelp::link_to('Old series')
];
});
echo BootHelp::navbar(function() use (\$sub_menu) {
return [
BootHelp::vertical(function(){
return BootHelp::link_to('Home');
}),
BootHelp::horizontal(function() use (\$sub_menu) {
return [
BootHelp::nav(function(){return BootHelp::link_to('Users');}),
\$sub_menu,
BootHelp::nav(function(){return BootHelp::link_to('About us');})
];
})
];
});",
'result'=> BootHelp::navbar(function() {
return [
BootHelp::vertical(function(){
return BootHelp::link_to('Home');
}),
BootHelp::horizontal(function(){
return [
BootHelp::nav(function(){return BootHelp::link_to('Users');}),
Boothelp::dropdown('TV series', function(){
return [
BootHelp::link_to('The walking dead'),
BootHelp::link_to('Scorpion'),
BootHelp::divider(),
BootHelp::link_to('Old series')
];
}),
BootHelp::nav(function(){return BootHelp::link_to('About us');})
];
})
];
}),
'html_code'=>'<nav role="navigation" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button data-target="#navbar-collapse-1039423" 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-collapse-1039423" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Users</a></li>
</ul>
<div class="dropdown">
<ul class="nav navbar-nav">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"ç>
TV series
<span class="caret"></span>
</a>
<ul aria-labelledby="label-dropdown-2259769408" role="menu" class="dropdown-menu">
<li><a href="#" role="menuitem">The walking dead</a></li>
<li><a href="#" role="menuitem">Scorpion</a></li>
<li class="divider"></li><li><a href="#" role="menuitem">Old series</a></li>
</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(){
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');
});
})
];
});",
'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">
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
</ul>
</div>
</div>
</nav>'
]
]
];
/**
* Navbar samples.
*/
echo new Sample($navbar);
|
Download
