Help,Flyonui2.0 Dropdown component cannot be seen when clicked to expand #74
-
|
I am a Vue3 Vite Ts project and I am not sure if there is a configuration error. Please seek help <div class="flex gap-2 flex-wrap">
<div class="dropdown relative inline-flex">
<button
id="dropdown-default"
type="button"
class="dropdown-toggle btn btn-primary"
aria-haspopup="menu"
aria-expanded="false"
aria-label="Dropdown"
>
Dropdown
<span
class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"
></span>
</button>
<ul
class="dropdown-menu dropdown-open:opacity-100 opacity-0 transition-opacity block absolute top-full left-0 mt-2 min-w-60 bg-base-100 shadow-lg z-50"
role="menu"
aria-orientation="vertical"
aria-labelledby="dropdown-default"
>
<li>
<a class="dropdown-item text-base-content" href="#"
>My Profile</a
>
</li>
<li>
<a class="dropdown-item text-base-content" href="#">Settings</a>
</li>
<li>
<a class="dropdown-item text-base-content" href="#">Billing</a>
</li>
<li>
<a class="dropdown-item text-base-content" href="#">FAQs</a>
</li>
</ul>
</div>
</div>app.css @charset "UTF-8";
@import "tailwindcss";
@theme {
--font-roboto: "Roboto", sans-serif;
}
@plugin "@iconify/tailwind4";
@plugin "flyonui" {
themes:
light --default,
dark --prefersdark,
corporate,
gourmet,
luxury,
soft;
}
@source "./node_modules/flyonui/dist/index.js"; /* Require only if you want to use FlyonUI JS component */main.ts import "./assets/main.css";
import { createApp } from "vue";
import { createPinia } from "pinia";
import "flyonui/flyonui";
import "./app.css";
import App from "./App.vue";
import router from "./router";
const app = createApp(App);
app.use(createPinia());
app.use(router);
app.mount("#app");tailwind.config.js // tailwind.config.js
import flyonui from "flyonui";
import flyonuiPlugin from "flyonui/plugin";
export default {
content: ["./node_modules/flyonui/dist/js/*.js"],
plugins: [flyonui, flyonuiPlugin],
};router router.afterEach((to, from, failure) => {
if (!failure) {
setTimeout(() => {
window.HSStaticMethods.autoInit();
}, 100);
}
});``` |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 5 replies
-
|
Hello @kuyusea, For custom variants, instead of using plugin.js, switch to variants.css. To do this, add the following line to your app.css file (I think you missed this step): Our team is working on framework integration, and an update will be available in the documentation in 2-3 days. However, you can check this zip file: |
Beta Was this translation helpful? Give feedback.
-
|
What about Astro? I added both the plugin directive and the source directive in my global.css file @import "tailwindcss";
@plugin "flyonui";
@source "./node_modules/flyonui/dist/index.js";and the following in my base Layout.astro file before the closing body tag <script src="../../node_modules/flyonui/flyonui.js"></script>It seems to load all fine but for some reason the dropdown doesn't work. Also appears that some other components like the accordion with the popout variant will not have the popout effect. ---
import "./src/styles/global.css";
--- |
Beta Was this translation helpful? Give feedback.
-
|
You have the same issue, you also missed this import. plugin.js used to contain custom tailwindcss variants, example: |
Beta Was this translation helpful? Give feedback.
-
|
Ok that works, however the documentation says the following /* If you gitignored node_modules use below method */
@source "./node_modules/flyonui/dist/index.js"; /* Require only if you want to use FlyonUI JS component */as such I used the source directive. |
Beta Was this translation helpful? Give feedback.
-
|
Hello @telumletiferum, For the FlyonUI V2.0 installation, please refer to the following documentation: https://flyonui.com/docs/getting-started/quick-start/. As shown in the image, we have mentioned to include
Starting from TailwindCSS v4, there's no need to manually specify where to check for the classes, as the Tailwind CLI handles that automatically. However, it will respect any entries in the
|
Beta Was this translation helpful? Give feedback.
-
|
@PruthviPraj00 Thank you for providing the demo. It was very comfortable to just get started with the flyonui interface. I am not very familiar with the front-end framework and have tried it many times. I hope the framework and documentation can be more comprehensive. come on 💪🏻 |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your support, and our team is working on the framework integration docs. |
Beta Was this translation helpful? Give feedback.
Hello @kuyusea,
For custom variants, instead of using plugin.js, switch to variants.css.
To do this, add the following line to your app.css file (I think you missed this step):
Our team is working on framework integration, and an update will be available in the documentation in 2-3 days. However, you can check this zip file:
flyonui-vue.zip