Question

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

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

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

有两件事需要更改。

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

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

Answer 1

根据您希望使用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>元素，您不能使用这些元素链接到其他页面吗？

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

1 个答案: