*
* 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;
$dropdowns = ['title' => 'Dropdowns', 'samples' => [['name' => 'Basic dropdowns', 'description' => 'Use <code>dropdown</code> without options to display a button with the given caption and the included links in a dropdown menu.', 'php_code' => "echo BootHelp::dropdown('Menu', function(){\n return [\n BootHelp::link_to('Home'),\n BootHelp::link_to('Users'),\n BootHelp::divider(),\n BootHelp::link_to('Profile')\n ];\n});", 'result' => BootHelp::dropdown('Menu', function () {
return [BootHelp::link_to('Home'), BootHelp::link_to('Users'), BootHelp::divider(), BootHelp::link_to('Profile')];
}), 'html_code' => '<div class="dropdown">
<button data-toggle="dropdown" id="label-dropdown-8291654764" type="button" class="dropdown-toggle btn btn-default">
Menu
<span class="caret"></span>
</button>
<ul aria-labelledby="label-dropdown-8291654764" role="menu" class="dropdown-menu">
<li><a href="#" role="menuitem">Home</a></li>
<li><a href="#" role="menuitem">Users</a></li>
<li class="divider"></li>
<li><a href="#" role="menuitem">Profile</a></li>
</ul>
</div>'], ['name' => 'Right-aligned dropdowns', 'description' => 'Use <code>dropdown</code> with the <code>["align"=> "right"]</code> option to align the dropdown to the rightmost side of the button.', 'php_code' => "BootHelp::dropdown('Menu', ['align'=>'right'], function(){\n return [\n BootHelp::link_to('Home'),\n BootHelp::link_to('Users'),\n BootHelp::link_to('Profile')\n ];\n});", 'result' => BootHelp::dropdown('Menu', ['align' => 'right'], function () {
return [BootHelp::link_to('Home'), BootHelp::link_to('Users'), BootHelp::link_to('Profile')];
}), 'html_code' => '<div class="btn-group dropdown">
<button data-toggle="dropdown" id="label-dropdown-894474825" type="button" class="dropdown-toggle btn btn-default">
<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>
</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(){\n return [\n BootHelp::link_to('The walking dead'),\n BootHelp::link_to('Scorpion'),\n BootHelp::divider(),\n BootHelp::link_to('Old series')\n ];\n});\necho BootHelp::navbar(function() use (\$sub_menu) {\n return [\n BootHelp::vertical(function(){\n return BootHelp::link_to('Home');\n }),\n BootHelp::horizontal(function() use (\$sub_menu) {\n return [\n BootHelp::nav(function(){return BootHelp::link_to('Users');}),\n \$sub_menu,\n BootHelp::nav(function(){return BootHelp::link_to('About us');})\n ];\n })\n ];\n});", '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>
