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

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

爱评论不评论

近期节日

2020年04月02日 国际儿童图书日
2020年04月03日 寒食节
2020年04月04日 清明节
2020年04月07日 世界卫生日
2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
2020年04月30日 全国交通安全反思日
查看更多节日