backpack/theme-tabler

基于Tabler和Bootstrap v5的Backpack v6 UI。

1.2.13 2024-09-06 13:24 UTC

README

Latest Version on Packagist Total Downloads The Whole Fruit Manifesto

此包为Laravel的Backpack管理面板提供主题,使用Tabler和隐式Bootstrap v5。Tabler之上的所有审美定制都是在单独的CSS文件中完成的,如果不满意可以轻松编辑。

此包内的文件结构相对于Backpack v3-v5有所变化。我们将其拆分为更小、更细致的视图。这样,如果您需要通过发布视图来定制某些内容,您的更改就会很小。如果您想要旧的文件结构,可以使用CoreUI v4或CoreUI v2主题。

截图

all-layouts

安装

自动安装

由于这是一个第三方主题,您可以使用以下方式快速安装:

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主题

  1. 删除Composer包。例如:composer remove backpack/theme-tabler
  2. 删除配置文件。例如:rm -rf config/backpack/theme-tabler.php
  3. 安装新主题(例如: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项目上安装它。请参阅许可文件获取更多信息。