dcat-admin

dcat-admin


自定义头部导航条

<h1>自定义头部导航条</h1> <p>如果要在顶部导航条上添加html元素, 打开<code>app/Admin/bootstrap.php</code>:</p> <pre><code class="language-php">use Dcat\Admin\Layout\Navbar; use Dcat\Admin\Admin; Admin::navbar(function (Navbar $navbar) { $navbar-&amp;gt;left('html...'); $navbar-&amp;gt;right('html...'); });</code></pre> <p><code>left</code>和<code>right</code>方法分别用来在头部的左右两边添加内容,方法参数可以是任何可以渲染的对象(实现了<code>Htmlable</code>、<code>Renderable</code>接口或者包含<code>__toString()</code>方法的对象)或字符串</p> <h2>添加下拉面板</h2> <p>在模板文件中加上</p> <pre><code class="language-html">&amp;lt;ul class=&amp;quot;nav navbar-nav&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;dropdown dropdown-notification nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link nav-link-label&amp;quot; href=&amp;quot;#&amp;quot; data-toggle=&amp;quot;dropdown&amp;quot; aria-expanded=&amp;quot;true&amp;quot;&amp;gt;&amp;lt;i class=&amp;quot;ficon feather icon-bell&amp;quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;span class=&amp;quot;badge badge-pill badge-primary badge-up&amp;quot;&amp;gt;5&amp;lt;/span&amp;gt;&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;dropdown-menu dropdown-menu-media dropdown-menu-right &amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;dropdown-menu-header&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;dropdown-header m-0 p-2&amp;quot;&amp;gt; &amp;lt;h3 class=&amp;quot;white&amp;quot;&amp;gt;5 New&amp;lt;/h3&amp;gt;&amp;lt;span class=&amp;quot;grey darken-2&amp;quot;&amp;gt;App Notifications&amp;lt;/span&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;scrollable-container media-list ps ps--active-y&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;d-flex justify-content-between&amp;quot; href=&amp;quot;javascript:void(0)&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;media d-flex align-items-start&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;media-left&amp;quot;&amp;gt;&amp;lt;i class=&amp;quot;feather icon-plus-square font-medium-5 primary&amp;quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;div class=&amp;quot;media-body&amp;quot;&amp;gt; &amp;lt;h6 class=&amp;quot;primary media-heading&amp;quot;&amp;gt;You have new order!&amp;lt;/h6&amp;gt;&amp;lt;small class=&amp;quot;notification-text&amp;quot;&amp;gt; Are your going to meet me tonight?&amp;lt;/small&amp;gt; &amp;lt;/div&amp;gt;&amp;lt;small&amp;gt; &amp;lt;time class=&amp;quot;media-meta&amp;quot; datetime=&amp;quot;2015-06-11T18:29:20+08:00&amp;quot;&amp;gt;9 hours ago&amp;lt;/time&amp;gt;&amp;lt;/small&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/a&amp;gt;&amp;lt;a class=&amp;quot;d-flex justify-content-between&amp;quot; href=&amp;quot;javascript:void(0)&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;media d-flex align-items-start&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;media-left&amp;quot;&amp;gt;&amp;lt;i class=&amp;quot;feather icon-download-cloud font-medium-5 success&amp;quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;div class=&amp;quot;media-body&amp;quot;&amp;gt; &amp;lt;h6 class=&amp;quot;success media-heading red darken-1&amp;quot;&amp;gt;99% Server load&amp;lt;/h6&amp;gt; &amp;lt;small class=&amp;quot;notification-text&amp;quot;&amp;gt;You got new order of goods.&amp;lt;/small&amp;gt; &amp;lt;/div&amp;gt;&amp;lt;small&amp;gt; &amp;lt;time class=&amp;quot;media-meta&amp;quot; datetime=&amp;quot;2015-06-11T18:29:20+08:00&amp;quot;&amp;gt;5 hour ago&amp;lt;/time&amp;gt;&amp;lt;/small&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/a&amp;gt;&amp;lt;a class=&amp;quot;d-flex justify-content-between&amp;quot; href=&amp;quot;javascript:void(0)&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;media d-flex align-items-start&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;media-left&amp;quot;&amp;gt;&amp;lt;i class=&amp;quot;feather icon-alert-triangle font-medium-5 danger&amp;quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;div class=&amp;quot;media-body&amp;quot;&amp;gt; &amp;lt;h6 class=&amp;quot;danger media-heading yellow darken-3&amp;quot;&amp;gt;Warning notifixation &amp;lt;/h6&amp;gt;&amp;lt;small class=&amp;quot;notification-text&amp;quot;&amp;gt;Server have 99% CPU usage.&amp;lt;/small&amp;gt; &amp;lt;/div&amp;gt;&amp;lt;small&amp;gt; &amp;lt;time class=&amp;quot;media-meta&amp;quot; datetime=&amp;quot;2015-06-11T18:29:20+08:00&amp;quot;&amp;gt;Today&amp;lt;/time&amp;gt;&amp;lt;/small&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/a&amp;gt; &amp;lt;div class=&amp;quot;ps__rail-x&amp;quot; style=&amp;quot;left: 0px; bottom: 0px;&amp;quot;&amp;gt;&amp;lt;div class=&amp;quot;ps__thumb-x&amp;quot; tabindex=&amp;quot;0&amp;quot; style=&amp;quot;left: 0px; width: 0px;&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;div class=&amp;quot;ps__rail-y&amp;quot; style=&amp;quot;top: 0px; right: 0px; height: 254px;&amp;quot;&amp;gt;&amp;lt;div class=&amp;quot;ps__thumb-y&amp;quot; tabindex=&amp;quot;0&amp;quot; style=&amp;quot;top: 0px; height: 184px;&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;dropdown-menu-footer&amp;quot;&amp;gt;&amp;lt;a class=&amp;quot;dropdown-item p-1 text-center&amp;quot; href=&amp;quot;javascript:void(0)&amp;quot;&amp;gt;Read all notifications&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt;</code></pre> <p>使用</p> <pre><code class="language-php">$navbar-&amp;gt;right(view('...'));</code></pre> <h2>添加下拉菜单</h2> <pre><code class="language-html">&amp;lt;ul class=&amp;quot;nav navbar-nav&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;dropdown dropdown-language nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;dropdown-toggle nav-link&amp;quot; href=&amp;quot;#&amp;quot; id=&amp;quot;dropdown-flag&amp;quot; data-toggle=&amp;quot;dropdown&amp;quot;&amp;gt; &amp;lt;i class=&amp;quot;flag-icon flag-icon-us&amp;quot;&amp;gt;&amp;lt;/i&amp;gt; &amp;lt;span class=&amp;quot;selected-language&amp;quot;&amp;gt;English&amp;lt;/span&amp;gt; &amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;dropdown-menu&amp;quot; aria-labelledby=&amp;quot;dropdown-flag&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;dropdown-item&amp;quot; href=&amp;quot;#&amp;quot; data-language=&amp;quot;en&amp;quot;&amp;gt; &amp;lt;a&amp;gt;&amp;lt;i class=&amp;quot;flag-icon flag-icon-us&amp;quot;&amp;gt;&amp;lt;/i&amp;gt; English&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;dropdown-item&amp;quot; href=&amp;quot;#&amp;quot; data-language=&amp;quot;fr&amp;quot;&amp;gt; &amp;lt;a&amp;gt;&amp;lt;i class=&amp;quot;flag-icon flag-icon-fr&amp;quot;&amp;gt;&amp;lt;/i&amp;gt; French&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;dropdown-item&amp;quot; href=&amp;quot;#&amp;quot; data-language=&amp;quot;de&amp;quot;&amp;gt; &amp;lt;a&amp;gt;&amp;lt;i class=&amp;quot;flag-icon flag-icon-de&amp;quot;&amp;gt;&amp;lt;/i&amp;gt; German&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt;</code></pre> <p>使用</p> <pre><code class="language-php">$navbar-&amp;gt;right(view('...'));</code></pre> <p>更多的组件可以参考<a href="https://github.com/ColorlibHQ/AdminLTE">AdminLTE3</a>。</p> <h2>修改默认用户面板</h2> <p>打开<code>app/Admin/bootstrap.php</code>,写入</p> <pre><code class="language-php">admin_inject_section(Admin::SECTION['NAVBAR_USER_PANEL'], function () { return view('admin.partials.navbar-user-panel', ['user' =&amp;gt; Admin::user()]); });</code></pre> <p><code>navbar-user-panel.blade.php</code>视图内容</p> <pre><code class="language-php">@if($user) &amp;lt;li class=&amp;quot;dropdown dropdown-user nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;dropdown-toggle nav-link dropdown-user-link&amp;quot; href=&amp;quot;#&amp;quot; data-toggle=&amp;quot;dropdown&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;user-nav d-sm-flex d-none&amp;quot;&amp;gt; &amp;lt;span class=&amp;quot;user-name text-bold-600&amp;quot;&amp;gt;{{ $user-&amp;gt;name }}&amp;lt;/span&amp;gt; &amp;lt;span class=&amp;quot;user-status&amp;quot;&amp;gt;&amp;lt;i class=&amp;quot;fa fa-circle text-success&amp;quot;&amp;gt;&amp;lt;/i&amp;gt; {{ trans('admin.online') }}&amp;lt;/span&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;span&amp;gt; &amp;lt;img class=&amp;quot;round&amp;quot; src=&amp;quot;{{ $user-&amp;gt;getAvatar() }}&amp;quot; alt=&amp;quot;avatar&amp;quot; height=&amp;quot;40&amp;quot; width=&amp;quot;40&amp;quot; /&amp;gt; &amp;lt;/span&amp;gt; &amp;lt;/a&amp;gt; &amp;lt;div class=&amp;quot;dropdown-menu dropdown-menu-right&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;{{ admin_url('auth/setting') }}&amp;quot; class=&amp;quot;dropdown-item&amp;quot;&amp;gt; &amp;lt;i class=&amp;quot;feather icon-user&amp;quot;&amp;gt;&amp;lt;/i&amp;gt; {{ trans('admin.setting') }} &amp;lt;/a&amp;gt; &amp;lt;div class=&amp;quot;dropdown-divider&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;a class=&amp;quot;dropdown-item&amp;quot; href=&amp;quot;{{ admin_url('auth/logout') }}&amp;quot;&amp;gt; &amp;lt;i class=&amp;quot;feather icon-power&amp;quot;&amp;gt;&amp;lt;/i&amp;gt; {{ trans('admin.logout') }} &amp;lt;/a&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/li&amp;gt; @endif</code></pre>

页面列表

ITEM_HTML