README

此包为Laravel应用程序生成导航栏。该包还提供内置的HTML导航UI，它还允许您构建自己的自定义导航UI。

示例与用法

$navitems = Nav::make()
    ->add('Home', route('home'), ['icon' => 'fa fa-home'])
    ->header('Adminland', function (Nav $nav) {
        $nav
            ->add('Roles', route('role-list'), ['icon' => 'fa fa-user-tag'])
            ->add('Users', route('system-user-list'), ['icon' => 'fa fa-users']);
    })
    ->header('Employee Management', function (Nav $nav) {
        $nav
            ->add('Employee', '#', ['icon' => 'fa fa-user'], function (Children $children) {
                $children
                    ->add('List', route('employee-list'), ['icon' => 'fa fa-list'])
                    ->add('Create', route('create-employee'), ['icon' => 'fa fa-plus-circle']);
            })
            ->add('Transfer', '#', ['icon' => 'fa fa-money-check-alt'], function (Children $children) {
                $children
                    ->add('List', route('transfer-list'), ['icon' => 'fa fa-list'])
                    ->add('Create', route('create-transfer'), ['icon' => 'fa fa-plus-circle']);
            });
    })
    ->render(); // array of nav items

$navbar = Navbar::navs($navitems)->render(); // navbar html

注意：您可以在视图组合器中生成导航栏

视图组合器中的导航栏示例

use RadiateCode\LaravelNavbar\Nav;
use RadiateCode\LaravelNavbar\Children;
use RadiateCode\LaravelNavbar\Facades\Navbar;

class ViewServiceProvider extends ServiceProvider
{

    public function boot()
    {
        View::composer('layouts.partials._left_nav',function(View $view){
            $navitems = Nav::make()
                ->addIf(condition: true, 'Roles', route('role-list'), ['icon' => 'fa fa-user-tag'])
                ->add('Users', route('system-user-list'), ['icon' => 'fa fa-users'])
                ->add('Employee', '#', ['icon' => 'fa fa-user'], function (Children $children) {
                    $children
                        ->addif(condition: true, 'List', route('employee-list'), ['icon' => 'fa fa-list'])
                        ->addif(condition: false, 'Create', route('create-employee'), ['icon' => 'fa fa-plus-circle']);
                })
                ->render(); // array of nav items

                // Navbar UI builder
                $navbar = Navbar::navs($navitems)); 

                // Now attach the $navbar to your view.
                $view->with('navbar', $navbar->render();
        });

        // Or you can use `class based view composer`. place the Navbar generator code inside the compose().
        View::composer('layouts.partials._left_nav', NavComposer::class);
    }

}

在_left_nav部分

<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Sidebar -->
    <div class="sidebar">
        <!-- Sidebar Menu -->
        {!! $navbar !!}
        <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
</aside>

输出

要求

PHP >= 7.1
Laravel 5.7|6.x|7.x|8.x|9.x
JQuery [可选，用于自定义导航栏UI样式]
Bootstrap [可选，用于自定义导航栏UI样式]

安装

您可以通过composer安装此包

composer require radiatecode/laravel-navbar

发布配置文件（可选）

php artisan vendor:publish --provider="RadiateCode\LaravelNavbar\NavbarServiceProvider" --tag="navbar-config"

用法

导航可用方法

1. 标题：用于分组某些导航项

语法

header(string $name, Closure $closure, array $attributes = [])：第一个参数是标题名称，第二个参数是添加标题下导航项的闭包，第三个参数是任何额外属性（例如：图标，类等）

// example
Nav::make()
->header('Adminland', function (Nav $nav) {
    // add nav items under the Adminland header
})

2. 添加：添加导航项

语法

add(string $title, string $url, ?array $attributes = null, ?callable $children = null)：第一个参数是导航项名称，第二个参数是导航URL，第三个参数是任何额外属性（例如：导航图标，类），第四个参数是如果您想添加子导航项。

//Example 1
$navitems = Nav::make()
            ->add('Roles', route('role-list'), ['icon' => 'fa fa-user-tag'])
            ->add('Users', route('user-list'), ['icon' => 'fa fa-users'])
            ->render();

// Example 2: with header
$navitems = Nav::make()
        ->header('Adminland', function (Nav $nav) {
            $nav
                ->add('Roles', route('role-list'), ['icon' => 'fa fa-user-tag'])
                ->add('Users', route('system-user-list'), ['icon' => 'fa fa-users'])
                ->add('Settings', route('system-settings'), ['icon' => 'fa fa-wrench'])
        })
        ->render();

3. 添加 If：条件性添加导航

语法

addIf($condition, string $title, string $url, array $attributes = [], ?callable $configure = null)：第一个参数是条件布尔值或闭包返回布尔值，第二个参数是导航名称，第三个参数是导航URL，第四个参数是额外属性，第五个参数是添加子导航的闭包。

//Example 1
$navitems = Nav::make()
        ->addIf(true, 'Roles', route('role-list'), ['icon' => 'fa fa-user-tag'])
        ->addIf(false, 'Users', route('user-list'), ['icon' => 'fa fa-users'])
        ->render();

//Example 2: with header
        $navitems = Nav::make()
        ->header('Adminland', function (Nav $nav) {
            $nav
                ->addIf(true, 'Roles', route('role-list'), ['icon' => 'fa fa-user-tag'])
                ->addIf(false, 'Users', route('system-user-list'), ['icon' => 'fa fa-users'])
                ->addIf(true, 'Settings', route('system-settings'), ['icon' => 'fa fa-wrench'])
        })
        ->render();

