Question

我正在尝试使用Adam Wathan's responsive navbar 和vuejs来使用Alpinejs，但是我正在尝试是否可以使其与Alpinejs一起使用。

urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/', include('allauth.urls')),
    path('', include('core.urls', namespace='core')),
    path('score/', include('score.urls', namespace='score')),
    path('register/', user_views.register, name='register'),

]

如果您想知道Alpine是否已经加载，可以尝试使用简单的下拉开关，但是使用这种方法我很难使其正常工作。

app.blade.php

<head>

  [...]

      <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

  [...]

</head>

Answer 1

您无需添加脚本即可打开和关闭下拉菜单。您需要在父div（到按钮和下拉列表）div中定义x-data。然后在按钮和/或下拉元素中引用它。

一个简单的例子：

<div x-data="{isOpen : false}"> 
  
  <button x-on:click="isOpen = !isOpen" class="button">Menu</button>
  <!-- you need to toggle isOpen state on click. You can also use @click just like in vue -->

   <div x-show="isOpen" class="dropdown"> <!-- x-show to show and hide -->
     <a href="#account" class="your classes">Account settings</a>
     <a href="#support" class="">Support</a>
   </div>
    
</div>

使用高山js进行下拉菜单就是全部。

问：如何在Laravel中使用Alpinejs和tailwindcss？

1 个答案: