themesberg / flowbite Goto Github PK
View Code? Open in Web Editor NEWOpen-source UI component library and front-end development framework based on Tailwind CSS
Home Page: https://flowbite.com
License: MIT License
Open-source UI component library and front-end development framework based on Tailwind CSS
Home Page: https://flowbite.com
License: MIT License
I am using Flowbite with Svelte. When I click a link in an alert take me to another page. When I click the browser button to go back to a page, the close button on the alert doesn't work. I need to refresh the page to close it.
The modal has the toggleModal
function to toggle. If the alert has closeAlert
function, the button can run the event handler to fire the closeAlert
.
ref: https://flowbite.com/docs/components/dropdowns/#
menu dropdown hover css white text on light mode because you write md:hover:text-white
maybe change css to md:hover:text-blue-700
Hello.
i find a bug in Toast position
it not show true in demo .
We already have the styles for a dark mode so we're thinking about building a switcher and implement a dark mode using the dark mode functionality from Tailwind CSS.
Describe the bug
I have a basic TypeScript Vue 3 Script Setup + TailwindCSS app with login form and a home page that creates and load posts. It was working like a charm before installing Flowbite.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Wanted to use the Tooltip component to try Flowbite for first time.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Uninstalling Flowbite fixes the errors.
Hi.
React or vue are need a flowbite components and i think you can create component for svelte js and this is good idea .
Suspected error in navbar:
<button data-collapse-toggle="mobile-menu" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
<button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
<button data-collapse-toggle="mobile-menu-3" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-3" aria-expanded="false">
<button data-collapse-toggle="mobile-menu-4" type="button" class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-4" aria-expanded="false">
Is the class name "hover:bg-gray-100focus:outline-none" missing a blank space in the middle?
I thought the Flowbite comes with Tailwind CSS.
But when I try to use basis-1/4
, it doesn't work.
I'm wondering if I need to load Tailwind CSS as well.
Describe the bug
I have a fresh installation of Tailwindcss 3 and latest version of Flowbite installed via NPM and using Webpack 5 as my bundler.
Flowbite styles are working perfectly but all JS powered elements aren't working it seems.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
JS elements should be working, but they don't seem to be
Desktop (please complete the following information):
Additional context
Add any other context about the problem here.
Hey there,
I am using a fresh project with tailwind2, flowbite 1.1.1 and vue3. The backend stack ist laravel 8 (php8) with inertia.js.
If I'm creating a modal inside a Vue component, then I can't open/toggle the model (data-modal-toggle="default-modal" is set to the button) .
It only works, if i move the button and modal out of the component, into the final html generated site (with Blade Template Engin).
It affects not only the modal, but also the alert dismiss button and basically everything that need flowbite javascript.
Has someone the same issue and know a workaround?
Is your feature request related to a problem? Please describe.
the methods that are described in the default quickstart guide doesn't seem to work for nuxt.js v2.15. please elaborate it.
Describe the solution you'd like
a proper guide on how to integrate with some document /video on how to integrate with different frontend frameworks. (in my case vue js applications)
After Tailwind CSS hits v3.0 we should also release a version supporting it https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0-alpha.2
Is your feature request related to a problem? Please describe.
As a .NET developer, I would love to use this library in my Blazor project
Describe the solution you'd like
A Nuget package, similar to NPM for React and Vue.
I'm trying to install Flowbite on SvelteKit.
When I run npm run dev
, I get an error:
document is not defined
ReferenceError: document is not defined
at Object.745 (/Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:17:1)
at __webpack_require__ (/Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:138:41)
at /Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:151:16
at /Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:2245:3
at Object.<anonymous> (/Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:2247:12)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)
Install SvelteKit:
npm init svelte@next flowbite
Install Tailwind Css and Flowbite:
cd flowbite
npm install
npx svelte-add@latest tailwindcss
npm i @themesberg/flowbite
Update the TailwindCSS config.
In the tailwind.config.cjs file:
const config = {
content: [
"./src/**/*.{html,js,svelte,ts}",
"./node_modules/@themesberg/flowbite/**/*.js"
],
theme: {
extend: {},
},
plugins: [
require('@themesberg/flowbite/plugin')
],
};
module.exports = config;
Adding flowbite to routes/__layout.svelte
:
<script>
import "../app.css";
import "@themesberg/flowbite";
</script>
<slot />
No error.
Desktop (please complete the following information):
Hello everyone,
I found an error on the "Interactive Tabs" Component,
As soon as the page launches, if you click on the current tab (the tab that is active), the "tab content" just disappear.
This error happens on the documentation page too:
https://flowbite.com/docs/components/tabs/#interactive-tabs
Go to the interactive tabs section, and click on the Dashboard tab
(Sorry if you don't understand something, my english is a little bad)
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Content still will be shown
Screenshots
X
Desktop (please complete the following information):
Based on many requests from users the Flowbite JS event listeners are not being registered when using a project like React or Vue.
Issue
import '@themesberg/flowbite';
we get an error document not found
.<script src="../path/to/@themesberg/flowbite/dist/flowbite.bundle.js"></script>
? Is the path/to
just a placeholder for another custom local path?Sorry if this is not the correct place to add a feature request.
Looking at the documentation, it's really hard to see which of the classes are part of the base component (they're the same in all variations) and which are specific to that variation. Take a look here: https://flowbite.com/docs/components/buttons/.
I'd like to propose that all classes that are part of the base component comes either first or last, making it much easier to understand what are the different classes.
I used a couple of buttons on one of my projects recently. The code that I copied includes exterior margins that effect the page layout when used without editing.
I think it would be best if another solution was implemented as to how the elements are displayed on flowbite.com. That way it wouldn't cause unnecessary debugging to potential implementations.
Hello,
I cant figure out how I can pass option to the datepicker, using javascript.
I tried
new Datepicker(datepickerEl, {
autohide: true,
format: 'mm/dd/yyyy',
});
But it does not work. My Datepicker is displayed and works but I cannot change any option using JS declaration.
What did I miss ?
Some sites are right to left.
But Flowbite may not work properly on these sites !!!!
Do you have a plan to add right-to-left support?
Can I help you add this feature?
All interactive elements like Tab, Dropdown and modal seems to stop working when you leave current page and back back to the page on Nuxt.js
The js part of this library doesn't work with nuxt framework (Vuejs). I tried to include the import both in my AppBar.vue and in the main.js app but it doesn't work. I followed all the steps to download and include the library i my project, but while css part has been working, the js part doesn't and DOESN'T RETURN ANY ERROR IN CONSOLE
My repo: https://github.com/salvatorecalo/salvatorecalo.github.io/tree/FlowBiteIssues
Has anyone tried using flowbite with remix? I'd love to see an example getting the custom js file to load.
Hi,
I have installed the datepicker from then CDN and it works just fine. I can change the format with datepicker-format="dd/mm/yyyy"
. I try now to change the locale with datepicker-locale="fr-FR"
and/or datepicker-language="fr"
. But the locale is still "en". Did I miss something ?
Thanks.
Forgive my drive by issue filing but I noticed that mini-svg-data-uri
is a dependency (in plugin.js
).
It seems that you're just using it for background images. Couldn't this be done at compile time?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.