4. 子导航：您可以添加子导航

您已经注意到了我们如何添加子导航。我们还可以条件性地添加子导航

// Example
$navitems = Nav::make()
->header('Employee Management', function (Nav $nav) {
    $nav
        ->add('Employee', '#', ['icon' => 'fa fa-user'], function (Children $children) {
            $children
                ->add('List', route('employee-list'), ['icon' => 'fa fa-list'])
                ->add('Create', route('create-employee'), ['icon' => 'fa fa-plus-circle']);
        })
        ->add('Transfer', '#', ['icon' => 'fa fa-money-check-alt'], function (Children $children) {
            // we can also conditionally add children nav
            $children
                ->addIf(true, 'List', route('transfer-list'), ['icon' => 'fa fa-list'])
                ->addIf(true, 'Create', route('create-transfer'), ['icon' => 'fa fa-plus-circle']);
        })
})
->render();

5. 渲染：并使用渲染方法获取导航项数组

// render() result sample
[
    "home" => [
        "title" => "Home",
        "url" => "http://hrp.test/",
        "attributes" => [
            "icon" => 'fa fa-home'
        ],
        "is_active" => false,
        "type" => "menu",
        "children" => [] // no children
    ],
    "adminland" => [ // header
        "title" => "Adminland",
        "attributes" => [],
        "type" => "header",
        "nav-items" => [ // nav items under the adminland header
            'roles' => [
                "title" => "Roles",
                "url" => "http://hrp.test/role-list",
                "attributes" => [
                    "icon" => 'fa fa-user-tag'
                ],
                "is_active" => false,
                "type" => "menu",
                "children" => [] // no children
            ],
            'user' => [
                "title" => "User",
                "url" => "http://hrp.test/system-user-list",
                "attributes" => [
                    "icon" => 'fa fa-users'
                ],
                "is_active" => false,
                "type" => "menu",
                "children" => [] // no children
            ]
        ]
    ],
    "employee-management"  => [ // header
        "title" => "Employee Management",
        "attributes" => [],
        "type" => "header", 
        "nav-items" => [ // nav items under the employee managment
            'employee' => [
                "title" => "Employee", // parent nav
                "url" => "#",
                "attributes" => [
                    "icon" => 'fa fa-user'
                ],
                "is_active" => false,
                "type" => "menu",
                "children" => [ // children nav items of employee nav
                    'list' => [
                        "title" => "List",
                        "url" => "http://hrp.test/employee-list",
                        "attributes" => [
                            "icon" => 'fa fa-list'
                        ],
                        "is_active" => false,
                        "type" => "menu",
                        "children" => []
                    ],
                    'create' => [
                        "title" => "Create",
                        "url" => "http://hrp.test/create-employee",
                        "attributes" => [
                            "icon" => 'fa fa-plus-circle'
                        ],
                        "is_active" => false,
                        "type" => "menu",
                        "children" => []
                    ]
                ]
            ]
        ]
    ],
]

导航栏UI构建器

Laravel-Navbar提供了一个内置的导航栏UI构建器，这样您可以轻松地将UI与您的应用程序集成。

注意：您可以通过定义自定义的Navbar Presenter来构建自己的自定义导航栏UI。或者，您可以想出自己的方法来显示导航栏。

示例：请参阅视图组合器示例

方法

构建器的可用方法

navs(array $navItems)：生成的导航项
render()：渲染HTML

navActiveScript()：导航活动脚本，如果您想通过Js(JQuery)在前端激活当前导航项很有用。它还有另一个好处，如果您缓存生成的导航栏，此脚本将帮助您激活当前导航项，因为后端活动功能仅在缓存之前激活一次，在缓存之后始终显示相同的活动导航。因此，如果您想缓存导航栏，建议您在配置中禁用后端nav-active并使用此脚本在前端。

// Example of nav active script
$navbar = Navbar::navs($navitems); 

$view->with('navbar', $navbar->render())
     ->with('navScript',$navbar->navActiveScript());

<!-- assume you have layouts.partials._left_nav.blade.php -->

<div class="sidebar">
    <!-- Sidebar Menu -->
    {!! $navbar !!}
    <!-- /.sidebar-menu -->
</div>

<!-- Note: We assume you have @stack('js') in your template layout-->
@prepend('js')
    {!! $navScript !!}
@endprepend
<!-- ./ end Js-->

或者，您可以将它添加到您的脚本部分中

<!-- assume: you have layouts.partials._script.blade.php -->

{!! RadiateCode\LaravelNavbar\Facades\Navbar::navActiveScript(); !!}

<script>
    // other js code
</script>

导航栏表示者

导航栏展示器只是一个包含生成导航栏HTML功能的类。在底层，导航栏构建器使用这个展示器。您可以使用自己的自定义展示器。如果您使用自定义展示器，请确保您已经在您的导航栏配置中添加它。

配置

 /**
 * Presenter for navbar style
 * 
 * [HTML presenter]
 */
'nav-presenter' => NavbarPresenter::class,

/**
 * It will set active to requested/current nav
 * 
 * [Note: if you want to set nav active by front-end (Js/Jquery) 
 * Or, if you cached your rendered navbar, then you should disable it]
 */
'enable-nav-active' => true

贡献

有关详细信息，请参阅贡献指南。

安全性

如果您发现任何与安全相关的问题，请通过电子邮件radiate126@gmail.com联系，而不是使用问题跟踪器。

鸣谢

许可证

MIT许可证（MIT）。有关更多信息，请参阅许可证文件。

radiatecode / laravel-navbar

维护者

详细信息