laravel backpack 管理后台编辑页面布局优化

更新日期: 2019-06-21 阅读次数: 6457 字数: 252 分类: backpack

优化后的效果

  • 一行显示多个 field
  • 使用标签页分组显示

laravel backpack 管理后台编辑页面布局优化

设置 field 宽度

默认是占一整行,不但浪费空间,而且难看的不行。

找到一个优化的配置,可以使用 bootstrap 的自适应布局设置。

https://github.com/Laravel-Backpack/CRUD/issues/30

$this->crud->addFields([
  'name' => 'name',
  'type' => 'text',
  'label' => '姓名',
  'wrapperAttributes' => [
     'class' => 'form-group col-md-6',
  ],
]);

标签页 tabbed form

当一个编辑页面包含的编辑项非常多时,会显得异常杂乱,可以使用标签页进行分组。

但是注意, vendor/backpack/crud/src/resources/views/inc/show_tabbed_fields.blade.php 这个实现对于中文有 bug,无法生成中文的 html id,所以,当 tab 标识中使用中文时,最好加上数字或者字母的前缀,以绕过这个 Bug。

https://laravel-backpack.readme.io/v3.3/docs/advanced-features#section-tabbed-forms

$tab1 = "1: 基本信息";
$tab2 = "2: 代理设置";

$tel = [
     'name' => 'tel',
     'label' => '手机号',
     'tab' => $tab1,
];

$store_name = [
    'name'    => 'store_name',
    'label'   => '店铺名称',
    'tab' => $tab2,
];

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式