让DcatAdmin再放光芒系列 [页面组件]:上百种页面组件随便加
前言
你在使用dcat-admin
的时候,是不是总感觉 原来的页面组件
不够用,在中大型项目中,尤其是saas系统。会需要用到各种页面组件。这个时候,只能自己去找相应的基于bootstrapV4的模板。
原来现有的页面组件
思考
现在dcat-admin
已停更。期待作者来添加更多的组件,显然不能等。本人去查看了bootstrap V4
和 Adminlte V3
, 还有大量实用的页面组件可以用,项目开发能用到的频次也高。
如 轮播图
,媒体列表
,列表组
,定价卡片
,信息列表卡
,时间轴
,瀑布流
,用户挂件
, 等等多达几十种,如果能把 Adminlte V3
现有的这些集成进去,将大大提高开发效率.
花几分钟 来集成一个 link-box (常用功能导航)
效果图:
二步完成集成
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; }
新增17种页面组件 演示网站
demo.saishiyun.net/admin
部分组件截图:
畅想
如果 dcat-admin
的页面组件多达 百种 之多,再使用去开发项目是何等的丝滑。
那么,你愿意花几分钟的时间,来贡献一个组件吗?请留下评论。
本人将在 dcat-admin
的git基础上 创建新的分支,期待你来汇聚光芒。
结尾
用自己最熟悉的技术栈,让你心中的idea落地 创收。
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: