Попутный ветер CSS + мобильная навигационная панель Alpine не работает - PullRequest
Новая
       33

Попутный ветер CSS + мобильная навигационная панель Alpine не работает

0 голосов
/ 07 мая 2020

У меня все работает с одним из примеров, найденных на веб-сайте, но по какой-то причине мне не удается отобразить мобильную навигационную панель при нажатии. Может кто-нибудь взглянуть и сказать мне, что мне не хватает, пожалуйста? .

Ответы [ 2 ]

1 голос
/ 07 мая 2020

Я разобрался. Я никогда не регистрировал состояние для навигационной панели, поэтому он не запускал событие click. Тег навигации должен иметь вид:

<nav class="bg-gray-900 x-data="{ open: false }">

0 голосов
/ 07 мая 2020

У меня мобильный заголовок работает со следующим кодом, я заметил, что 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 .

...