backpack / theme-tabler
基于Tabler和Bootstrap v5的Backpack v6 UI。
Requires
- backpack/crud: ^6.2.1
Requires (Dev)
- orchestra/testbench: ~5|~6
- phpunit/phpunit: ~9.0
This package is auto-updated.
Last update: 2024-09-06 13:25:54 UTC
README
此包为Laravel的Backpack管理面板提供主题,使用Tabler和隐式Bootstrap v5。Tabler之上的所有审美定制都是在单独的CSS文件中完成的,如果不满意可以轻松编辑。
此包内的文件结构相对于Backpack v3-v5有所变化。我们将其拆分为更小、更细致的视图。这样,如果您需要通过发布视图来定制某些内容,您的更改就会很小。如果您想要旧的文件结构,可以使用CoreUI v4或CoreUI v2主题。
截图
安装
自动安装
由于这是一个第三方主题,您可以使用以下方式快速安装:
php artisan backpack:require:theme-tabler
或者,按照以下手动安装过程进行。
手动安装
步骤 1. 通过Composer安装
composer require backpack/theme-tabler
步骤 2. 前往config/backpack/ui.php
并更改您的视图命名空间
- 'view_namespace' => 'backpack::', + 'view_namespace' => 'backpack.theme-tabler::',
步骤 3. (可选) 发布主题配置文件
php artisan vendor:publish --tag="theme-tabler-config"
配置
注意:在此处设置的任何值将覆盖此主题在使用时定义在config/backpack/ui.php中的值。
更改布局:简单地选择一个布局
/** * Possible values: horizontal, horizontal_dark, horizontal_overlap, vertical, * vertical_dark, vertical_transparent (legacy theme), right_vertical, right_vertical_dark, right_vertical_transparent */ 'layout' => 'horizontal_overlap',
更改认证布局:选择一个登录页面布局
'auth_layout' => 'default', //Possible values: default, illustration, cover
添加CSS:您可以在此处轻松加载自己的额外CSS样式。
'styles' => [ base_path('vendor/backpack/theme-tabler/resources/assets/css/color-adjustments.css'), base_path('vendor/backpack/theme-tabler/resources/assets/css/colors.css'), // add your css here ],
添加JS:您可以在此处轻松包含自己的JS文件。
'scripts' => [],
更多配置:充分利用theme-tabler。
- 更多控制
暗黑模式
- 使
容器
流动以利用空间 - 选择
头部
、侧边栏
应该如何
'options' => [ /** * The available color modes. */ 'colorModes' => [ 'system' => 'la-desktop', 'light' => 'la-sun', 'dark' => 'la-moon', ], /** * The color mode used by default. */ 'defaultColorMode' => 'system', // system, light, dark /** * When true, a switch is displayed to let admins choose their favorite theme mode. * When false, the theme will only use the "defaultColorMode" set above. * In case "defaultColorMode" is null, system is the default. */ 'showColorModeSwitcher' => true, /** * Fix the top-header component (present in "vertical_transparent") and the menu when the layout type is set as "horizontal". * This value is skipped when the layout type is horizontal-overlap, using false as default. */ 'useStickyHeader' => false, /** * When true, the content area will take the whole screen width. */ 'useFluidContainers' => false, /** * When true, the sidebar content for vertical layouts will not scroll with the rest of the content. */ 'sidebarFixed' => false, /** * When true, horizontal layouts will display the classic top bar on top to free some space when multiple nav items are used. */ 'doubleTopBarInHorizontalLayouts' => false, /** * When true, the password input will have a toggle button to show/hide the password. */ 'showPasswordVisibilityToggler' => true, ],
卸载
要卸载此Backpack主题
- 删除Composer包。例如:
composer remove backpack/theme-tabler
- 删除配置文件。例如:
rm -rf config/backpack/theme-tabler.php
- 安装新主题(例如:
php artisan backpack:require:theme-coreuiv4
)或更改view_namespace
为要激活的主题。
覆盖
如果您需要以任何方式更改blade文件,可以轻松地将文件复制粘贴到您的应用程序中,并按需修改该文件。如果这样做到正确的目录,您的文件将用于代替包中的文件。但请注意,您将不会收到该文件的任何更新。
您复制的文件越多,定制的越多,升级到较新版本就越困难。因此,请尽量避免过度定制。
# create the custom directory if it's not already there mkdir -p resources/views/vendor/backpack/theme-tabler # copy the blade file inside the folder we created above cp -i vendor/backpack/crud/src/resources/views/ui/dashboard.blade.php resources/views/vendor/backpack/theme-tabler/dashboard.blade.php
变更日志
更改记录在GitHub上此处。请参阅发布标签。
贡献
请参阅contributing.md以获取待办事项和如何操作。
安全
如果您发现任何安全问题,请通过hello@backpackforlaravel.com发送电子邮件,而不是使用问题跟踪器。
致谢
许可证
本项目遵循MIT协议发布,因此您可以在任何Backpack & Laravel项目上安装它。请参阅许可文件获取更多信息。