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

更新日期: 2019-06-21 阅读次数: 335 字数: 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,
];

爱评论不评论

近期节日

2019年07月23日 大暑
2019年07月30日 非洲妇女日
2019年08月01日 八一建军节
2019年08月06日 国际电影节
2019年08月07日 七夕
2019年08月08日 立秋
2019年08月15日 日本投降日
2019年08月15日 中元节
2019年08月23日 处暑
2019年09月03日 抗日胜利纪念日
2019年09月08日 白露
2019年09月08日 国际扫盲日
查看更多节日