更改引导颜色类Laravel中的每个循环（刀片）

Question

我有一个有限的数据列表（仅显示前5名）。我看起来像这样：

问题是如何使用Bootstrap类制作不同颜色的图标。我希望列表中的图标有5种颜色，比如第一种是bg-light，第二种是bg-light，第三种是bg-light，等等。我显示数据的方式是使用Laravel@Foreach。像这样：

@foreach ($diklats->where('status', 'Active')->take(5) as $diklat_list)
    <div class="transaction-item">
        <a href="javascript:void(0)" class="text-dark">
            <div class="media">
                <div class="avatar bg-light-primary rounded">
                    <div class="avatar-content">
                        <i data-feather="book" class="avatar-icon font-medium-3"></i>
                    </div>
                </div>
                <div class="media-body ml-1">
                    <h6 class="transaction-title">{{$diklat_list->name}}</h6>
                    <small>{{$diklat_list->userDiklat->where('is_approve',1)->count()}} </small>
                </div>
            </div>
        </a>
    <div class="font-weight-bolder text-danger"></div>
</div>
@endforeach

这是控制器：

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\{Diklat, User, UserDiklat, Regency};
use Illuminate\Support\Facades\DB;

class DashboardController extends Controller
{
    public function index()
    {
        $diklat = Diklat::where('status', 'Active')->count();
        $participant = User::where('is_participant', 1)->count();
        $regency = Regency::all()->count();
        $diklats = Diklat::with('userDiklat')->get();

        return view('admin.index', compact('diklats', 'diklat', 'participant', 'regency'));
    }
}

我已经搜索了这个案例，但仍然没有得到它，我正处于学习阶段。请你帮帮我好吗？提前谢谢你。

Answer 1

创建一个值数组，并使用该数组中的随机值将其用作类。

<?php $class_array = array("bg-primary","bg-danger","bg-success","bg-warning"); ?>
<div class="avatar-content">
    <i data-feather="book" class="avatar-icon font-medium-3 {{$class_array[array_rand($class_array)]}}"></i>
</div>

建议您不要使用random类，因为它可能会重复，或者一次使用的所有类都可能相同。

Answer 2

解决方法如下：

  @php ($icons = ["bg-light-primary","bg-light-success","bg-light-danger","bg-light-warning", "bg-light-info"])
  <div class="avatar {{$icons[$loop->index]}} rounded">
    <div class="avatar-content">
      <i data-feather="book" class="avatar-icon font-medium-3"></i>
    </div>
  </div>