PHP Classes
elePHPant
Icontem

File: Guide/nav.php

Recommend this page to a friend!
  Classes of Jorge Cobis  >  PHP Bootstrap Helpers  >  Guide/nav.php  >  Download  
File: Guide/nav.php
Role: Example script
Content type: text/plain
Description: Example script
Class: PHP Bootstrap Helpers
Generate HTML pages programatically with Bootstrap
Author: By
Last change: Badge support added
Date: 4 years ago
Size: 11,400 bytes
 

 

Contents

Class file image Download
<?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\Helpers\LinkTo;
use cobisja\BootHelp\Guide\Sample;

// Change $href to match your BootHelp app root path.
$href = 'http://localhost/local_php/BootHelp/index.php';

$navs = [
    'title'=>'Navs',
    'samples'=>[
        [
            'name'=> 'Basic navs',
            'description'=>'Use <code>nav</code> without options to display the included links as a row of tabs.
Note that links are automatically wrapped in <code>li</code> tags if you use the helper <code>link_to</code> or class <code>LinkTo</code>.
Additionally, if any link matches the current URL, its <code>li</code> tag automatically gets the <code>active</code> class.',
            'php_code'=> "echo BootHelp::nav(function(){
    return [
        new LinkTo('Home', ['href'=>'/']),
        new LinkTo('Users'),
        new LinkTo('Profile')
    ];
});",
            'result'=> BootHelp::nav(function() use ($href) {
    return [
        new LinkTo('Home', ['href'=>$href]),
        new LinkTo('Users', ['href'=>'/users']),
        new LinkTo('Profile', ['href'=>'/profile'])
    ];
}),
            'html_code'=>'<ul class="nav nav-tabs">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="#">Users</a></li>
    <li><a href="#">Profile</a></li>
</ul>'
        ],
        [
            'name'=> 'Navs with disable links',
            'description'=>'Use the <code>["disabled"=> true]</code> option to make tab disabled.',
            'php_code'=> "echo BootHelp::nav(function(){
    return [
        new LinkTo('Home', ['href'=>'/']),
        new LinkTo('Users'),
        new LinkTo('Profile', ['disabled'=>true])
    ];
});",
            'result'=> BootHelp::nav(function() use ($href) {
    return [
        new LinkTo('Home', ['href'=>$href]),
        new LinkTo('Users'),
        new LinkTo('Profile', ['disabled'=>true])
    ];
}),
            'html_code'=>'<ul class="nav nav-tabs">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="#">Users</a></li>
    <li class="disabled"><a href="#">Profile</a></li>
</ul>'
        ],
        [
            'name'=> 'Navs with justified tabs',
            'description'=>'Use the <code>["layout"=> "justified"]</code> option to make tabs occupy the entire width of their parent.',
            'php_code'=> "echo BootHelp::nav(['layout'=>'justified'], function(){
    return [
        new LinkTo('Home', ['href'=>'/']),
        new LinkTo('Users'),
        new LinkTo('Profile')
    ];
});",
            'result'=> BootHelp::nav(['layout'=>'justified'], function() use ($href) {
    return [
        new LinkTo('Home', ['href'=>$href]),
        new LinkTo('Users'),
        new LinkTo('Profile')
    ];
}),
            'html_code'=>'<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="#">Users</a></li>
    <li><a href="#">Profile</a></li>
</ul>'
        ],
        [
            'name'=> 'Navs with pills',
            'description'=>'Use the <code>["as"=> "pills"]</code> option to make tabs look like pills.',
            'php_code'=> "echo BootHelp::nav(['as'=>'pills'], function(){
    return [
        new LinkTo('Home', ['href'=>'/']),
        new LinkTo('Users'),
        new LinkTo('Profile')
    ];
});",
            'result'=> BootHelp::nav(['as'=>'pills'], function() use ($href) {
    return [
        new LinkTo('Home', ['href'=>$href]),
        new LinkTo('Users'),
        new LinkTo('Profile')
    ];
}),
            'html_code'=>'<ul class="nav nav-pills">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="#">Users</a></li>
    <li><a href="#">Profile</a></li>
