llama-laravel / menus
在 Laravel 5 中快速创建菜单
Requires
- php: >=5.6.4
- illuminate/support: >=5.3
- illuminate/view: >=5.3
This package is not auto-updated.
Last update: 2024-09-29 03:20:42 UTC
README
在 Laravel 5 中快速简单地创建菜单
文档
- 安装
- 入门指南
- 路由
- 子项
- 手动设置项的 ID
- 手动设置项的昵称
- 引用项
- 引用菜单对象
- HTML 属性
- 操作链接
- 活动项
- 插入分隔符
- 追加和前置
- 原始项
- 菜单组
- URL 前缀
- 嵌套组
- 元数据
- 过滤项
- 排序项
- 渲染方法
- 高级用法
- 配置
- 如果您需要帮助
- 许可证
安装
composer require llama-laravel/menus
现在,将 Laravel 菜单服务提供者添加到 config/app.php
中的 providers
数组。
<?php 'providers' => [ /* * Laravel Framework Service Providers... */ Illuminate\Foundation\Providers\ArtisanServiceProvider::class, Illuminate\Auth\AuthServiceProvider::class, Illuminate\Broadcasting\BroadcastServiceProvider::class, ... Llama\Menus\MenuServiceProvider::class, ... ], ?>
在 config/app.php
的末尾添加 'Menu' => 'Llama\Menus\Facades\Menu'
到 $aliases
数组
<?php 'aliases' => [ 'App' => Illuminate\Support\Facades\App::class, 'Artisan' => Illuminate\Support\Facades\Artisan::class, ... 'Menu' => Llama\Menus\Facades\Menu::class, ], ?>
这将注册包并创建一个名为 Menu
的别名。
入门指南
您可以在 laravel 中间件 中定义菜单定义。结果,每次请求击中您的应用程序时,菜单对象都将对所有视图可用。
以下是一个基本用法
<?php \Menu::macro('MyNavBar', function($menu){ $menu->push('Home'); $menu->push('About', 'about'); $menu->push('services', 'services'); $menu->push('Contact', 'contact'); }); ?>
注意 $MyNavBar
是我在这些示例中使用的假设名称;您可以将菜单命名为您想要的任何名称。
在上面的示例中,\Menu::macro()
创建了一个名为 MyNavBar
的菜单,将菜单实例添加到 \Menu::collection
,最终使 $myNavBar
对象在整个应用程序的视图中可用。
此方法接受一个可调用的函数,您可以在其中定义您的菜单项。 add
方法定义一个新项。它接受两个参数,第一个是项标题,第二个是选项。
选项 可以是一个简单的表示 URL 的字符串,也可以是一个包含选项和 HTML 属性的关联数组,我们将在下面讨论。
要在视图中渲染菜单
llama-laravel/menus
提供了三种开箱即用的渲染方法。但是,您可以使用正确的方法和属性创建自己的渲染方法。
如前所述,llama-laravel/menus
提供了三种开箱即用的渲染格式,asUl()
、asOl()
和 asDiv()
。您可以在 这里 了解详细信息。
{!! $MyNavBar->asUl() !!}
您也可以通过菜单集合访问菜单对象
{!! \Menu::get('MyNavBar')->asUl() !!}
这将按如下方式渲染您的菜单
<ul> <li><a href="http://yourdomain.com">Home</a></li> <li><a href="http://yourdomain.com/about">About</a></li> <li><a href="http://yourdomain.com/services">Services</a></li> <li><a href="http://yourdomain.com/contact">Contact</a></li> </ul>
这就是全部内容!
路由
URLs
您可以通过将 URL 作为 add
方法的第二个参数传递来简单地分配一个 URL 给菜单项
<?php // ... $menu->push('About Us', 'about-us'); // ...
命名路由
llama-laravel/menus
也支持命名路由
这次我们不是向 push()
方法传递一个简单的字符串,而是传递一个包含键 route
和一个命名路由值的关联数组
<?php // Suppose we have these routes defined in our app/routes.php file //... Route::get('/', ['as' => 'home.page', function(){...}]); Route::get('about', ['as' => 'page.about', function(){...}]); //... // Now we make the menu: \Menu::macro('MyNavBar', function($menu){ $menu->push('Home', route('home.page')); $menu->push('About', route('page.about')); // ... }); ?>
控制器操作
Laravel 菜单支持控制器动作。
你只需将你的选项数组中的 action
键设置为你想要执行的控制器动作。
<?php // Suppose we have these routes defined in our app/Http/routes.php file // ... Route::get('services', 'ServiceController@index'); //... // ... $menu->push('services', action('ServicesController@index')); // ... ?>
注意:如果你需要将数据作为查询字符串发送到路由、URL或控制器动作,你可以简单地将它们包含在一个数组中,并附上路由、动作或URL值。
<?php \Menu::macro('MyNavBar', function($menu){ $menu->push('Home', route('home.page')); $menu->push('About', route('page.about', ['template' => 1])); $menu->push('services', action('ServicesController@index', ['id' => 12])); $menu->push('Contact', 'contact'); }); ?>
HTTPS
如果你需要通过HTTPS服务路由,可以在项的link
属性上调用secure()
,或者你也可以在选项数组中添加键secure
并将其设置为true
。
<?php // ... $menu->push('Members', 'members')->link->secure(); // or alternatively use the following method $menu->push('Members', ['url' => 'members', 'secure' => true]); // ... ?>
以<ul>
形式输出的内容将是:
<ul> ... <li><a href="https://yourdomain.com/members">Members</a></li> ... </ul>
子项
项也可以有子项。
<?php \Menu::macro('MyNavBar', function($menu){ //... $menu->push('About', route('page.about')); // these items will go under Item 'About' // refer to about as a property of $menu object then call `push()` on it $menu->about->push('Who We are', 'who-we-are'); // or $menu->get('about')->push('What We Do', 'what-we-do'); // or $menu->item('about')->push('Our Goals', 'our-goals'); //... }); ?>
你也可以将项定义链式化,深入到你想要的任何程度。
<?php // ... $menu->push('About', route('page.about')) ->push('Level2', 'link address') ->push('level3', 'Link address') ->push('level4', 'Link address'); // ... ?>
你可以使用parent
属性直接添加子项。
<?php //... $menu->push('About', route('page.about')); $menu->push('Level2', ['url' => 'Link address', 'parent' => $menu->about->id]); //... ?>
手动设置项的ID。
当你添加一个新项时,系统会自动为该项分配一个唯一的ID。然而,有时当你从数据库中加载菜单项时,你必须手动设置ID。为此,你可以调用项对象的id()
方法,并传递你想要的ID。
<?php // ... $menu->push('About', route('page.about')) ->id('74398247329487') // ...
或者,你可以在添加菜单项时将ID作为选项数组的一个元素传递。
<?php // ... $menu->push('About', route('page.about', ['id' => 74398247329487])); // ...
手动设置项的昵称。
当你添加一个新项时,系统会自动为该项分配一个昵称以供进一步引用。这个昵称是项标题的驼峰式形式。例如,标题为About Us
的项将具有昵称:aboutUs
。然而,有时你必须显式定义你的菜单项,因为你使用的是特殊的字符集。为此,你可以简单地使用项对象的nickname()
方法,并传递你想要的昵称。
<?php // ... $menu->push('About', route('page.about')) ->nickname('about_menu_nickname'); // And use it like you normally would $menu->item('about_menu_nickname'); // ...
或者,你可以在选项数组中传递昵称。
<?php // ... $menu->push('About', route('page.about', ['nickname' => 'about_menu_nickname'])); // And use it like you normally would $menu->item('about_menu_nickname'); // ...
引用项
你可以使用以下描述的方法在代码中访问定义好的项。
通过标题获取项
以及项的标题(驼峰式命名)。
<?php // ... $menu->itemTitleInCamelCase ... // or $menu->get('itemTitleInCamelCase') ... // or $menu->item('itemTitleInCamelCase') ... // ... ?>
例如,让我们在我们定义About us
项之后,在该项后插入一个分隔符。
<?php // ... $menu->push('About us', 'about-us') $menu->aboutUs->divide(); // or $menu->get('aboutUs')->divide(); // or $menu->item('aboutUs')->divide(); // ... ?>
如果你不熟悉上述方法,你可以将项的对象引用存储在一个变量中,以便进一步引用。
<?php // ... $about = $menu->push('About', 'about'); $about->push('Who We Are', 'who-we-are'); $about->push('What We Do', 'what-we-do'); // ...
通过ID获取项。
如果需要,你也可以通过ID获取项。
<?php // ... $menu->find(12) ... // ... ?>
获取所有项
<?php // ... $menu->all(); // or outside of the builder context \Menu::get('MyNavBar')->all(); // ... ?>
all()
返回一个 菜单集合。
获取第一个项
<?php // ... $menu->first(); // or outside of the builder context \Menu::get('MyNavBar')->first(); // ... ?>
获取最后一个项
<?php // ... $menu->last(); // or outside of the builder context \Menu::get('MyNavBar')->last(); // ... ?>
获取项的子项。
首先,你需要使用上述描述的方法获取项,然后对其调用 children()
。
要获取About
项的子项
<?php // ... $aboutSubs = $menu->about->children(); // or outside of the builder context $aboutSubs = \Menu::get('MyNavBar')->about->children(); // Or $aboutSubs = \Menu::get('MyNavBar')->item('about')->children(); // ... ?>
children()
返回一个 菜单集合。
要检查项是否有子项,你可以使用 hasChildren()
。
<?php // ... if( $menu->about->hasChildren() ) { // Do something } // or outside of the builder context \Menu::get('MyNavBar')->about->hasChildren(); // Or \Menu::get('MyNavBar')->item('about')->hasChildren(); // ... ?>
要获取项的所有后代,你可以使用 all
。
<?php // ... $aboutSubs = $menu->about->all(); // ...
魔法 Where 方法
你也可以通过魔法查询方法搜索项集合。这些方法由一个where
与属性(对象属性或元数据)连接而成。
例如,要获取父项ID等于12的项,你可以这样做:
<?php // ... $subs = $menu->whereParent(12); // ... ?>
或者要获取具有特定元数据的项:
<?php // ... $menu->push('Home', '#')->data('color', 'red'); $menu->push('About', '#')->data('color', 'blue'); $menu->push('Services', '#')->data('color', 'red'); $menu->push('Contact', '#')->data('color', 'green'); // ... // Fetch all the items with color set to red: $reds = $menu->whereColor('red'); ?>
此方法返回一个 Laravel 集合。
如果你需要获取匹配项的后代,只需将第二个参数设置为true。
<?php $reds = $menu->whereColor('red', true);
这将给出所有具有红色颜色及其后代的项。
引用菜单实例。
你可能遇到需要在不处于构建器上下文的情况下引用菜单实例的情况。
要按名称获取特定菜单
<?php // ... $menu = \Menu::get('MyNavBar'); // ... ?>
或者获取所有菜单实例
<?php // ... $menus = \Menu::all(); // ... ?>
HTML 属性
由于所有菜单项都会以HTML实体形式渲染,如列表项或div,因此可以为每个项定义所需的所有HTML属性
<?php \Menu::macro('MyNavBar', function($menu){ // As you see, you need to pass the second parameter as an associative array: $menu->push('Home', ['url' => route('home.page'), 'class' => 'navbar navbar-home', 'id' => 'home']); $menu->push('About', ['url' => route('page.about'), 'class' => 'navbar navbar-about dropdown']); $menu->push('services', action('ServicesController@index')); $menu->push('Contact', 'contact'); }); ?>
如果我们选择HTML列表作为我们的渲染格式,例如ul
,结果将类似于以下内容
<ul> <li class="navbar navbar-home" id="home"><a href="http://yourdomain.com">Home</a></li> <li class="navbar navbar-about dropdown"><a href="http://yourdomain.com/about">About</a></li> <li><a href="http://yourdomain.com/services">Services</a></li> <li><a href="http://yourdomain.com/contact">Contact</a></li> </ul>
也可以使用attr()
方法在项定义后设置或获取HTML属性。
如果您使用一个参数调用attr()
,它将为您返回属性值。如果您使用两个参数调用它,它将考虑第一个和第二个参数作为键/值对来设置属性。您还可以传递一个包含HTML属性组的关联数组;最后,如果您不带任何参数调用它,它将返回一个包含所有属性的数组。
<?php //... $menu->push('About', ['url' => 'about', 'class' => 'about-item']); echo $menu->about->attr('class'); // output: about-item $menu->about->attr('class', 'another-class'); echo $menu->about->attr('class'); // output: about-item another-class $menu->about->attr(['class' => 'yet-another', 'id' => 'about']); echo $menu->about->attr('class'); // output: about-item another-class yet-another echo $menu->about->attr('id'); // output: id print_r($menu->about->attr()); /* Output Array ( [class] => about-item another-class yet-another [id] => id ) */ //... ?>
如果您需要针对一组项,可以使用attr
。
<?php // ... $menu->push('About', 'about'); $menu->about->push('Who we are', 'about/whoweare'); $menu->about->push('What we do', 'about/whatwedo'); // add a class to children of About $menu->about->children()->attr('class', 'about-item'); // ...
操作链接
所有HTML属性都将应用于包装标签(li、div等);您可能会遇到需要将一些HTML属性添加到<a>
标签的情况。
每个Item
实例都有一个属性,它存储了Link
对象的实例。此对象提供给您以操作<a>
标签。
与每个项一样,Link
也有一个与项的attr()
方法功能完全相同的attr()
方法。
<?php \Menu::macro('MyNavBar', function($menu){ // ... $about = $menu->push('About', ['url' => route('page.about'), 'class' => 'navbar navbar-about dropdown']); $about->link->attr(['class' => 'dropdown-toggle', 'data-toggle' => 'dropdown']); // ... }); ?>
链接的 Href 属性
如果您不想使用llama-laravel/menus
的路由功能,或者您不想让构建程序在URL前添加任何前缀(例如,您的宿主地址),您可以显式设置您的链接的href属性
<?php
// ...
$menu->push('About')->link->href('#');
// ...
?>
活动项
您可以使用该项目的active()
将项标记为激活。
<?php // ... $menu->push('Home', '#')->active(); // ... /* Output <li class="active"><a href="#">#</a></li> */ ?>
您还可以将类active
添加到锚元素,而不是包装元素(div
或li
)。
<?php // ... $menu->push('Home', '#')->link->active(); // ... /* Output <li><a class="active" href="#">#</a></li> */ ?>
Laravel菜单会根据您注册项时的当前URI自动为您完成此操作。
您还可以在包的配置目录中的settings.php
中设置激活的元素(项目或链接)。
// ... 'activate.element' => 'item', // item|link // ...
RESTful URL
只要在config/settings.php
文件中将restful
选项设置为true
,就支持RESTful URL,例如具有URLresource
的菜单项将通过resource/slug
或resource/slug/edit
激活。
您可能会遇到应用程序位于子目录而不是根目录或资源具有公共前缀的情况;在这种情况下,您需要将rest_base
选项设置为适当的前缀以获得更好的RESTful激活支持。rest_base
可以接受一个简单的字符串、字符串数组或函数调用作为值。
URL 通配符
llama-laravel/menus
使您能够为特定项定义一个模式,如果自动激活不起作用。
<?php // ... $menu->push('Articles', 'articles')->active('this-is-another-url/*'); // ...
因此,this-is-another-url
和this-is-another-url/and-another
都将激活Articles
项。
插入分隔符
您可以使用divide()
方法在每个项目后插入分隔符。
<?php //... $menu->push('Separated Item', 'item-url')->divide() // You can also use it this way: $menu->('Another Separated Item', 'another-item-url'); // This line will insert a divider after the last defined item $menu->divide() //... /* Output as <ul>: <ul> ... <li><a href="item-url">Separated Item</a></li> <li class="divider"></li> <li><a href="another-item-url">Another Separated Item</a></li> <li class="divider"></li> ... </ul> */ ?>
divide()
也接受一个包含HTML属性组的关联数组。
<?php //... $menu->push('Separated Item', 'item-url')->divide(['class' => 'my-divider']); //... /* Output as <ul>: <ul> ... <li><a href="item-url">Separated Item</a></li> <li class="my-divider divider"></li> ... </ul> */ ?>
追加和前置
您可以在定义后向每个项的标题添加HTML或纯文本。
<?php \Menu::macro('MyNavBar', function($menu){ // ... $about = $menu->push('About', ['url' => route('page.about'), 'class' => 'navbar navbar-about dropdown']); $menu->about->attr(['class' => 'dropdown-toggle', 'data-toggle' => 'dropdown']) ->append(' <b class="caret"></b>') ->prepend('<span class="glyphicon glyphicon-user"></span> '); // ... }); ?>
上面的代码将产生以下结果
<ul> ... <li class="navbar navbar-about dropdown"> <a href="about" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-user"></span> About <b class="caret"></b> </a> </li> </ul>
您还可以对集合调用prepend
和append
。
原始项
要作为纯文本而不是超链接插入项,您可以使用raw()
。
<?php // ... $menu->raw('Item Title', ['class' => 'some-class']); $menu->push('About', 'about'); $menu->About->raw('Another Plain Text Item') // ... /* Output as an unordered list: <ul> ... <li class="some-class">Item's Title</li> <li> About <ul> <li>Another Plain Text Item</li> </ul> </li> ... </ul> */ ?>
菜单组
有时您可能需要在多个项之间共享属性。而不是为每个项指定属性和选项,您可以使用菜单组功能。
PS:此功能与Laravel组路由功能完全相同。
<?php \Menu::macro('MyNavBar', function($menu){ $menu->push('Home', ['url' => route('home.page'), 'class' => 'navbar navbar-home', 'id' => 'home']); $menu->group(['style' => 'padding: 0', 'data-role' => 'navigation'], function($m){ $m->push('About', ['url' => route('page.about'), 'class' => 'navbar navbar-about dropdown']); $m->push('services', action('ServicesController@index')); } $menu->push('Contact', 'contact'); }); ?>
属性style
和data-role
将应用于About
和Services
项。
<ul> <li class="navbar navbar-home" id="home"><a href="http://yourdomain.com">Home</a></li> <li style="padding: 0" data-role="navigation" class="navbar navbar-about dropdown"><a href="http://yourdomain.com/about"About</a></li> <li style="padding: 0" data-role="navigation"><a href="http://yourdomain.com/services">Services</a></li> </ul>
URL 前缀
与Laravel路由前缀功能一样,可以通过将数组传递给组中的prefix
选项来为菜单项组添加前缀。
注意:前缀仅适用于使用url
指定的菜单项,但不适用于route
或action
。
<?php \Menu::macro('MyNavBar', function($menu){ $menu->push('Home', ['url' => route('home.page'), 'class' => 'navbar navbar-home', 'id' => 'home']); $menu->push('About', ['url' => 'about', 'class' => 'navbar navbar-about dropdown']); // URL: /about $menu->group(['prefix' => 'about'], function($m){ $about->push('Who we are?', 'who-we-are'); // URL: about/who-we-are $about->push('What we do?', 'what-we-do'); // URL: about/what-we-do }); $menu->push('Contact', 'contact'); }); ?>
这将生成以下内容
<ul> <li class="navbar navbar-home" id="home"><a href="/">Home</a></li> <li data-role="navigation" class="navbar navbar-about dropdown"><a href="http://yourdomain.com/about/summary"About</a> <ul> <li><a href="http://yourdomain.com/about/who-we-are">Who we are?</a></li> <li><a href="http://yourdomain.com/about/who-we-are">What we do?</a></li> </ul> </li> <li><a href="services">Services</a></li> <li><a href="contact">Contact</a></li> </ul>
嵌套组
Laravel 菜单支持嵌套分组功能。菜单组将其自身属性与父组属性合并,然后将其与封装的项共享。
<?php \Menu::macro('MyNavBar', function($menu){ // ... $menu->group(['prefix' => 'pages', 'data-info' => 'test'], function($m){ $m->push('About', 'about'); $m->group(['prefix' => 'about', 'data-role' => 'navigation'], function($a){ $a->push('Who we are', 'who-we-are?'); $a->push('What we do?', 'what-we-do'); $a->push('Our Goals', 'our-goals'); }); }); }); ?>
如果我们将其渲染为 ul 标签
<ul> ... <li data-info="test"> <a href="http://yourdomain.com/pages/about">About</a> <ul> <li data-info="test" data-role="navigation"><a href="http://yourdomain.com/pages/about/who-we-are"></a></li> <li data-info="test" data-role="navigation"><a href="http://yourdomain.com/pages/about/what-we-do"></a></li> <li data-info="test" data-role="navigation"><a href="http://yourdomain.com/pages/about/our-goals"></a></li> </ul> </li> </ul>
元数据
您可能会遇到需要将一些元数据附加到每个项的情况;这些数据可以是项的放置顺序到访问项所需的权限等任何内容;您可以通过使用 data()
方法来实现。
data()
方法与 attr()
方法完全相同。
如果您用单个参数调用 data()
,它将为您返回数据值。如果您用两个参数调用它,它将把第一个和第二个参数视为键/值对,并设置数据。如果您需要一次性添加一组键/值对,也可以传递一个关联数组的数据;最后,如果您不带任何参数调用它,它将返回所有数据作为数组。
<?php \Menu::macro('MyNavBar', function($menu){ // ... $menu->push('Users', route('admin.users')) ->data('permission', 'manage_users'); }); ?>
您也可以像访问属性一样访问数据。
<?php //... $menu->push('Users', '#')->data('placement', 12); // you can refer to placement as if it's a public property of the item object echo $menu->users->placement; // Output : 12 //... ?>
元数据不会对项执行任何操作,也不会在 HTML 中渲染。开发者将决定如何使用它们。
如果您需要针对一组项,您可以在集合上使用 data
。
<?php // ... $menu->push('Users', 'users'); $menu->users->push('New User', 'users/new'); $menu->users->push('Uses', 'users'); // add a meta data to children of Users $menu->users->children()->data('anything', 'value'); // ...
过滤项
我们可以使用 filter()
方法过滤菜单项。该方法接收一个由您定义的闭包。
对于您想要排除的项,必须返回 false;对于您想要保留的项,返回 true。
让我们从现实场景开始吧
我假设您的 User
模型可以检查用户是否有特定的权限。
<?php \Menu::macro('MyNavBar', function($menu){ // ... $menu->push('Users', route('admin.users')) ->data('permission', 'manage_users'); })->filter(function($item){ if(User::get()->can( $item->data('permission'))) { return true; } return false; }); ?>
如您所注意到的,我们使用了 data()
将每个项所需的权限附加到每个项上。
结果,Users
项将只对具有 manage_users
权限的用户可见。
排序项
llama-laravel/menus
可以根据用户定义的函数或键对项进行排序,该键可以是项属性(如 id、parent 等)或存储在每个项中的元数据。
要基于属性和/或元数据对项进行排序
<?php \Menu::macro('main', function($m){ $m->push('About', '#') ->data('order', 2); $m->push('Home', '#') ->data('order', 1); $m->push('Services', '#') ->data('order', 3); $m->push('Contact', '#') ->data('order', 5); $m->push('Portfolio', '#') ->data('order', 4); })->sortBy('order'); ?>
sortBy()
还接收第二个参数,用于指定排序方向:升序(asc
)和降序(dsc
)。
默认值是 asc
。
要按降序对 Id
进行排序
<?php \Menu::macro('main', function($m){ $m->push('About'); $m->push('Home'); $m->push('Services'); $m->push('Contact'); $m->push('Portfolio'); })->sortBy('id', 'desc'); ?>
通过传递闭包对项进行排序
<?php \Menu::macro('main', function($m){ $m->push('About') ->data('order', 2); $m->push('Home') ->data('order', 1); $m->push('Services') ->data('order', 3); $m->push('Contact') ->data('order', 5); $m->push('Portfolio') ->data('order', 4); })->sortBy(function($items) { // Your sorting algorithm here... }); ?>
闭包接收项集合作为参数。
渲染方法
提供了多种开箱即用的渲染格式。
将菜单作为无序列表渲染
{!! $MenuName->asUl() !!}
asUl()
将您的菜单渲染为无序列表。它还接受一个可选参数,用于定义 <ul>
标签本身的属性。
{!! $MenuName->asUl( ['class' => 'awesome-ul'] ) !!}
结果
<ul class="awesome-ul"> <li><a href="http://yourdomain.com">Home</a></li> <li><a href="http://yourdomain.com/about">About</a></li> <li><a href="http://yourdomain.com/services">Services</a></li> <li><a href="http://yourdomain.com/contact">Contact</a></li> </ul>
将菜单作为有序列表渲染
{!! $MenuName->asOl() !!}
asOl()
方法将您的菜单渲染为有序列表。它还接受一个可选参数,用于定义 <ol>
标签本身的属性。
{!! $MenuName->asOl( ['class' => 'awesome-ol'] ) !!}
结果
<ol class="awesome-ol"> <li><a href="http://yourdomain.com">Home</a></li> <li><a href="http://yourdomain.com/about">About</a></li> <li><a href="http://yourdomain.com/services">Services</a></li> <li><a href="http://yourdomain.com/contact">Contact</a></li> </ol>
将菜单作为 div 渲染
{!! $MenuName->asDiv() !!}
asDiv()
方法将您的菜单作为嵌套的 HTML div 渲染。它还接受一个可选参数,用于定义父 <div>
标签本身的属性。
{!! $MenuName->asDiv( ['class' => 'awesome-div'] ) !!}
结果
<div class="awesome-div"> <div><a href="http://yourdomain.com">Home</a></div> <div><a href="http://yourdomain.com/about">About</a></div> <div><a href="http://yourdomain.com/services">Services</a></div> <div><a href="http://yourdomain.com/contact">Contact</a></div> </div>
将菜单作为 Bootstrap 3 导航栏渲染
Laravel 菜单提供了一种开箱即用的部分视图,可以以 Bootstrap 优化的样式生成菜单项,您可以将它 包含 在基于 Bootstrap 的导航栏中。
您可以通过 config('llama.menus.view')
访问部分视图。
您需要做的就是包含部分视图,并将根级别项传递给它。
...
@include(config('llama.menus.view'), ['items' => $mainNav->roots()])
...
这就是您的 Bootstrap 代码将看起来像什么
<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> @include(config('llama.menus.view'), ['items' => $mainNav->roots()]) </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> @include(config('llama.menus.view'), ['items' => $loginNav->roots()]) </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
高级用法
如前所述,您可以创建自己的渲染格式。
基本示例
如果您想根据您的设计渲染菜单(s),您应该创建两个视图。
视图-1
这个视图包含所有 HTML 代码,如nav
或ul
或div
标签,它们封装了菜单项。视图-2
实际上是一个部分视图,负责渲染菜单项(它将被包含在视图-1
中。)
在这里我们使用两个视图文件的原因是,View-2
会递归地调用自身,以渲染多级菜单所需的最低级别项目。
让我们通过一个示例使其更简单。
在我们的 app/Http/routes.php
<?php \Menu::macro('MyNavBar', function($menu){ $menu->push('Home'); $menu->push('About', route('page.about')); $menu->about->push('Who are we?', 'who-we-are'); $menu->about->push('What we do?', 'what-we-do'); $menu->push('services', 'services'); $menu->push('Contact', 'contact'); }); ?>
在这个例子中,我们将 View-1 命名为 custom-menu.blade.php
,将 View-2 命名为 custom-menu-items.blade.php
。
custom-menu.blade.php
<nav class="navbar"> <ul class="horizontal-navbar"> @include('custom-menu-items', ['items' => $MyNavBar->roots()]) </ul> </nav><!--/nav-->
custom-menu-items.blade.php
@foreach($items as $item) <li @if($item->hasChildren()) class="dropdown" @endif> <a href="{!! $item->url() !!}">{!! $item->title !!} </a> @if($item->hasChildren()) <ul class="dropdown-menu"> @include('custom-menu-items', ['items' => $item->children()]) </ul> @endif </li> @endforeach
让我们描述一下我们上面所做的工作,在 custom-menus.blade.php
中,我们根据我们的设计放置了任何HTML模板代码,然后我们包含了 custom-menu-items.blade.php
并将 根级别 的菜单项传递给了 custom-menu-items.blade.php
... @include('custom-menu-items', ['items' => $menu->roots()]) ...
在 custom-menu-items.blade.php
中,我们运行了一个 foreach
循环,并在当前项有子项的情况下递归调用文件。
要将渲染的菜单放入您的应用程序模板中,您只需在主布局中包含 custom-menu
视图。
配置
您可以在 config/llama/menus.php
文件中调整菜单构建器的行为。目前它提供了一些开箱即用的选项
- activate.auto 根据当前URI自动激活菜单项。
- activate.parents 激活激活项的父项。
- activate.class 激活项的默认CSS类名。
- activate.element 您可以选择要将激活类添加到哪个HTML元素(锚点或包装元素)。
- inheritance 如果您需要项的子代从其父代继承元数据,请确保此选项已启用。
- restful 激活RESTful URLS。例如,
resource/slug
将激活具有resource
URL的项。 - rest_base 所有RESTful资源可能前缀的基准URL。
您还可以覆盖每个菜单的默认设置。要覆盖菜单的设置,只需在设置数组中添加小写的菜单名称作为键,并添加您需要覆盖的选项
<?php return [ 'default' => [ 'activate' => [ 'auto' => true, 'parents' => true, 'class' => 'active', 'element' => 'item', // item|link ], 'restful' => true, ], 'your_menu_name' => [ 'activate' => [ 'auto' => false ] ] ];
如果您需要帮助
请使用GitHub issues提交所有问题和疑问,我将尽力帮助您。
许可证
llama-laravel/menus 是在MIT许可证下分发的免费软件。