Comments (14)
shinokada
commented on August 17, 2024
2
@codinkai If you are using SvelteKit, I recommend using Flowbite-Svelte. It has an Accordion component.
Here is the page how to get started.
from flowbite.
shinokada
commented on August 17, 2024
1
I requested to add Flowbite to Svelte-add.
from flowbite.
zoltanszogyenyi
commented on August 17, 2024
1
Hey @shinokada,
Thanks for the contribution!
Flowbite is a pretty new library and we're doing our best to keep up with the demand for new components and technology support.
For Q2 this year we expect to launch a standalone React and Vue.js library, and we would have plans for a Svelte integration later this year.
However, if someone else would pull up the sleeves to create an integration for Svelte, they would have our full support and collaboration.
from flowbite.
shinokada
commented on August 17, 2024
1
I found the work around for now.
I can solve the problem by adding rel="external" to a link.
Doc
By default, the SvelteKit runtime intercepts clicks on elements and bypasses the normal browser navigation for relative (same-origin) URLs that match one of your page routes. We sometimes need to tell SvelteKit that certain links need to be handled by normal browser navigation. Examples of this might be linking to another page on your domain that's not part of your SvelteKit app or linking to an endpoint.
Adding a rel=external attribute to a link will trigger a browser navigation when the link is clicked.
<a rel="external" href="path">Path</a>
from flowbite.
codinkai
commented on August 17, 2024
1
Ohh, I see the examples from the flowbite website are not supposed to work. It works, when I follow the instrucions on https://flowbite-svelte.vercel.app/getting-started with the examples on https://flowbite-svelte.vercel.app/accordions/default.
Very good library :)
from flowbite.
Master-Y0da
commented on August 17, 2024
1
I can't make this work either....same problem... I followed all steps here: link
and when I visit my starter page.svelte I just see plain html without css style
from flowbite.
shinokada
commented on August 17, 2024
For now, this is my solution. But I hope there will be a better solution.
- In the
src/app.html, I addflowbite.min.jsjust before the body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<link rel="icon" href="%svelte.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.min.css" />
%svelte.head%
</head>
<body>
<div id="svelte">%svelte.body%</div>
<script src="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.bundle.js"></script>
</body>
</html>
from flowbite.
shinokada
commented on August 17, 2024
I wonder why importing @themesberg/flowbite, works on Svelte REPL.
But it doesn't work with SvelteKit locally.
Does anyone have any ideas?
from flowbite.
shinokada
commented on August 17, 2024
The above solution doesn't work for page change.
For example, if you have an alert, it won't close the alert.
You need to refresh the page then click the close.
Interactive tabs don't work either unless you refresh the page.
Are there any better solutions?
from flowbite.
zoltanszogyenyi
commented on August 17, 2024
We now have a Flowbite Svelte library available.
from flowbite.
codinkai
commented on August 17, 2024
That's awesome!
But, it does not work in my case.
I have followed the instructions described in Method 1 on https://flowbite.com/docs/getting-started/svelte/, added a new accordion.svelte file under src/routes and pasted the first example from https://flowbite.com/docs/components/accordion/.
When I run the project, the accordion does not work.
from flowbite.
codinkai
commented on August 17, 2024
Thank you. That does look really promising and I will definitely give it a try.
Anyway, the method 1 described on https://flowbite.com/docs/getting-started/svelte/ seems not work.
from flowbite.
shinokada
commented on August 17, 2024
Which method are you trying? 1, 2, or 3?
from flowbite.
codinkai
commented on August 17, 2024
I have followed the instructions of Method 1 and created a file named "accordion.svelte" under src/routes with the contents of the first example https://flowbite.com/docs/components/accordion/. When running with "npm run dev" and accessing it at http://localhost:3000/accordion, the accordion is closed and does not work.
from flowbite.
Related Issues (20)
- [vite] Error when evaluating SSR module /main.server.mjs: failed to import "/chunk-RUDII4PE.mjs" Angular SSR HOT 7
- Dynamic Carousel for Better Audience Engagement
- datepicker causing error in ssr in the version v2.4.1 (document is not defined) HOT 5
- SPAM blacklist false positive HOT 3
- `Dismiss` duration doesn't apply to transition. HOT 1
- Number input step for Control buttons
- Bug: Number input Control buttons min value doesn't allow typing
- v2.3.0+ breaks the modal backdrop behavior HOT 1
- How to hide flowbite drawer when page loads and only show when users click the button?
- With Turbo, initFlowbite is not called when Turbo Stream replaces components HOT 2
- [NuxtJS] Unable to initiate Flowbite, document not found HOT 1
- data-modal-show not working as expected HOT 1
- Question: How can I inject data into a modal? HOT 2
- Feature: Date picker: Allow only some dates HOT 2
- Date Ranger Picker Not working on Angular Fresh Install.
- Phone input country code no working HOT 2
- Feature: Accordion: Rotate icon by X degrees HOT 1
- Cannot Customize Wrapper Styles of Card Component via Theme Configuration
- Cannot build project using flowbite 2.5.0 HOT 1
- Missing aria-hidden set false/true when dropdown show/hide HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flowbite.