自定义页面

未匹配的标注
本文档最新版为 2.x,旧版本可能放弃维护,推荐阅读最新版!

自定义页面

Dcat Admin中构建自定义页面非常简单,可以参考如下两个例子

示例1

Dcat Admin构建的是一个单页应用,加载的JS脚本只会执行一次,所以初始化操作不能直接放在JS脚本中,应该使用Admin::script方法载入。

<?php

use Illuminate\Contracts\Support\Renderable;
use Dcat\Admin\Admin;

class MyPage implements Renderable
{
    // 定义页面所需的静态资源,这里会按需加载
    public static $js = [
        // js脚本不能直接包含初始化操作,否则页面刷新后无效
        'xxx/js/page.min.js',
    ];
    public static $css = [
        'xxx/css/page.min.css',
    ];

    public function script()
    {
        return <<<JS
        console.log('所有JS脚本都加载完了');
        // 初始化操作写在这里
JS;        
    }

    public function render()
    {
        // 在这里可以引入你的js或css文件
        Admin::js(static::$js);
        Admin::css(static::$css);

        // 需要在页面执行的JS代码
        // 通过 Admin::script 设置的JS代码会自动在所有JS脚本都加载完毕后执行
        Admin::script($this->script());

        return view('admin.pages.my-page')->render();
    }
}

视图admin.pages.my-page,注意视图代码里面不要包含<body><html>等标签

<div>
  <h3>自定义页面演示</h3>
</div>
<script>
Dcat.ready(function () {
    // js代码也可以放在模板里面
    console.log('所有JS脚本都加载完了!!!');
});
</script>

使用

public function index(Content $content)
{
    return $content->body(new MyPage());
}

示例2

后台的仪表盘页面/admin,也可以看做是一个自定义页面,代码实现如下

public function index(Content $content)
{
    return $content
        ->header('Dashboard')
        ->description('Description...')
        ->body(function (Row $row) {
            $row->column(6, function (Column $column) {
                $column->row(Dashboard::title());
                $column->row(new Examples\Tickets());
            });

            $row->column(6, function (Column $column) {
                $column->row(function (Row $row) {
                    $row->column(6, new Examples\NewUsers());
                    $row->column(6, new Examples\NewDevices());
                });

                $column->row(new Examples\Sessions());
                $column->row(new Examples\ProductOrders());
            });
        });
}

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 0
发起讨论 只看当前版本


暂无话题~