[扩展推荐] hieu-le/active 根据 url 生成对应导航的 active 状态

说明

在我们构建页面的过程中,经常会根据 url 的参数设置页面元素的 active 属性,将其渲染为「选中」状态。如网站导航需要根据不同的 url 给不同的元素添加选中效果:

file

如果我们使用 letrunghieu/active 扩展包则能快速实现此逻辑,并能使代码更具有可读性。

完整的高质量扩展包推荐列表,请前往:下载量最高 100 个 Laravel 扩展包推荐

1. 安装

1). 使用 composer 安装:

composer require hieu-le/active

2). 修改 config/app 文件,添加 ServiceProvider:

providers 数组内追加如下内容

'providers' => [
    ...
    HieuLe\Active\ActiveServiceProvider::class,
],

aliases 数组内追加如下内容

'aliases' => [
    ...
    'Active' => HieuLe\Active\Facades\Active::class,
],

这样就安装完成了

2. 用例

只要了解 active_class 函数即可快速上手,此函数的定义如下:

<?php
    /**
     * 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 = '')

如果当前的 url 满足指定条件 ($condition) ,此函数将返回 $activeClass,否则返回 $inactiveClass

此扩展包提供了一批函数让我们更方便的进行 $condition 判断:

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

具体的使用方法如下:

Route::get('/phphub/active/', function () {

    /*
    |--------------------------------------------------------------------------
    | 当 URL 为 http://localhost/phphub/active 时,都将输出 activate,否则输出 inactivate
    |--------------------------------------------------------------------------
    */
    echo active_class(if_route('phphub.active'), 'activate', 'inactivate') . '<br>';
    echo active_class(if_uri('phphub/active'), 'activate', 'inactivate') . '<br>';

    /*
    |--------------------------------------------------------------------------
    | 当 URL 为
    |     http://localhost/php/active
    |     http://localhost/phphub/active
    |     http://localhost/php-monkey/active
    | 都将输出 activate
    |--------------------------------------------------------------------------
    */
    echo active_class(if_uri_pattern('php*/active'), 'activate', 'inactivate') . '<br>';
    echo active_class(if_route_pattern('php*.active'), 'activate', 'inactivate') . '<br>';

    /*
    |--------------------------------------------------------------------------
    | 当 URL 为 http://localhost/phphub/active?name=monkey 时输出 activate,否则输出 inactivate
    |--------------------------------------------------------------------------
    */
    echo active_class(if_query('name', 'monkey'), 'activate', 'inactivate');

})->name('phphub.active');

Route::get('/phphub/{id}/active', function () {
    /*
    |--------------------------------------------------------------------------
    | 当 URL 为 http://localhost/phphub/1/active 时输出 activate,否则输出 inactivate
    |--------------------------------------------------------------------------
    */
    echo active_class(if_route_param('id', '1'), 'activate', 'inactivate');
});

3. 实战效果

这是某项目导航未使用此扩展包之前的代码:

<div class="text-center tt-mt30 btns three">
    <a class="tt-btn {{ Request::is('users*') ? 'active' : '' }}" href="{{ route('users.show', $user->id) }}">简介</a>
    <a class="tt-btn {{ Request::is('cases*') ? 'active' : ''  }}" href="{{ route('users.cases', $user->id) }}">作品</a>
    <a class="tt-btn {{ Request::is('jobs*') ? 'active' : '' }}" href="{{ route('users.jobs', $user->id) }}">招聘</a>
</div>

这是使用了扩展包后的代码:

<div class="text-center tt-mt30 btns three">
    <a class="tt-btn {{ active_class(if_route('users.show')) }}" href="{{ route('users.show', $user->id) }}">简介</a>
    <a class="tt-btn {{ active_class(if_route('users.cases')) }}" href="{{ route('users.cases', $user->id) }}">作品</a>
    <a class="tt-btn {{ active_class(if_route('users.jobs')) }}" href="{{ route('users.jobs', $user->id) }}">招聘</a>
</div>

修改后的代码可读性就非常高了。

本文只对常用的方法进行简单的阐述,更详细的资料可移步 官方文档 自行阅读。

以上。

本项目由 @monkey 整理发布,首发地为 Laravel China 社区,转载必须贴上原文链接 分享:【扩展推荐】hieu-le/active 根据 url 生成对应导航的 active 状态

本帖已被设为精华帖!
本帖由 Summer 于 7年前 加精
monkey
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 11
Summer

有错误

首发地为 PHPHub 社区

7年前 评论
monkey

@Summer 已修改,顺便将之前发的文章也一并修改了 :smile:

7年前 评论
Summer

改好了也不 @ 我?

Composer 进度如何啦

7年前 评论
Summer

@monkey 酷炫 :meat_on_bone:

7年前 评论
monkey

@Summer 如果顺利的话,周三就能有个可使用的版本了

7年前 评论
Summer

@monkey Monkey 你就是这么牛

7年前 评论

最近做了一个项目,正好要用到

7年前 评论

wow,作者是一名越南的开发者耶:meat_on_bone:

7年前 评论
幽弥狂

挺好的,,刚刚测试了一下。挺不错的

6年前 评论

楼主你好,我想问下用了这个包以后,路由都不能缓存了,这样对性能会不会有一定的影响?或者这个包有没有其他更好的方式实现,希望楼主指点一下 :grinning:

5年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!