让DcatAdmin再放光芒系列 [页面组件]:上百种页面组件随便加

Dcatplus-杨光的个人博客 / 311 / 20 / 创建于 7个月前 / 更新于 7个月前

前言

你在使用dcat-admin 的时候，是不是总感觉原来的页面组件 不够用，在中大型项目中，尤其是saas系统。会需要用到各种页面组件。这个时候，只能自己去找相应的基于bootstrapV4的模板。

原来现有的页面组件

让DcatAdmin再放光芒系列 [页面组件]:上百页面组件随便加

思考

现在dcat-admin 已停更。期待作者来添加更多的组件，显然不能等。本人去查看了bootstrap V4 和 Adminlte V3, 还有大量实用的页面组件可以用，项目开发能用到的频次也高。
如 轮播图,媒体列表,列表组,定价卡片,信息列表卡,时间轴,瀑布流,用户挂件, 等等多达几十种，如果能把 Adminlte V3 现有的这些集成进去，将大大提高开发效率.

花几分钟来集成一个 link-box (常用功能导航)

效果图：

让DcatAdmin再放光芒系列 [页面组件]:上百页面组件随便加

二步完成集成
1.模板准备
2.组件实例

模板准备

模板文件：link-box.blade.php
存放路径：vendor/dcat/laravel-admin/resources/views/widgets/link-box.blade.php

>  可自定义css 来解决和原有框架css 冲突。同时也可更精细的控制UI.
<style>
    .link-box .info-box{
        margin-bottom:15px;
        min-height: 50px;
    }
    .link-box .info-box-icon{
        width: 50px;
        height: 50px;
    }
    .link-box .info-box-title{
        font-size: 16px;
        color: #1d2129;
    }
    .link-box .info-box-content{
        display: flex;
        align-items: center;
    }
    .link-box .link-box-title{
        font-size: 18px;
        font-weight: bold;
        padding-left: 15px;
        border-left: 3px solid green;
        margin: 20px 10px;
    }
    .link-box .info-box-number{
        font-size: 16px;
        color: #1d2129;
    }
    .link-box .info-box-text{
        color: #c1c1c1;
    }
</style>
<div class="link-box {{ $id }}">
    <div class="link-box-title">{{$group_title}}</div>
    <div class="row">
        @foreach($items as $key => $item)
        <div class="col-md-3 col-sm-6 col-12">
            <div class="info-box shadow-x">
                @if(isset($item['hot']) && $item['hot'] === true)
                <div class="ribbon ribbon-top ribbon-bookmark bg-green">
                    <!-- Download SVG icon from http://tabler-icons.io/i/star -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24"
                         viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                         stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
                    </svg>
                </div>
                @endif
            <span class="info-box-icon {{$item['bg_value'] ?? 'bg-info'}}">
                <i class="{{$item['icon']}}"></i></span>
                <a class="info-box-content"  @if(isset($item['sub_title'])) style="align-items:normal;flex-direction:column;justify-content:center" @endif href="{{$item['link']}}">
                    @if(isset($item['sub_title']))
                        <span class="info-box-number">{{$item['title']}}</span>
                        <span class="info-box-text">{{$item['sub_title']}}</span>
                    @else
                        <span class="info-box-title">{{$item['title']}}</span>
                    @endif
                </a>
            </div>
        </div>
        @endforeach
    </div>
</div>

编写组件实例

组件实例文件：Linkbox.php
存放路径：vendor/dcat/laravel-admin/src/Widgets/Linkbox.php

namespace Dcat\Admin\Widgets;

use Illuminate\Contracts\Support\Renderable;

class Linkbox extends Widget
{
    /**
     * @var string
     */
    protected $view = 'admin::widgets.link-box';

    protected $group_title; // 分组标题
    /**
     * @var array
     */
    protected $items = [];

    protected $hot = false;

    /**
     * Collapse constructor.
     */
    public function __construct()
    {
        $this->id('link-box-'.uniqid());
        $this->class('box-group');
        $this->style('margin-bottom: 20px');
    }

    public function groupTitle($title){
        $this->group_title = $title;
        return $this;
    }

    /**
     * Add item.
     *
     * @param string $title
     * @param string $content
     *
     * [@return](https://learnku.com/users/31554) $this
     */
    public function add($icon, $title,$sub_title,$link,$bg_value='bg-info',$hot = false)
    {
        $this->items[] = [
            'icon' => $icon,
            'title'   => $title,
            'sub_title'=> $sub_title,
            'link'=> $link,
            'hot' => $hot,
            'bg_value' => $bg_value
        ];

        return $this;
    }
    // 热门
    public function hot($v = true){
        $this->items[count($this->items)-1]['hot'] = $v;
        return $this;
    }

    /**
     * {@inheritdoc}
     */
    public function defaultVariables()
    {
        return [
            'id'         => $this->id,
            'group_title' => $this->group_title,
            'items'      => $this->items,
            'attributes' => $this->formatAttributes(),
        ];
    }

}

使用 link-box 组件

use Dcat\Admin\Widgets\Linkbox;

$linkbox = new Linkbox();
        $linkbox->groupTitle('新增组件');
        $link_group = [
            [
                'icon'=> 'feather icon-chevrons-down',
                'title'=>'Collapse',
                'sub_title' => '列表信息折叠',
                'link' => '/admin/components/collapse',
                'bg_value'=> 'bg-info',
                'hot'=> false,
            ],[
                'icon'=> 'fa fa-fw fa-th-list',
                'title'=>'List-group',
                'sub_title' => '列表组',
                'link' => '/admin/components/list-group',
                'bg_value'=> 'bg-success',
                'hot' => false,
            ],[
                'icon'=> 'feather icon-shield',
                'title'=>'Btn-group',
                'sub_title' => '按钮组',
                'link' => '/admin/components/btn-group',
                'bg_value'=> 'bg-warning',
                'hot' => false,
            ],[
                'icon'=> 'feather icon-film',
                'title'=>'Media-list',
                'sub_title' => '媒体列表',
                'link' => '/admin/components/media-list',
                'bg_value'=> 'bg-danger',
                'hot' => true,
            ],[
                'icon'=> 'feather icon-image',
                'title'=>'Carousel',
                'sub_title' => '轮播图',
                'link' => '/admin/components/carousel',
                'bg_value'=> 'bg-primary',
                'hot' => true,
            ],[
                'icon'=> 'fa fa-money',
                'title'=>'Pricing-card',
                'sub_title' => '定价卡',
                'link' => '/admin/components/pricing-card',
                'bg_value'=> 'bg-dark',
                'hot' => false,
            ]

        ];
        foreach ($link_group as $key => $itemk) {
            $linkbox->add($itemk['icon'],$itemk['title'],$itemk['sub_title'],$itemk['link'],$itemk['bg_value'])->hot($itemk['hot']);
        }

        $card =  Card::make('',$linkbox->render());
        return $card;

集成说明

组件模板，这个可以全网去找现成的,不限于 bootstrap V4 和 Adminlte V3 只要看到适合的都可以连同样式撸过来。调整成统一风格就成。

组件实例 可以做更精细化的控制，如把 图标,图标大小, 图标背景颜色,像上面这个热门功能(hot)一样，写成函数，需要时链式添加
public function hot($v = true){
        $this->items[count($this->items)-1]['hot'] = $v;
        return $this;
    }