页面内容 & 布局

默认情况下用命令行生成的控制文件提供数据的CURD操作,如果你的页面内容需要自定义,参考下面两部分的文档说明。

页面内容

laravel-admin的布局可参考后台首页的布局文件HomeController.phpindex()方法。

Encore\Admin\Layout\Content类用来实现内容区的布局。Content::body($content)方法用来添加页面内容:

一个简单的后台页面代码如下:

  1. public function index(Content $content)
  2. {
  3. // 选填
  4. $content->header('填写页面头标题');
  5. // 选填
  6. $content->description('填写页面描述小标题');
  7. // 添加面包屑导航 since v1.5.7
  8. $content->breadcrumb(
  9. ['text' => '首页', 'url' => '/admin'],
  10. ['text' => '用户管理', 'url' => '/admin/users'],
  11. ['text' => '编辑用户']
  12. );
  13. // 填充页面body部分,这里可以填入任何可被渲染的对象
  14. $content->body('hello world');
  15. // 在body中添加另一段内容
  16. $content->body('foo bar');
  17. // `row`是`body`方法的别名
  18. $content->row('hello world');
  19. // 直接渲染视图输出,Since v1.6.12
  20. $content->view('dashboard', ['data' => 'foo']);
  21. return $content;
  22. }

其中$content->body();方法可以接受任何可字符串化的对象作为参数,可以是字符串、数字、包含了__toString方法的对象,实现了RenderableHtmlable接口的对象,包括laravel的视图。

布局

laravel-admin的布局使用bootstrap的栅格系统,每行的长度是12,下面是几个简单的布局示例:

添加一行内容:

  1. $content->row('hello');
  2. ---------------------------------
  3. |hello |
  4. | |
  5. | |
  6. | |
  7. | |
  8. | |
  9. ---------------------------------

行内添加多列:

  1. $content->row(function(Row $row) {
  2. $row->column(4, 'foo');
  3. $row->column(4, 'bar');
  4. $row->column(4, 'baz');
  5. });
  6. ----------------------------------
  7. |foo |bar |baz |
  8. | | | |
  9. | | | |
  10. | | | |
  11. | | | |
  12. | | | |
  13. ----------------------------------
  14. $content->row(function(Row $row) {
  15. $row->column(4, 'foo');
  16. $row->column(8, 'bar');
  17. });
  18. ----------------------------------
  19. |foo |bar |
  20. | | |
  21. | | |
  22. | | |
  23. | | |
  24. | | |
  25. ----------------------------------

列中添加行:

  1. $content->row(function (Row $row) {
  2. $row->column(4, 'xxx');
  3. $row->column(8, function (Column $column) {
  4. $column->row('111');
  5. $column->row('222');
  6. $column->row('333');
  7. });
  8. });
  9. ----------------------------------
  10. |xxx |111 |
  11. | |---------------------|
  12. | |222 |
  13. | |---------------------|
  14. | |333 |
  15. | | |
  16. ----------------------------------

列中添加行, 行内再添加列:

  1. $content->row(function (Row $row) {
  2. $row->column(4, 'xxx');
  3. $row->column(8, function (Column $column) {
  4. $column->row('111');
  5. $column->row('222');
  6. $column->row(function(Row $row) {
  7. $row->column(6, '444');
  8. $row->column(6, '555');
  9. });
  10. });
  11. });
  12. ----------------------------------
  13. |xxx |111 |
  14. | |---------------------|
  15. | |222 |
  16. | |---------------------|
  17. | |444 |555 |
  18. | | | |
  19. ----------------------------------