如何使用 Laravel 和 Tailwind CSS 创建下拉导航

编程问答 2022-05-26

问题描述

这是为了那些在 Google 上搜索过“使用 Laravel Breeze 的下拉导航”（或变体）但没有找到满意解决方案的人的利益。

在我的 Laravel 8.x 项目中为 Spatie 的 Permissions 包创建 UI 的过程中，我想为它的各个部分制作一个下拉导航。经过大量搜索后，我无法想出一种简单而优雅的方法来完成此操作，因此我仔细检查了已经存在的内容并弄清楚了。也许我没有找对地方，但就这样吧。我欢迎任何能让这件事变得更好的评论。

首先，在 web.PHP 中创建路线：

Route::get('/roles',AdminController::class . '@roles')->name('roles');
Route::get('/permissions',AdminController::class . '@permissions')->name('permissions');
Route::get('/user_roles',AdminController::class . '@userRoles')->name('user_roles');

接下来，在您的 navigation.blade.PHP 中：

<!-- Admin Dropdown -->
<div class="hidden sm:flex sm:items-center sm:ml-6 pt-1">
    <x-dropdown align="right" width="48">
        <x-slot name="trigger">
            <button class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
                <div>Admin</div>

                <div class="ml-1">
                    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </div>
            </button>
        </x-slot>

        <x-slot name="content">
            <x-dropdown-link :href="route('roles')" active="request()->routeIs('roles')">
                {{ __('Roles') }}
            </x-dropdown-link>
            <x-dropdown-link :href="route('permissions')" active="request()->routeIs('permissions')">
                {{ __('Permissions') }}
            </x-dropdown-link>
            <x-dropdown-link :href="route('user_roles')" active="request()->routeIs('user_roles')">
                {{ __('User Roles') }}
            </x-dropdown-link>
        </x-slot>
    </x-dropdown>
</div>

注意：这假设您已经有一个 navigation.blade.PHP。这是在您安装 Laravel Breeze 时自动创建的。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

breezedropdownlaravellaraveltailwind-css