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

前言

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

原来现有的页面组件

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

思考

现在dcat-admin 已停更。期待作者来添加更多的组件,显然不能等。本人去查看了bootstrap V4Adminlte 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 V4Adminlte V3 只要看到适合的都可以连同样式撸过来。调整成统一风格就成。

组件实例 可以做更精细化的控制,如把 图标,图标大小, 图标背景颜色,像上面这个 热门功能(hot)一样,写成函数,需要时链式添加

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

新增17种页面组件 演示网站

demo.saishiyun.net/admin
部分组件截图:

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

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

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

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

畅想

如果 dcat-admin 的页面组件多达 百种 之多,再使用去开发项目是何等的丝滑。

那么,你愿意花几分钟的时间,来贡献一个组件吗?请留下评论。

本人将在 dcat-admin 的git基础上 创建新的分支,期待你来汇聚光芒。

结尾

用自己最熟悉的技术栈,让你心中的idea落地 创收。

本作品采用《CC 协议》,转载必须注明作者和本文链接
Dcat-Admin (plus版)是汇聚Filament,Laravel-admin , Dcat-admin 优点于一身的基于Laravel + Bootstrap 的极速开发框架
本帖由 MArtian 于 1周前 加精
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 17

点个赞, 支持一下 :+1:

1周前 评论

支持一下!不过只有演示站吗?有没有框架的开发文档啊

1周前 评论
Dcatplus-杨光 (楼主) 1周前

点赞,支持一下

1周前 评论

点赞,支持一下

1周前 评论

支持, 搬好椅子坐等.

1周前 评论
Dcatplus-杨光 (楼主) 1周前
ly560020

厉害了 感谢开源

1周前 评论
Dcatplus-杨光 (楼主) 1周前

牛逼

1周前 评论
Dcatplus-杨光 (楼主) 1周前

支持一下,期待早日发布

6天前 评论

点个赞, 支持一下 :thumbsup:

4天前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!