[扩展推荐] hieu-le/active 根据 url 生成对应导航的 active 状态
说明
在我们构建页面的过程中,经常会根据 url 的参数设置页面元素的 active
属性,将其渲染为「选中」状态。如网站导航需要根据不同的 url 给不同的元素添加选中效果:
如果我们使用 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
判断:
- if_uri() - 判断当前的 url 是否满足指定的 url;
- if_uri_pattern() - 判断当前的 url 是否含有指定的字符;
- if_query() - 判断指定的 GET 变量是否符合设置的值;
- if_route() - 判断当前对应的路由是否是指定的路由;
- if_route_pattern() - 判断当前的路由是否包含指定的字符;
- 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 已修改,顺便将之前发的文章也一并修改了 :smile:
改好了也不 @ 我?
Composer 进度如何啦
@monkey 酷炫 :meat_on_bone:
@Summer 如果顺利的话,周三就能有个可使用的版本了
@monkey Monkey 你就是这么牛
ce
最近做了一个项目,正好要用到
wow,作者是一名越南的开发者耶:meat_on_bone:
楼主你好,我想问下用了这个包以后,路由都不能缓存了,这样对性能会不会有一定的影响?或者这个包有没有其他更好的方式实现,希望楼主指点一下 :grinning: