问题标签 [getuikit]

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 投票
1 回答
130 浏览

javascript - SVG 工具提示立即消失

我有一张包含多个区域的地图,并且希望在将鼠标悬停在其上时显示带有其名称的工具提示。

工具提示将显示但立即消失。我将工具提示(g、a 或多边形)放在哪里并不重要,但我相信 g 节点是正确的位置。

三个圆圈的例子:

https://codepen.io/suntrop/pen/BmLZzN

JS

当我在 P 或 IMG 元素上使用工具提示时,工具提示会在悬停元素时保持不变。

0 投票
1 回答
1064 浏览

getuikit - 如何在 UIkit v3 中向搜索组件添加替代自动完成功能

UIkit v3 目前不支持搜索组件中的自动完成,但它在路线图上。在它实施之前,是否有人成功地将第三方自动完成功能包含到搜索组件中?

我尝试使用jQuery UI 自动完成,它在技术上工作得很好,但它不适合 UIkit 的 UI 组件——带有建议的下拉列表不能很好地呈现。

不幸的是,我在 JavaScript 或 UIkit 方面不够深入,无法自己解决这个问题。

0 投票
3 回答
7276 浏览

getuikit - UIkit 3 事件不起作用

我一直在尝试将工具提示添加到仅在满足某些条件时才显示的按钮。我正在使用 uikit@3.0.0-beta.35。根据文档,我应该在beforeshow事件中返回 false。

问题是该beforeshow函数由于某种原因永远不会触发。我什至尝试了UIkit 文档中提到的这种语法:

不幸的是,这些方法都不适合我。

0 投票
0 回答
44 浏览

getuikit - WebExtensions 内容脚本中的模态组件失败

在 WebExtentions 内容脚本中使用 uikit v3.0.0-beta.35 模式组件时未显示,我收到此错误TypeError: 'requestAnimationFrame' called on an object that does not implement interface Window.

这是我的代码

0 投票
1 回答
125 浏览

npm - 如何为 uikit 配置 npm watcher?

伙计们。-)

我尝试配置npm run watch- 命令更少。在 uikit 文档中写道,我可以使用我的代码创建文件夹“自定义”和更少的文件,例如 my-theme.less。所以,我创建:

现在问题 -

  1. npm watcher 如何知道这个文件?)
  2. 以及如何为更少的编译器创建文件入口点?
0 投票
3 回答
3319 浏览

getuikit - UIkit - 如何使用可排序组件获取订单?

我实现了UIkit 可排序组件并添加了一个stop事件。但是如果一个项目被拖动,我不知道如何计算新订单。到目前为止,我唯一能想到的就是给每个项目一个 id,然后根据该 id 进行计算,但这似乎不是正确的方法

0 投票
2 回答
5755 浏览

javascript - Uikit3 - 以编程方式调用模态

UIkit3 模态有问题。

如文档中所述,我可以使用简单的命令打开它:

这无济于事。它返回 Promise 'pending'

在此处输入图像描述

如果之后我modal.toggle()再次打电话,那么它确实会显示窗口。

我究竟做错了什么?如何从第一次调用中调用模态?

0 投票
1 回答
2168 浏览

html - UIkit 将微调器对齐到中心

我正在尝试将UIKit的(3.0.0)微调器与页面中心对齐。但它不会。

我曾尝试直接对其应用align并将其包装在这样的容器中,但没有任何效果:

有任何想法吗?

https://getuikit.com/docs/spinner

0 投票
1 回答
1456 浏览

reactjs - 使用 Redux 显示通知以响应网络请求

我的 Web 应用程序使用 React、Redux 和 UIKit。它由屏幕 A 和 B 组成。

屏幕 A 包含一个按钮 - 按下后 - 将发送异步网络请求以将一些数据发布到服务器。

如果用户在服务器返回响应之前一直停留在屏幕 A 上,他们将收到有关请求是否成功的确认信息。

我使用 React 和 Redux 实现这一点的方式是拥有一个负责显示确认横幅的组件。postStatus这个组件监听我的 Redux 存储中调用的状态的变化。当用户单击按钮时,可能会分派 3 个带有 statusesPENDING和的SUCCESSRedux操作。ERROR在它们被调度之后 - 它们被相应地改变postStatus状态的减速器捕获。然后,此状态会映射到我的组件属性,并重新渲染以显示相关横幅。

但是,如果用户在从服务器返回响应并导航到屏幕 B 之前没有留在屏幕 A 上 - 我希望显示通知,以便用户仍然知道请求的状态。

我的问题是,实现这种行为的最明智的方法是什么?

以下是我能想到的几件事:

  1. 创建一个实际上不渲染任何东西的反应组件——它只是监听postState和一些额外的状态,代表用户在哪个屏幕上。实现componentWillReceivePropsreact 生命周期方法,如果postStateis SUCCESSorERROR并且其他状态表示用户不在屏幕 A 上 - 然后调用UIKit.notify()以显示通知。
  2. 如果用户不在屏幕 A 上,则UIKit.notify()在调度SUCCESSor操作时调用。ERROR
  3. 如果用户不在屏幕 A 上,则在调度或操作UIKit.notify()后减少状态时调用。SUCCESSERROR

很可能还有很多其他解决方案,所以我很想听听一些。

0 投票
2 回答
195 浏览

html - 使用 UIKit 的目录页

我正在使用 UIKit 开发一个页面,其中我的目录浮动在右侧,左侧的文本围绕目录(截图如下)。到目前为止,我已经成功开发了该页面。但是,我很难让这个页面响应所有设备。我希望我的目录堆叠在顶部,并且文章应该在较小设备上的下方,在大型设备上,右侧的目录和左侧的文本。以下是我正在处理的代码:

截屏