我如何为每个小部件插入不同的图标？

Question

我如何为每个小部件插入不同的图标？

[
            'type'          => 'progress_white',
            'class'         => 'card mb-2',
            'progressClass' => 'progress-bar bg-primary',
            'value'         => $userCount,
            'description'   => 'Utenti registrati.',
            'progress'      => (int)$userCount/10*100, // integer
            'hint'          => 'Numero di utenti registrati al portale.',
        ],

html部分是下面这部分

<div class="{{ $widget['wrapperClass'] ?? 'col-sm-6 col-md-4' }}">
<div class="{{ $widget['class'] ?? 'card' }}">
<div class="card-body">
  @if (isset($widget['value']))
  <div class="text-value">{!! $widget['value'] !!}</div>
  @endif

......

Answer 1

不幸的是，默认的小部件没有办法让你创建自己的小部件。

@if(isset($widget['icon']))
   <div class="text-right" style="position:absolute;top:5px;right:15px;font-size: 40px;color: {{ $widget['icon_color'] ?? 'rgba(0,0,0,0.2)' }}">
      <span class="{{ $widget['icon'] }}"></span>
   </div>
@endif

把它放在card-body类中。样式可能需要稍微改变一下。

另一个选择是Backpack使用了一个基于CoreUI的新主题。你可以看看CoreUI的文档，或者看看这个主题的源码，地址是 https:/backstrap.net。

Answer 2

你想要什么样的图标？如果您使用的是素材图标或awesome图标等图标集，您可以将您的图标名称传递到 "i "标签中，如下所示。

"icon" => "fa fa user"

然后在你的刀锋上

<i class"{{$widget['icon']}}"></i>