</ul>'
        ],
        [
            'name'=> 'Navs with stacked pills',
            'description'=>'Use the <code>["layout"=> "stacked"]</code> option to make pills vertically stacked.',
            'php_code'=> "echo BootHelp::nav(['as'=>'pills', 'layout'=>'stacked'], function(){
    return [
        new LinkTo('Home', ['href'=>'/']),
        new LinkTo('Users'),
        new LinkTo('Profile')
    ];
});",
            'result'=> BootHelp::nav(['as'=>'pills', 'layout'=>'stacked'], function() use ($href) {
    return [
        new LinkTo('Home', ['href'=>$href]),
        new LinkTo('Users'),
        new LinkTo('Profile')
    ];
}),
            'html_code'=>'<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="#">Users</a></li>
    <li><a href="#">Profile</a></li>
</ul>'
        ],
        [
            'name'=> 'Navs with badge support',
            'description'=>'Use <code>["badge"=>value]</code> with any of nav items option to display a badge.',
            'php_code'=> "echo BootHelp::nav(['as'=>'pills'], function(){
    return [
        BootHelp::link_to('Home', ['href'=>'/', 'badge'=>42]),
        BootHelp::link_to('Profile'),
        BootHelp::link_to('Messages', ['badge'=>3])
    ];
});",
            'result'=> BootHelp::nav(['as'=>'pills'], function() use ($href) {
    return [
        BootHelp::link_to('Home', ['href'=>$href, 'badge'=>42]),
        BootHelp::link_to('Profile'),
        BootHelp::link_to('Messages', ['badge'=>3])
    ];
}),
            'html_code'=>'<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="#">Users</a></li>
    <li><a href="#">Profile</a></li>
</ul>'
        ],        
        [
            'name'=> 'Navs with Dropdowns - Option 1',
            'description'=>'Dropdowns into Navs 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 Nav just define the dropdown
    as any other Nav item.',
            'php_code'=> "echo BootHelp::nav(function(){
    return [
        new LinkTo('Home', ['href'=>'/']),
        Boothelp::dropdown('Social networks', function(){
            return [
                BootHelp::link_to('Twitter'),
                BootHelp::link_to('Facebook'),
                BootHelp::divider(),
                BootHelp::link_to('Other')
            ];
        }),
        new LinkTo('Profile')
    ];
});",
            '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>
</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(){
    return [
        BootHelp::link_to('Twitter'),
        BootHelp::link_to('Facebook'),
        BootHelp::divider(),
        BootHelp::link_to('Others')
    ];
});
echo BootHelp::nav(function() use (\$sub_menu) {
    return [
        new LinkTo('Home', ['href'=>'/']),
        \$sub_menu
        new LinkTo('Profile')
    ];
});",
            '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>
</ul>'
        ],
        [
            'name'=> 'Complex navs',
            'description'=>'To include HTML tags or a long text in the nav, pass your content in a block.
You can also specify custom options which will be added to the nav’s <code>ul</code> tag.',
            'php_code'=> "echo BootHelp::nav(['as'=>'pills', 'id'=>'nav', 'class'=>'en', 'data-js'=>1], function(){
    return [
        new LinkTo('Home', ['href'=>'/']),
        new LinkTo('Users'),
        new LinkTo('Profile')
    ];
});",
            'result'=> BootHelp::nav(['as'=>'pills', 'id'=>'nav', 'class'=>'en', 'data-js'=>1], function() use ($href) {
    return [
        new LinkTo('Home', ['href'=>$href]),
        new LinkTo('Users'),
        new LinkTo('Profile')
    ];
}),
            'html_code'=>'<ul data-js="1" class="en nav nav-pills" id="nav">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="#">Users</a></li>
    <li><a href="#">Profile</a></li>
</ul>'
        ]
    ]
];

/**
 * Nav samples.
 */
echo new Sample($navs);