导航的 Active 状态
导航的选中状态样式是通过添加 CSS 类选择器 active
来实现的:
<ul class="nav navbar-nav">
<li class="active"><a href="{{ route('topics.index') }}">话题</a></li>
<li><a href="{{ route('categories.show', 1) }}">分享</a></li>
<li><a href="{{ route('categories.show', 2) }}">教程</a></li>
<li><a href="{{ route('categories.show', 3) }}">问答</a></li>
<li><a href="{{ route('categories.show', 4) }}">公告</a></li>
</ul>
此样式是 Bootstrap 框架的 导航栏组件 提供。
我们需要通过判断『路由命名』和『路由参数』为导航栏添加 active
类,接下来我们使用一个很方便的类库来辅助我们实现此功能。
使用 Composer 安装 hieu-le/active:
$ composer require "hieu-le/active:~3.5"
安装完成后,在模板中使用:
resources/views/layouts/_header.blade.php
.
.
.
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li class="{{ active_class(if_route('topics.index')) }}"><a href="{{ route('topics.index') }}">话题</a></li>
<li class="{{ active_class((if_route('categories.show') && if_route_param('category', 1))) }}"><a href="{{ route('categories.show', 1) }}">分享</a></li>
<li class="{{ active_class((if_route('categories.show') && if_route_param('category', 2))) }}"><a href="{{ route('categories.show', 2) }}">教程</a></li>
<li class="{{ active_class((if_route('categories.show') && if_route_param('category', 3))) }}"><a href="{{ route('categories.show', 3) }}">问答</a></li>
<li class="{{ active_class((if_route('categories.show') && if_route_param('category', 4))) }}"><a href="{{ route('categories.show', 4) }}">公告</a></li>
</ul>
.
.
.
上面代码看起来很复杂,但都是些重复的代码。我们需先理解好 active_class
函数的用法,此函数的定义如下:
/**
* Get the active class if the condition is not falsy
*
* @param $condition
* @param string $activeClass
* @param string $inactiveClass
*
* @return string
*/
function active_class($condition, $activeClass = 'active', $inactiveClass = '')
如果传参满足指定条件 ($condition
) ,此函数将返回 $activeClass
,否则返回 $inactiveClass
。
此扩展包提供了一批函数让我们更方便的进行 $condition
判断:
- if_route() - 判断当前对应的路由是否是指定的路由;
- if_route_param() - 判断当前的 url 有无指定的路由参数。
- if_query() - 判断指定的 GET 变量是否符合设置的值;
- if_uri() - 判断当前的 url 是否满足指定的 url;
- if_route_pattern() - 判断当前的路由是否包含指定的字符;
- if_uri_pattern() - 判断当前的 url 是否含有指定的字符;
在这里我们用到第 1 和 第 2 。
测试一下:
网友评论