saadeghi / daisyui Goto Github PK
View Code? Open in Web Editor NEWπΌ πΌ πΌ πΌ πΌ βThe most popular, free and open-source Tailwind CSS component library
Home Page: https://daisyui.com
License: MIT License
πΌ πΌ πΌ πΌ πΌ βThe most popular, free and open-source Tailwind CSS component library
Home Page: https://daisyui.com
License: MIT License
Hey @saadeghi,
we have noticed that currently the accordion-body
class has a max-height: 100vh
. This seems to hide longer content inside the accordion-body
. How can we override the value to max-height: 100%
?
<style>
.accordion-item input:checked~.accordion-body {
max-height: 100vh; // CHANGE TO 100%
</style>
We have tried to do this by brute force with a custom style="max-height: 100%", but it doesn't seem to have an effect.
Is there an elegant way to overwrite this?
Thanks.
Hey @saadeghi ,
Daisy UI is becoming really powerful set UI components.
We though that adding few more components and improvements on the existing ones, would make Daisy UI even more complete E.g.
tooltip
- we can pretty much achieve this with an absolute positioned dropdown
that opens up on mouse hover opening a panel/card etc, however not sure if it makes sense to factor it out as a separate component that can be used in combination with other components like button
, form-toggle
, menu
etc. here is an exampletreeview
- very similar to accordion
with the difference that it can go in depth of multiple levels here is an exampletimeline
- this is more advanced and composite control that would have slots for its timeline items and their icons/images/avatars. here is an examplebadge
(floating or overlapping) - we already the badge
component which great as it is. Here the idea is more to provide an example of how to place the badge in one if the upper/lower angles of e.g. a button
or avatar
similar to this example e.g. indicating user online/offline status. Probably this can be achieved by using margins on bottom or top e.g. mb-x
. However, the idea is to show these in the examples of Daisy UI.dropdown
programmatic open/close - Current dropdown
is really powerful option to display complex menu items. However, since, unlike accordion
its status (open/closed) is not mapped to any input
element, we haven't found a way to programmatically open or close a dropdown
. Especially this is an issue if the dropdown
opens up on mouse hover and inside the dropdown menu
there is a form
component e.g. form-toggle
. In that case, if the user clicks on the form-toggle
and leaves with the mouse the menu area, the menu still remains open. So in such case it would make sense to have an option to programmatically close it. Maybe, there is a way around this, that we are not aware of...Not sure how feasible is to implement these components and improvements as CSS-only-components (without JS logic), but definitively these would make Daisy UI more complete.
Thanks for the already existing set of great UI components.
Hi,
I tried on TailwindPlay with a simple Card here: https://play.tailwindcss.com/IiCmZ5EuXm and the "bg-primary" is not working. While the same html works as expected in CodePen with CDN css files: https://codepen.io/zemian/pen/jOBrpvR. Is there some configuration I need to enable to use these schematic role names in TailwindPlay?
Hello @saadeghi ,
Your UI framework is the best I found in the web. And, now I am working in a project with Svelte/Sapper and I think would be good to implement a solution like a component framework for Svelte/Sapper using your UI framework.
I'm not good with css, but the Svelte/Sapper is very easy to work with components.
What do you think about that?
".accordion-item input" is used to hide the check box unfortunately it also hides all inputs in the body of the accordion
Could it be changed to ".accordion-item input:first-child"
Hi,
Would it be possible to use a class, for example, .active to show/hide the modal? This would ease controlling it via React (# aren't ideal).
Thanks!
I really loved the built-in themes, especially the wireframe one. It would be cool if we also had a glass theme, or something like the Windows 10 frosted glass design.
Thanks!
Hi @saadeghi,
First of all, thanks for this awesome UI library!
After upgrading from 11.5 to 14.2, I noticed that all buttons are using dark theme scheme, even in light theme. https://imgur.com/a/eqSVdoD
If this isn't a bug, how could I set the behaviour to the old one?
Thanks!
Repo showcasing the issue
The local dev build works fine, but the production build somehow messes up with the CSS. The weird thing is that the DevTools shows duplicates, even though there are no duplicates in the actual generated CSS file.
Asked also in Svelte discord, will report back once I know more. If anyone has an idea, feel free to share. :)
Hi, awesome work with Daisy UI @saadeghi !
I would like to contribute to the docs but couldn't find any repo. Maybe you could make it open source ?
HI if i add all the themes only forest and retro work, all others was working fine, until i changed to a slightly different structure,
makes no difference if purge is false,
Tailwind config
purge: {
enabled: true,
content: [
'./Pages/*.razor',
'./Shared/*.razor',
'./App.razor',
'./wwwroot/index.html',
],
options: {
safelist: [
/data-theme$/,
]
},
},
daisyui: {
styled: true,
themes: true,
resets: true,
utils: true,
logs: true,
rtl: false,
},
darkMode: false, // false or 'media'
theme: {
},
variants: {
extend: {
fill: ['hover', 'focus'],
backgroundColor: ['active'],
},
},
plugins: [
require('daisyui'),
],
GulpFile
const gulp = require('gulp');
var size = require('gulp-size');
gulp.task('css', () => {
const postcss = require('gulp-postcss');
return gulp.src('./styles/site.css')
.pipe(postcss([
require('precss'),
require('tailwindcss'),
require('autoprefixer'),
require('cssnano'),
]))
.pipe(size({ title: 'CSS', gzip: true, showFiles: true }))
.pipe(gulp.dest('./wwwroot/css/'));
});
PostCss
const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
cssnano({
preset: 'default'
}),
purgecss({
content: ['./layouts/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
]
}
The question is why only Forest & Retro work, any ideas?
Thanks
S
Are these examples in https://daisyui.com/components/accordion/ suppose to expand when clicked? It's not working for me.
Disabling animation doesn't work on either Firefox or Chrome, visible on the documentation page for buttons at the very bottom.
Hi @saadeghi, love your work on daisyui!
I haven't found the Modal Component, yet.
Is it on purpose since for example it'll be provided by react modal or will you add it later?
Thank you for your great work btw.
Hi. I recognized that changing colors is not possible in Safari but works fine in Chrome. The color picker just doesn't show up.
Hey, I'm trying to set up a new project using Svelte with Vite as build tool and WindiCSS.
btn-primary
doesn't seem to work, but bg/text-primary
seems to work fine.
I have uploaded a repo showcasing the issue.
https://github.com/atresnjo/svelte-vite-daisyui-windicss
Here's what the output looks like
Thanks again for your great work so far, loving your slick design! π₯
When viewing https://daisyui.com/components/form/input on a real iPhone XR, the "connected" example of input with button has the button wrapped in new line below the input (Not together in a single line). However the one "with space" looks fine on the same iPhone (it's one line).
NOTE: When I view the page in Firefox Devtool with Responsive Mode, and then select iPhone X, the form UI has no issue! Only on a real iPhone I see the problem.
Hi, I work with daisy (great project btw) and I noticed better badge wrap with this:
.card-actions {
flex-wrap: wrap;
}
and for the card with badge
example:
<div class="mb-2 space-x-2 card-actions">
<div class="badge badge-ghost mb-2">Colors</div>
<div class="badge badge-ghost mb-2">UI Design</div>
<div class="badge badge-ghost mb-2">Creativity</div>
</div>
Thank you for your time!
have problem on toggle class when dir="rtl"
in the class is
.toggle~.toggle-mark {
justify-content: flex-start;
}
but in rtl need to be
.toggle~.toggle-mark {
justify-content: flex-end;
}
how can i change this?
Hi there,
I'm trying to understand if have some kind of reliable state
or indicator
that a drawer
is opened or closed and how we can open/close a drawer component programmatically?
I've tried to e.g. to change the checked value of the checkbox (first example) by this Svelte code:
<input id="my-drawer" type="checkbox" class="drawer-toggle" checked={checked}>
<div class="flex flex-col items-center justify-center drawer-content">
<label id="my-drawer-label" for="my-drawer" class="btn btn-primary drawer-button">open menu</label>
</div>
...
<button id="btn1" class="btn" on:click={toggleDrawer1} > open/close drawer </button>
<button id="btn2" class="btn" on:click={toggleDrawer2} > open/close drawer </button>
let checked = false
const toggleDrawer1 = () => {
checked = !checked
}
const toggleDrawer2 = () => {
const elem = document.getElementById('my-drawer-label')
elem.click()
}
It seems that clicking on id="btn1"
doesn't result in drawer being opened/closed, even though the checked
variable is being changed.
Clicking on id="btn2"
does open/close the drawer.
However, our issue when the drawer is opened and clicking anywhere on the overlay and closing the drawer, it doesn't change the checkbox id="my-drawer"
checked value so we don't have a state
per say, that we can rely on that the Drawer is opened or closed based on which we can show or hide some UI components.
So maybe to rephrase our question, is there anything reliably we can use as a state
of the drawer
by which we can know in the code if the drawer
is shown or hidden? e.g. checkbox checked value or element having certain class or any other indicator?
The same state would be valuable to know in other components e.g. in accordion
, to know if it's open or closed.
I hope I was clear enough.
Thanks.
While checking out the components here, I noticed that the Navbar did not collapse or have any special function for a smaller viewport - as for a mobile device.
Is there a way to have a navbar that only shows a menu icon and unfolds a drawer for mobile screens but has a full and proper menu bar on tablets and desktop?
The fold-out menu that Bootstrap uses feels a little off, Drawers have a better way of customization.
Besides that, I love the components and theming features! Really great work there :)
Kind regards, Ingwie
Two of the common usecases are single date selection and a date range selection.
Hi there,
first of all, thanks for your effort put in Daisy UI. It really is awesome and flexible addition on top of Tailwind.
This is more of a question, than an actual issue.
Recently, we have encountered a requirement to display in a navbar
component a Dropdown list that renders itself in form of a menu
like this one:
Current form-select
seems ok, but it's it cannot be customized e.g. items prefixed with icon, sub items etc. And the menu
component seems static (no dialog/modal option).
We tried to combine a normal btn
that opens up a modal
, however the positioning of the modal
seems to be always centered and it's not clear that the opened up modal
belongs to the btn
that has opened it.
So we are wondering, if there is a way with the current version of Daisy UI to implement a Dropdown list that opens up a menu right next to the activator btn
(bottom, top, left or right) in a modal
mode (like the link provided)? Or if not, is it something feasible to hope it gets implemented in Daisy UI soon?
Many thanks in advance.
/GJ
.menu.compact li>a, .menu.compact li>span{ margin-bottom : 3px; }
Before SS : https://d.pr/i/ZMZ6E4
After SS : https://d.pr/i/0PQ0ru
Hi, first I want to say thanks for the great work; the components look great!
I wanted to play around with the components for a possible project, so I created a test app using https://www.npmjs.com/package/cra-template-tailwindcss-typescript
I followed the instructions and installed it via npm, almost everything works; but when I set a theme using data-theme the font colors don't update, and for example navbar background color doesn't update; like it does in your demo. Hope you can clear this up for me, thanks a lot! π
I created an issue here
Hi there.
I am using DaisyUI together with Vite and WindiCSS (vite-plugin-windicss) and it is almost working.
There is one problem with CSS variables, though (Styled components and themes).
DaisyUI uses prejss-cli
to convert the css into JS objects.
Strangely, during this conversion, CSS vars get mangled from:
--tw-bg-opacity
To something like this:
-TwBgOpacity
The conversion from kebab to Pascal case would be ok, windicss can handle this, the problem is the deleted dash at the start.
It only happens for CSS variables starting with double dash.
Something in the prejss-cli conversion is going wrong.
If I manually replace all -Tw with --Tw in daisyui/dist/styled.js
, the styled components seem to work.
Hey Guys,
Love the UI, is there plans to add a Navigation Drawer/Sliding Sidebar component in the future?
I have a question and a suggestion ;)
For me it is unclear after reading the website whether daisyui is using the base theme by default.
e.g. on https://daisyui.netlify.app/docs/default-themes it just says i need to include <html data-theme="dark">
to my html, but what if i don't? Do i then use the base colors? I would add this to the docs if that is how it works.
i'm currently trying to integrate it with windicss and it does not work yet, that's why i am confused, i am sure if it would work i would just "see" it. But now that i only have the docs and cannot make it yet work in the code, i would propose this little documentation improvement.
Another hint could be added to the themes config page https://daisyui.netlify.app/docs/config.
Something like
"If it's true, default themes will be included. If false, you can still define your own custom theme"
How to disable animation
i dont like the animation when you click on a button
I think it makes sense to create an upstream issue here for bugs which make DaisyUi not work properly with WindiCSS.
All those are bugs in WindiCSS!
Big improvements were already made in the last couple of days. I hope it will work fully soon.
I'm having this error trying to build a React app to deploy:
Using this package.json:
{
"name": "app_mobile",
"version": "0.1.0",
"private": true,
"dependencies": {
"@headlessui/react": "^0.2.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"daisyui": "^0.27.2",
"postcss-import": "^14.0.2",
"postcss-nested": "^5.0.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^2.0.5",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "run-p watch:css start:react",
"start:react": "react-scripts start",
"build": "npm run build:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:css": "postcss src/assets/css/tailwind.css -o src/assets/css/main.css",
"watch:css": "postcss -w src/assets/css/tailwind.css -o src/assets/css/main.css"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^10.2.5",
"eslint-plugin-react": "^7.21.5",
"npm-run-all": "^4.1.5",
"postcss": "^8.2.15",
"postcss-cli": "^8.3.1",
"redux-devtools-extension": "^2.13.8",
"tailwindcss": "^2.1.2"
},
"optionalDependencies": {
"fsevents": "^2.3.2"
}
}
My project was working perfectly before I add Daisyui and postcss 8
Any idea?
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.