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

Question

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

问题是如何使用 Bootstrap class 制作不同颜色的图标。我希望该列表中的图标有 5 种颜色，例如第一个是 bg-light-primary，第二个是 bg-light-danger，bg-light-success对于第三个，等等。我显示数据的方式是使用 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

这是 controller：

<?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 ($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>

Answer 2

创建您的值的数组，并使用该数组中的随机值将其用作 class。

<?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>

建议您不要使用随机 class，因为它可能会重复，或者一次可能全部相同。