Мобильная навигационная панель TailwindCSS + Alpine не работает
У меня все работает с одним из примеров, найденных на веб-сайте, но по какой-то причине я не могу заставить мобильную навигационную панель отображаться при нажатии. Может кто-нибудь взглянуть и сказать мне, что мне не хватает, пожалуйста?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Test</title>
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head>
<div>
<nav class="bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<%= img_tag(Routes.static_path(@conn, "/images/logo.png")) %>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
<a href="#" class="nav-link">Dashboard</a>
<a href="#" class="nav-link">Team</a>
<a href="#" class="nav-link">Projects</a>
<a href="#" class="nav-link">Calendar</a>
<a href="#" class="nav-link">Reports</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button class="p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-gray-700" aria-label="Notifications">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div @click.away="open = false" class="ml-3 relative" x-data="{open: false }">
<div>
<button @click="open = !open" class="max-w-xs flex items-center text-sm rounded-full text-white focus:outline-none focus:shadow-solid">
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
<div class="py-1 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical">
<a href="#" class="user-menu" role="menuitem">Your Profile</a>
<a href="#" class="user-menu" role="menuitem">Settings</a>
<a href="#" class="user-menu" role="menuitem">Sign out</a>
</div>
</div>
</div>
</div>
</div>
<!-- code that is displayed when viewing mobile screens -->
<div class="-mr-2 flex md:hidden">
<button @click="open = !open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
<svg class="block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path x-show="!open" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div :class="{ 'block': open, 'hidden md:hidden': !open }" @click.away="open = false" x-data="{open: false}" x-show="open">
<div class="px-2 pt-2 pb-3 sm:px-3">
<a href="#" class="nav-link">Dashboard</a>
<a href="#" class="nav-link">Team</a>
<a href="#" class="nav-link">Projects</a>
<a href="#" class="nav-link">Calendar</a>
<a href="#" class="nav-link">Reports</a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">tom@example.com</div>
</div>
</div>
<div class="mt-3 px-2">
<a href="#" class="user-menu">Your Profile</a>
<a href="#" class="user-menu">Settings</a>
<a href="#" class="user-menu">Sign out</a>
</div>
</div>
</div>
<!-- end mobile screens -->
</nav>
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<h1 class="text-3xl font-bold leading-tight text-gray-900">
Dashboard
</h1>
</div>
</header>
<main>
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<%= @inner_content %>
</div>
</main>
</div>
</html>
Я работаю над тем, чтобы получить весь этот пример в коде, чтобы помочь, и обновлю его, как только он у меня заработает.
2 ответа
Я понял. Я никогда не регистрировал состояние для навигационной панели, поэтому он не запускал событие щелчка. Тег nav должен быть таким:
<nav class="bg-gray-900 x-data="{ open: false }">
У меня мобильный заголовок работает со следующим кодом, я заметил, что open не переключается в мобильной версии, поэтому, возможно, это событие не обязательно должно быть компонентом Alpine.js.
Если это не совсем то, что вы искали, не стесняйтесь оставлять комментарий, поясняющий поведение, которое вам нужно для мобильной навигации (в настоящее время я думаю, он просто отображает все на мобильных точках останова).
Обратите внимание на то, что я избавился от x-show и :class обязательна в пользу всегда применения md:hidden класс, так как я не мог найти, где вы хотите переключить open от.
<div class="md:hidden" @click.away="open = false" x-data="{open: false}">
<div class="px-2 pt-2 pb-3 sm:px-3">
<a href="#" class="nav-link">Dashboard</a>
<a href="#" class="nav-link">Team</a>
<a href="#" class="nav-link">Projects</a>
<a href="#" class="nav-link">Calendar</a>
<a href="#" class="nav-link">Reports</a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">tom@example.com</div>
</div>
</div>
<div class="mt-3 px-2">
<a href="#" class="user-menu">Your Profile</a>
<a href="#" class="user-menu">Settings</a>
<a href="#" class="user-menu">Sign out</a>
</div>
</div>
</div>
Приведенный выше пример доступен для просмотра / редактирования в этом CodePen.