问题标签 [daisyui]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
311 浏览

svelte - 如何一键关闭 DaisyUI 抽屉菜单?

我正在使用 DaisyUI 抽屉组件在移动设备上呈现菜单。有关工作示例,请参见此处: https ://daisyui.com/components/drawer

现在在示例中,有一个按钮可用于打开和关闭移动菜单。

该按钮触发以下复选框的选中状态以显示/隐藏抽屉:

我的代码:

在输入上:

在菜单项上:

问题是我必须单击两次才能隐藏抽屉。第一次单击会触发菜单项的视觉效果。第二次点击关闭抽屉。如何一键获得相同的结果?

演示链接:
https ://svelte.dev/repl/c06f018ac84f4b86b1d37f7576d25db1?version=3.29.7

0 投票
1 回答
160 浏览

html - 如何使用daisyUI(Tailwind CSS)使身体透明?

我最近开始开发一个Electron应用程序,我正在使用daisyUI的 Tailwind CSS 组件来呈现用户界面。我想让应用程序的主窗口变圆;但是,daisyUI 使这项任务变得非常具有挑战性。

正如您在下面的屏幕截图中所见,默认情况下,daisyUI 会为主体添加背景颜色。我将.bg-transparent类添加到body标签中,以使背景透明,但 daisyUI 不允许更改应用(注意角落):

使用daisyUI

相反,如果我不将daisyUI的CSS文件添加到head标签中,body就变得透明了:

没有daisyUI

这是我的 HTML 代码:

如何使用 daisyUI 使主体透明?

0 投票
1 回答
31 浏览

tailwind-css - Daisy UI 卡片边框颜色

如何使用 Daisy UI 更改卡片边框的颜色?

我可以看到这bordered在我的卡片周围添加了一个黑色边框。但是当我尝试各种顺风css类时,比如border-white边框没有改变。

0 投票
1 回答
231 浏览

html - 滚动捕获不起作用,因为 Svelte 插槽位于抽屉组件(标题)内

我正在寻找一种滚动到元素以触发事件的方法。我注意到很多示例' scrollTo(),scrollBy()等都不起作用(除非通过ascrollByView()调用或使用 classic 滚动)。on:clickbutton<a href="#element"></a>

我在我的文件中用这样简单的东西进行了测试.svelte(结果 -> 什么也没发生,也没有错误),看看滚动是否有效:

做了更多的挖掘,我遇到了JavaScript scrollTo 方法什么也没做,之后我再次检查了我的页面,我注意到在 DevTools 中单击某些元素时会出现一个scroll和框。overflow

然后它点击了......当然我不能滚动。没有可滚动的页面。我滚动的只是溢出内容,而window内容的高度在技术上保持不变。

我在这里找到的以下代码确认该<main></main>部分导致溢出(自然)。

(我在我的 Svelte 网站中使用navbar menu for desktop + drawer for mobile来自DaisyUI的。)

页眉.svelte

__layout.svelte:

index.svelte:

如果我按预期将滚动工作放在内部的<slot></slot> 外部,但是and部分不会。<Header></Header>__layout.sveltenavbardrawer

问题:

如何重组我的 Svelte 组件以使抽屉保持在内容上方(即具有更高的z-index),使其高度与屏幕相同并且在不显示时仍然能够滚动(例如在桌面上)?

PS 我发现的抽屉示例似乎总是以与 DaisyUI 相同的方式工作,即将您的内容放入其中。

0 投票
1 回答
125 浏览

css - 带有 tailwindCSS 的全宽按钮组

说真的,你如何让 TailwindCSS 按钮组跨越整个宽度?对于简单的按钮,您可以使用btn-block,但是一旦您开始使用按钮组,这将不起作用。

0 投票
0 回答
127 浏览

reactjs - Twin Macro 无法在 NX 工作区项目中获取 daisyui(tailwind 的插件)类

我正在使用 nx 创建项目,并且还使用 nx 预设来设置项目,并且我尝试添加一些现成的 UI 库,首先添加 tailwind,然后添加 'daisyui' tailwind 组件。但是我遇到了似乎宏找不到daisyui类的问题。对于正常的顺风类,它工作正常。

如果您需要我在这里缺少的更多上下文和文件配置,请告诉我。谢谢你的所有帮助。

错误:

btn 是 daisyui 组件上的按钮类名。

我如何使用双宏

.babelrc

和 project.json 设置配置

我的 webpackConfig.js

webpack-tailwind.config

和导入所有顺风的 style.scss

0 投票
1 回答
306 浏览

tailwind-css - 如何在 daisy-ui 中自定义主题?

  1. 我想在 daisyui 中自定义一个主题。是否可以自定义,即深色主题(只需修复一种颜色,或添加更多颜色条目)?

  2. 此外:是否可以为您的自定义主题添加新的颜色条目?

即我尝试了以下但没有成功:

new-color...但是当我在我的 css ( theme("colors.new-color"))中使用新颜色时。我收到以下错误:

我需要添加一个自定义颜色条目。这怎么可能?

0 投票
1 回答
25 浏览

css - 为什么我的 css 元素比其他示例大?

我不是设计师,为了我的副业,我做了很多剪切和粘贴。我确定我并不孤单。我目前正在使用 tailwindcss、appwrite 和 sveltekit 构建一个个人项目。

如果我找到我喜欢的东西并想在教程或任何地方借用我粘贴的示例总是比教程大。检查 CSS 以像素为单位显示相同的 WxH,所以好像我的像素以某种方式更大?例如,这里我粘贴了一些从 daisyUI 组件示例站点中取出的按钮:https ://daisyui.com/components/button

我已经从 daisyUI 逐字复制了 html。我想也许有不同的基本字体大小,但我从我的网站复制了样式,然后 daisyUI 运行了一个差异,它没有显示任何实质性内容(我知道)。此外,无论是某个 codepen 还是 tailwindcss 站点,每个站点都是这种方式。下面的示例显示它们都是 64x64;但是,我的要大得多。

苗条可能会以某种方式加剧这种情况,但我不知道那是怎么回事。

在此处输入图像描述

0 投票
0 回答
168 浏览

reactjs - React - Tailwind - DaisyUI 轮播

我将 DaisyUI 中的以下代码示例用于 React Carousel。虽然每个轮播项目都有一个 ID,但href锚标签中的内容是否应该只是 ID?href="slide2" 还是需要按照模板作为href="/components/carousel#slide2?我需要为每个轮播项目创建一个单独的组件吗?代码看起来不是这样,但仍然无法正常工作。不知道我错过了什么

0 投票
2 回答
54 浏览

css - 使用 Svelte 样式化 SVG 笔画

我在 Svelte 中有以下代码,我正在寻找使用 CSS 类名称(text-errortext-success而不是#ff5722#10b759,分别)设置笔触颜色的样式。

这可能吗?

我宁愿不在组件中定义确切的颜色,而是让主题通过 CSS 类(DaisyUI)来决定。

Svelte 的新手,所有内容的最新版本。