自定义头部导航条

从版本1.5.6开始，可以在顶部导航条上添加html元素了, 打开app/Admin/bootstrap.php：

  1. use Encore\Admin\Facades\Admin;
  3. Admin::navbar(function (\Encore\Admin\Widgets\Navbar $navbar) {
  5.     $navbar->left('html...');
  7.     $navbar->right('html...');
  9. });

left和right方法分别用来在头部的左右两边添加内容，方法参数可以是任何可以渲染的对象(实现了Htmlable、Renderable接口或者包含__toString()方法的对象)或字符串

左侧添加示例

举个例子，比如在左边添加一个搜索条，先创建一个blade视图resources/views/search-bar.blade.php：

  1. <style>
  3. .search-form {
  4.     width: 250px;
  5.     margin: 10px 0 0 20px;
  6.     border-radius: 3px;
  7.     float: left;
  8. }
  9. .search-form input[type="text"] {
  10.     color: #666;
  11.     border: 0;
  12. }
  14. .search-form .btn {
  15.     color: #999;
  16.     background-color: #fff;
  17.     border: 0;
  18. }
  20. </style>
  22. <form action="/admin/posts" method="get" class="search-form" pjax-container>
  23.     <div class="input-group input-group-sm ">
  24.         <input type="text" name="title" class="form-control" placeholder="Search...">
  25.         <span class="input-group-btn">
  26.             <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
  27.           </span>
  28.     </div>
  29. </form>

然后加入头部导航条：

  1. $navbar->left(view('search-bar'));

右侧添加示例

导航右侧只能添加<li>标签, 比如要添加一些提示图标，新建渲染对象app/Admin/Extensions/Nav/Links.php

  1. <?php
  3. namespace App\Admin\Extensions\Nav;
  5. class Links
  6. {
  7.     public function __toString()
  8.     {
  9.         return <<<HTML
  11. <li>
  12.     <a href="#">
  13.       <i class="fa fa-envelope-o"></i>
  14.       <span class="label label-success">4</span>
  15.     </a>
  16. </li>
  18. <li>
  19.     <a href="#">
  20.       <i class="fa fa-bell-o"></i>
  21.       <span class="label label-warning">7</span>
  22.     </a>
  23. </li>
  25. <li>
  26.     <a href="#">
  27.       <i class="fa fa-flag-o"></i>
  28.       <span class="label label-danger">9</span>
  29.     </a>
  30. </li>
  32. HTML;
  33.     }
  34. }

然后加入头部导航条：

  1. $navbar->right(new \App\Admin\Extensions\Nav\Links());

或者用下面的html加入下拉菜单：

  1. <li class="dropdown notifications-menu">
  2. <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  3.   <i class="fa fa-bell-o"></i>
  4.   <span class="label label-warning">10</span>
  5. </a>
  6. <ul class="dropdown-menu">
  7.   <li class="header">You have 10 notifications</li>
  8.   <li>
  9.     <!-- inner menu: contains the actual data -->
  10.     <ul class="menu">
  11.       <li>
  12.         <a href="#">
  13.           <i class="fa fa-users text-aqua"></i> 5 new members joined today
  14.         </a>
  15.       </li>
  16.       <li>
  17.         <a href="#">
  18.           <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
  19.           page and may cause design problems
  20.         </a>
  21.       </li>
  22.       <li>
  23.         <a href="#">
  24.           <i class="fa fa-users text-red"></i> 5 new members joined
  25.         </a>
  26.       </li>
  28.       <li>
  29.         <a href="#">
  30.           <i class="fa fa-shopping-cart text-green"></i> 25 sales made
  31.         </a>
  32.       </li>
  33.       <li>
  34.         <a href="#">
  35.           <i class="fa fa-user text-red"></i> You changed your username
  36.         </a>
  37.       </li>
  38.     </ul>
  39.   </li>
  40.   <li class="footer"><a href="#">View all</a></li>
  41. </ul>
  42. </li>

更多的组件可以参考Bootstrap