使用 Laravel 分段方法动态放置活动 class(不工作)
Putting active class dynamically using Laravel segment method (Not working)
我有四个步骤。每个步骤的网址是 -
基本信息 : localhost/project/public/user/sell/basic-info
产品信息 : localhost/project/public/user/sell/5/product-info
照片 : localhost/project/public/user/sell/5/photos
价格信息 : localhost/project/public/user/sell/5/price-info
我想,当我在 basic-info 时 basic-info 步骤必须有 active
class 其余步骤将有 disabled
class .
然后当我在产品信息时,基本信息步骤将没有任何 class,产品信息步骤将有 active
class 和其余的之后的步骤将有 disabled
class,依此类推。
下面是图片。
这是我的代码 -
<div class="ui mini top four attached steps">
<div class="{{ Request::segment(3) === 'basic-info' ? 'active' : '' }} step">
<i class="info circle icon"></i>
<div class="content">
<div class="title">Basic Info</div>
<div class="description">Enter the basic information.</div>
</div>
</div>
<div class="{{ Request::segment(4) === 'product-info' ? 'active' : Request::segment(3) === 'basic-info' ? 'disabled' : '' }} step">
<i class="help circle icon"></i>
<div class="content">
<div class="title">Product Info</div>
<div class="description">Enter your product details.</div>
</div>
</div>
<div class="{{ Request::segment(4) === 'photos' ? 'active' : Request::segment(3) === 'basic-info' ? 'disabled' : Request::segment(4) === 'basic-info' ? 'disabled' : '' }} step">
<i class="image icon"></i>
<div class="content">
<div class="title">Photos</div>
<div class="description">Upload the photos of product.</div>
</div>
</div>
<div class="{{ Request::segment(4) === 'price-info' ? 'active' : Request::segment(3) === 'basic-info' ? 'disabled' : Request::segment(4) === 'basic-info' ? 'disabled' : Request::segment(4) === 'basic-info' ? 'disabled' : '' }} step">
<i class="rupee icon"></i>
<div class="content">
<div class="title">Price</div>
<div class="description">Enter the price</div>
</div>
</div>
</div>
我建议为这个问题创建一个辅助函数。
这是我在一个应用程序中使用的内容:
<?php
namespace App\Helpers;
use Route;
class Helper
{
/*
|--------------------------------------------------------------------------
| Detect Active Route
|--------------------------------------------------------------------------
|
| Compare given route with current route and return output if they match.
| Very useful for navigation, marking if the link is active.
|
*/
public static function isActiveRoute($route, $output = "active")
{
if (Route::currentRouteName() == $route) return $output;
}
}
在 config\app.php
中注册 class 和 Helper
这样的别名
'Helper' => App\Helpers\Helper::class, //my custom functions
然后您可以像这样使用它:
class="{{ Helper::isActiveRoute('route.name') }}"
我有四个步骤。每个步骤的网址是 -
基本信息 : localhost/project/public/user/sell/basic-info
产品信息 : localhost/project/public/user/sell/5/product-info
照片 : localhost/project/public/user/sell/5/photos
价格信息 : localhost/project/public/user/sell/5/price-info
我想,当我在 basic-info 时 basic-info 步骤必须有 active
class 其余步骤将有 disabled
class .
然后当我在产品信息时,基本信息步骤将没有任何 class,产品信息步骤将有 active
class 和其余的之后的步骤将有 disabled
class,依此类推。
下面是图片。
这是我的代码 -
<div class="ui mini top four attached steps">
<div class="{{ Request::segment(3) === 'basic-info' ? 'active' : '' }} step">
<i class="info circle icon"></i>
<div class="content">
<div class="title">Basic Info</div>
<div class="description">Enter the basic information.</div>
</div>
</div>
<div class="{{ Request::segment(4) === 'product-info' ? 'active' : Request::segment(3) === 'basic-info' ? 'disabled' : '' }} step">
<i class="help circle icon"></i>
<div class="content">
<div class="title">Product Info</div>
<div class="description">Enter your product details.</div>
</div>
</div>
<div class="{{ Request::segment(4) === 'photos' ? 'active' : Request::segment(3) === 'basic-info' ? 'disabled' : Request::segment(4) === 'basic-info' ? 'disabled' : '' }} step">
<i class="image icon"></i>
<div class="content">
<div class="title">Photos</div>
<div class="description">Upload the photos of product.</div>
</div>
</div>
<div class="{{ Request::segment(4) === 'price-info' ? 'active' : Request::segment(3) === 'basic-info' ? 'disabled' : Request::segment(4) === 'basic-info' ? 'disabled' : Request::segment(4) === 'basic-info' ? 'disabled' : '' }} step">
<i class="rupee icon"></i>
<div class="content">
<div class="title">Price</div>
<div class="description">Enter the price</div>
</div>
</div>
</div>
我建议为这个问题创建一个辅助函数。
这是我在一个应用程序中使用的内容:
<?php
namespace App\Helpers;
use Route;
class Helper
{
/*
|--------------------------------------------------------------------------
| Detect Active Route
|--------------------------------------------------------------------------
|
| Compare given route with current route and return output if they match.
| Very useful for navigation, marking if the link is active.
|
*/
public static function isActiveRoute($route, $output = "active")
{
if (Route::currentRouteName() == $route) return $output;
}
}
在 config\app.php
中注册 class 和 Helper
'Helper' => App\Helpers\Helper::class, //my custom functions
然后您可以像这样使用它:
class="{{ Helper::isActiveRoute('route.name') }}"