materializeCSS - 带有选项卡的扩展导航栏作为页面链接

Question

我不太确定我是否可以使用 MaterializeCSS 框架实现我的想法。但如果可能的话，我想看看是否有人可以帮助我。

供参考；我在 laravel 5.6 工作。也许这有助于更快地找到解决方案。

所以；我有一个带有下拉菜单的菜单。但是我只想拥有选项卡而不是下拉菜单。正如在 Extended Navbar with Tabs.

中看到的

有两件事需要改变。

选项卡需要在单击菜单项时更改。我不确定这将如何工作以及是否可以工作。
标签需要在点击时重定向到一个页面。并且不加载内部（页面上）内容。

有什么办法可以实现吗？

Answer 1

根据您希望如何使用 Blade 模板，您可以选择 2 个选项。

选项 1 将使用 yield-section 组合。这将允许您在页面上定义需要在模板中显示的选项卡：

<!-- /resources/path/to/view.blade.php -->
@section('nav-tabs')
<div class="nav-content">
  <ul class="tabs tabs-transparent">
    <li class="tab"><a href="#test1">Test 1</a></li>
    <li class="tab"><a class="active" href="#test2">Test 2</a></li>
    <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
    <li class="tab"><a href="#test4">Test 4</a></li>
  </ul>
</div>
@endsection

<!-- /resourcs/path/to/navbar.blade.php -->
<nav class="nav-extended">
    <div class="nav-wrapper">
        <!-- your nav bar -->
    </div>
    @yield('nav-tabs')
</nav>

选项 2 将使用来自控制器的新参数。然后可以在模板中对其进行解析，并在您从控制器传递数据时显示选项卡：

<!-- /resourcs/path/to/navbar.blade.php -->
<nav class="nav-extended">
  <div class="nav-wrapper">
    <!-- your nav bar -->
  </div>
  @isset($tabs)
    <div class="nav-content">
      <ul class="tabs tabs-transparent">
        @foreach($tabs as $tab)
          <li class="tab {{$tab['classes']}}"><a href="{{$tab['href']}}">{{$tab['label']}}</a></li>
        @endforeach
      </ul>
    </div>
  @endisset
</nav>

// PageController@action
...
return view("blade/template", [
    'tabs' => [
        [
            'title'   => 'Tab title',
            'href'    => '/go/to/this/page',
            'classes' => '', // Add additional classes to tabs if you need them
        ],
        ...
    ]
])

至于外页点，既然tabs里面都是<a href=''></a>元素，那能不能不用来link到其他页面？

materializeCSS - 带有选项卡的扩展导航栏作为页面链接

materializeCSS - Extended Navbar with Tabs as links to pages

javascript

css

materialize

laravel-5