导航栏添加 active 类-hieu-le/active组件

github地址
官方手册

使用案例

<ul class="nav navbar-nav">
    <li class="{{ active_class(if_route('topics.index')) }}"><a href="{{ route('topics.index') }}">话题</a></li>
    @foreach($view_categories as $view_category)
    <li class="{{ active_class((if_route('categories.show') && if_route_param('category', $view_category->id ))) }}"><a href="{{ route('categories.show', $view_category->id) }}">{{ $view_category->name }}</a></li>
    @endforeach
</ul>


解析后源码是这样
<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 判断：

• 1.if_route() - 判断当前对应的路由是否是指定的路由；
• 2.if_route_param() - 判断当前的 url 有无指定的路由参数。
• 3.if_query() - 判断指定的 GET 变量是否符合设置的值；
• 4.if_uri() - 判断当前的 url 是否满足指定的 url；
• 5.if_route_pattern() - 判断当前的路由是否包含指定的字符；
• 6.if_uri_pattern() - 判断当前的 url 是否含有指定的字符；