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

优化后的效果

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

设置 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 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式