ebess/ nova-collapsible-sidebar
Laravel Nova 的可折叠侧边栏。
0.1.2
2018-10-04 09:06 UTC
Requires
- php: >=7.1.0
- dev-master
- 0.1.2
- 0.1.1
- 0.1.0
- dev-dependabot/npm_and_yarn/express-4.18.2
- dev-dependabot/npm_and_yarn/decode-uri-component-0.2.2
- dev-dependabot/npm_and_yarn/loader-utils-1.4.2
- dev-dependabot/npm_and_yarn/css-what-2.1.3
- dev-dependabot/npm_and_yarn/url-parse-1.5.10
- dev-dependabot/npm_and_yarn/follow-redirects-1.14.8
- dev-dependabot/npm_and_yarn/path-parse-1.0.7
- dev-dependabot/npm_and_yarn/tar-2.2.2
- dev-dependabot/npm_and_yarn/dns-packet-1.3.4
- dev-dependabot/npm_and_yarn/hosted-git-info-2.8.9
- dev-dependabot/npm_and_yarn/lodash-4.17.21
- dev-dependabot/npm_and_yarn/y18n-3.2.2
- dev-dependabot/npm_and_yarn/elliptic-6.5.4
- dev-dependabot/npm_and_yarn/ini-1.3.7
- dev-dependabot/npm_and_yarn/http-proxy-1.18.1
- dev-dependabot/npm_and_yarn/lodash.mergewith-4.6.2
- dev-dependabot/npm_and_yarn/node-sass-4.14.1
- dev-dependabot/npm_and_yarn/websocket-extensions-0.1.4
This package is auto-updated.
Last update: 2024-09-08 21:50:52 UTC
README
此包为您提供了 Laravel Nova 管理面板的可折叠侧边栏。
安装
composer require ebess/nova-collapsible-sidebar
为了扩展默认侧边栏,您需要导出 nova 的布局。
mkdir -p resources/views/vendor/nova cp -r vendor/laravel/nova/resources/views/layout.blade.php resources/views/vendor/nova/layout.blade.php
在 resources/views/vendor/nova/layout.blade.php
中,您可以找到看起来类似于以下的侧边栏。
<!-- Sidebar --> <div class="min-h-screen flex-none pt-header min-h-screen w-sidebar bg-grad-sidebar px-6"> <a href="{{ Nova::path() }}"> <div class="absolute pin-t pin-l pin-r bg-logo flex items-center w-sidebar h-header px-6 text-white"> @include('nova::partials.logo') </div> </a> @foreach (Nova::availableTools(request()) as $tool) {!! $tool->renderNavigation() !!} @endforeach </div>
将普通 div
标签替换为 collapsible-sidebar
。
<collapsible-sidebar class="min-h-screen flex-none pt-header min-h-screen w-sidebar bg-grad-sidebar px-6"> <!-- --> </collapsible-sidebar>
这就完成了!现在您可以通过点击图标来切换侧边栏。 默认情况下,您也可以使用 Esc
来切换它。
此外,还有一些其他选项您可以配置。
将折叠状态保存到本地存储
<collapsible-sidebar class="..." persist> <!-- --> </collapsible-sidebar>
现在您可以通过按下 F2
而不是 Esc
来切换它
<collapsible-sidebar class="..." toggle-key-code="F2"> <!-- --> </collapsible-sidebar>