时间戳

首页 > 解决方案 > materializeCSS - 带有标签作为页面链接的扩展导航栏

javascript - materializeCSS - 带有标签作为页面链接的扩展导航栏

问题描述

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

信息；我在 laravel 5.6 中工作。也许这有助于更快地找到解决方案。

所以; 我有一个带有下拉菜单的菜单。但我只想拥有标签而不是下拉菜单。正如在带有选项卡的扩展导航栏中看到的那样。

有两件事需要改变。

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

有什么办法可以做到这一点？

标签： javascriptcsslaravel-5materialize

解决方案

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

选项 1是使用产量部分组合。这将允许您在页面上定义它们需要在模板本身中显示的选项卡：

<!-- /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
        ],
        ...
    ]
])

至于外部页面点，由于选项卡中充满了<a href=''></a>元素，您不能使用它们链接到其他页面吗？

推荐阅读