如何将Tailwdui JS集成到Rails应用程序中 [英] how to integrate tailwindui JS in rails app

问题描述

我使用的是esBuild的Rails7。我正在使用TRANWARD用户界面。当仅使用CSS组件时，它可以正常工作。当组件使用JS时，它不再工作。例如，默认情况下，下拉菜单是打开的，但我无法将其关闭。我添加了Required(‘@tavidcss/ui’) 在trawind.config.js中

Rails 7.0.0.alpha2 Ruby 3.0.2p107 "；@tawincss/ui"；："；^0.7.2"；

有什么想法吗？

推荐答案

我通过将alpine.js添加到我的应用程序中，获得了需要在esBuild上使用rails 7的TailWind UI组件。https://alpinejs.dev/start-here

Alpine.js可用于制作下拉菜单、切换、导航栏等动画。TailwinUI文档在一些示例代码中使用了它。

您可以通过CDN使用，也可以打包安装。

如果您将其用作CDN，则只需将当前版本号放入URL并将脚本标记添加到代码上方即可。

<script defer src="https://unpkg.com/alpinejs@3.7.1/dist/cdn.min.js"></script>
  <div x-data="{ open: false }">
    <button type="button" @click="open = ! open" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
      Button text
    </button>
  <div x-show="open" @click.outside="open = false">Contents...</div>
</div>

我选择安装NPM包alpinejs和alpine-turbo-drive-adapter，这样我就不必在我的视图中全部添加脚本标记。在app/javascript/controllers/applications.js中，我添加了导入语句。

import { Application } from "@hotwired/stimulus"
import Alpine from 'alpinejs'
import 'alpine-turbo-drive-adapter'

const application = Application.start()

// Configure Stimulus development experience
application.debug = false

window.Stimulus   = application
window.Alpine = Alpine

Alpine.start()

export { application }

另一件需要注意的事情是，您不能像使用Bootstrap那样将需要JavaScript的TailwinUI组件直接放入您的代码中。您必须签出TailwinUI代码中的注释，并配置Apline.js以执行它们建议的操作。

例如，如果您签出&q；简单切换，则注释说明要更改什么以启用/禁用切换https://tailwindui.com/components/application-ui/forms/toggles

<!-- This example requires Tailwind CSS v2.0+ -->
<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
<button type="button" class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" role="switch" aria-checked="false">
  <span class="sr-only">Use setting</span>
  <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
  <span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"></span>
</button>

如果您查看TailwinUI文档https://tailwindui.com/documentation#using-html-and-your-own-js，它们给出了一个如何使用alpine.js使切换功能工作的示例。本质上，您只需将x-data属性isOn从True切换到False，这样菜单、下拉菜单等...打开并关闭。

  <span
    x-data="{ isOn: false }"
    @click="isOn = !isOn"
    :aria-checked="isOn"
    :class="{'bg-indigo-600': isOn, 'bg-gray-200': !isOn }"
    class="bg-gray-200 relative inline-block flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline"
    role="checkbox"
    tabindex="0"
  >
    <span
      aria-hidden="true"
      :class="{'translate-x-5': isOn, 'translate-x-0': !isOn }"
      class="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200"
    ></span>
  </span>

这篇关于如何将Tailwdui JS集成到Rails应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！