问题标签 [patternfly]

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 回答
65 浏览

patternfly - 如何在 patternfly-react 中添加 favicon

我正在尝试将 patternfly-react 用于 UI。我不确定如何添加我的图标,通常在我们使用的反应中

但是在 patternfly-react 中,我们没有任何公用文件夹,并且 index.html 在 src 中。

我尝试<link rel="icon" type="image/png" href="favicon.png">了我的 index.html 文件,并且 favicon 在同一个文件夹中,即/src.

这是我的树和 index.html 的屏幕截图

树形结构

索引.html

任何帮助,将不胜感激。提前致谢

0 投票
1 回答
274 浏览

reactjs - React 不加载本地 svg

我需要将本地 SVG 调用加载为字符串'./MySvg.svg',但如果我将其作为组件调用,它就可以工作,例如<MySvg />.

我按照本教程https://blog.logrocket.com/how-to-use-svgs-in-react/安装了文件加载器,但问题仍然存在。

我正在尝试使用 react-d3-graph 将自定义 svg 放在图形的节点上,但它需要本地 svg 作为字符串,并且不接受作为组件。

Svgteste只导出 svg 标签svgFile.svg

带有组件的示例

我的网络包

0 投票
1 回答
62 浏览

reactjs - React 中的键值对组件未正确删除

在 React with patternfly 中,我试图创建一个组件,用于以键值格式输入 http 标头和值。但是当我删除第二行时,日志说它已被删除并正确呈现。但视觉上最后一行只删除了。代码沙盒链接https://codesandbox.io/s/react-key-value-component-ctn3l?file=/src/App.tsx

请帮助我解决这个问题。谢谢你的时间。

输出日志

0 投票
1 回答
66 浏览

reactjs - 更改 patternfly 甜甜圈图表中的标题颜色

我想更改 patternfly 甜甜圈图表中标题的颜色。目前看起来像这样

在此处输入图像描述

如何将样式属性添加到 ChartDonutUtilization 组件?我试图以这种方式将样式属性添加到组件中

但我在这方面遇到了解析错误。

0 投票
1 回答
43 浏览

css - 多个下拉菜单不显示选项

我是 React 的初学者。我正在使用Patternfly Dropdown。我面临的问题是当我尝试使用两个以上相同的下拉菜单时。然后,当我单击它们时,里面的选项没有打开。

我想知道如何通过修改现有代码在同一页面中拥有多个下拉菜单。

状态:

在渲染()下

归来

0 投票
1 回答
35 浏览

reactjs - ReactJS Patternfly 减少下拉菜单的重复代码

嗨,我有 2 个下拉菜单,但为此我正在管理 2 个状态。请帮我减少重复的代码。假设,如果我想要 10 个下拉菜单,那么我的状态数和相同的方法会重复相同。如果有办法重构代码以减少状态和方法的数量会更好。

注意:我有一个基于类的组件

内部构造函数

在渲染()下

const {isOpen, selected,isOpen1, selected1} = this.state

在 return() 下

0 投票
0 回答
44 浏览

reactjs - React 中的工具提示在悬停时显示在单个框中

我有一个图表项目符号组件,它在悬停时有工具提示。问题是我必须指向确切的行才能看到工具提示。因此,我希望两个工具提示在悬停时都显示在一个框中。当我禁用道具“allowtooltip”时,它会在没有工具提示的情况下显示这样的数据。

禁用时的工具提示

这是 Bulletchart 组件 - https://www.patternfly.org/2020.11/documentation/react/charts/chartbullet

我期待这样的事情。在一个框中显示平均值和最大值。

在此处输入图像描述

0 投票
0 回答
29 浏览

javascript - 在 React 中覆盖元素类型

我有两个嵌套的 Patternfly 4 组件,特别DualListSelectorTreeView用作它的项目。我的问题是这两个都包含<button>,我正在看到那些

控制台中的错误。我正在查看这些组件的来源,但似乎我无法配置任何一个地方来使用不同的元素类型;有什么技巧可以覆盖它吗?

(注意:我知道 DualListSelector 本身就支持树视图,但这种行为在我的用例中有一些缺点,导致我自己做树视图。)

0 投票
0 回答
17 浏览

reactjs - 切换路线时反应快速浏览旧页面

在此处输入图像描述

当我在路线之间切换时,我以非属性结构化方式快速浏览了当前页面,正如您在屏幕截图中看到的那样,然后转到下一页请帮助

0 投票
1 回答
46 浏览

javascript - 在 clojurescript 中使用 Bootstrap datetimepicker 的问题

我正在尝试在我的 clojurescript 项目中使用 Bootstrap datetimepicker,如下所示:

但我最终得到了 datetimepicker 函数的 Uncaught TypeError 。

在一些分析中,我发现一个原因可能是谷歌闭包编译器所做的优化。一种可能的解决方法是创建 extern.js 文件并添加函数名称,这样名称就不会在闭包编译器中进行优化。

我试图修改我的 extern.js 但它没有帮助我的 extern.js 看起来像这样。

我仍然收到同样的错误。

我需要知道我的 extern.js 有什么问题,这样我就可以避免 bootstrap-datetimepicker 函数没有得到优化,这会导致未知类型异常