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

分享 monkey ⋅ 于 1年前 ⋅ 最后回复由 Chasers9527 2个月前 ⋅ 5568 阅读

说明

在我们构建页面的过程中,经常会根据 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 社区,转载必须贴上原文链接 https://laravel-china.org/topics/2858

本文章首发在 Laravel China 社区
本帖已被设为精华帖!
本帖由 Summer 于 1年前 加精
回复数量: 10
暂无评论~~
您需要登陆以后才能留下评论!

Composer 中国全量镜像

Top 100 扩展包

Lumen 中文文档

Laravel 速查表

Laravel 中文文档

Laravel 项目开发规范

Laravel 开发环境部署

TDD 构建 Laravel 论坛笔记

PHP PSR 标准规范

PHP 设计模式全集

Dingo API 中文文档