问题标签 [carbon-design-system]

我正在尝试使用碳设计创建一个反应应用程序。

这里 HeaderName 的 'to' 属性将页面路由到一个 url，作为一个子对象，Tag 有自己的关闭按钮，当点击关闭按钮时会触发 'onClose' 事件。

问题：当我点击标签的关闭按钮时，页面再次路由到“/campaigns”，所有状态都被删除，影响业务逻辑。

我正在使用carbon-component-angular并尝试使用来自看起来像这样的 api 的动态数据创建数据表。

我的 HTML

我在 component.ts 文件中定义的标头和数据

我已经尝试了上面的代码，但表格没有显示仅显示的部分<ibm-table-header>。有人可以帮我吗？

用于角度文档的碳组件（表）

我正在使用碳设计图表getFillColor的反应库，并且在使用图表选项属性中的函数设置自定义颜色时遇到困难：

上面的代码适用于 v0.40.2 及以下版本，检查这个沙箱，它正确设置了颜色：

但是在 v0.40.3 及更高版本中，它不再起作用了，看到这个沙箱，颜色保持不变：

在碳设计图表框架中设置颜色的正确方法是什么？

我试图让我的 mapboxgl 地图适合屏幕的整个大小，但它仅限于屏幕的三分之一。我们正在用碳构建一个角度应用程序。

我们认为'bx--content'可能存在问题，因为默认填充限制子组件适合整个屏幕但是我试图覆盖它并手动设置填充：0; 但我在那里没有运气。我们已经实现了 map.resize 功能，我可以在控制台上看到，当我让浏览器窗口越来越小但它不“适合”整个屏幕时，地图正在改变大小

有人知道我在做什么错吗？

尝试在我的 Vue.js 应用程序上实现 Mailchimp 时我完全迷失了。目标是构建一个简单的电子邮件注册表单。

使用 Mailchimp，我能够生成以下代码：

导致： 这按预期工作，但它缺乏任何风格。我正在使用具有样式组件的碳设计系统。但是我不确定如何将 HTML 代码中的功能添加到样式化的组件中。

导致. 我没有得到的是我是否应该使用另一个库（如 Axios）或请求向 Mailchimp 发出 POST 请求。欢迎任何帮助。

我最近开始使用以下工具构建一个简单的 Web 应用程序：

1. Vue.js
2. 碳设计系统

下一步是包括一个邮件列表。我想添加一个包含两个组件的简单表单：一个文本框和一个订阅按钮。

我与后端无关，并考虑使用 MailChimp 或 SendGrid。但是我遇到了以下问题。MailChimp 和 SendGrid 都允许用户生成可以复制到您的网页的 HTML 格式的自定义表单。问题是样式与碳设计系统不匹配。例如，我想使用官方组件cv-button而不是标准button。

我尝试了两种方法来解决这个问题。首先，我摆弄 css 样式。这不是要走的路，因为我的 Carbon 设计系统使用 scss 而不是 css，并且为这种形式设置自定义 css 将不可避免地导致未来的设计不一致。

其次，我尝试直接使用 MailChimp 和 SendGrid API。然而，这是一项乏味且耗时的工作。此外，它给项目带来了很多复杂性。

我的问题：将订阅按钮添加到与定制设计系统一致的节点 js (vue.js) 应用程序和第三方电子邮件营销解决方案 (mailchimp / sendgrid) 时，最佳实践是什么？

这是我当前的 mailchimp 代码：

呈现为：

这与 cv-button 等官方 Carbon 组件的风格不同。

我正在使用碳设计图表的反应库，我收到间歇性错误'缺少碳图表的 CSS 样式。请阅读碳图表入门指南。'

我在 app.scss 中导入 css，它是在 index.js 中导入的。@import '~@carbon/charts/styles.css';

当我在 localhost 上执行代码时它可以工作，但是当使用 npm build 构建代码时，有时会出现此错误并且整个页面变为空白。

还尝试在组件文件的css中导入，导入'@carbon/charts/styles.css'；

我使用Carbon 的 SideNav组件作为页面的树形导航控件。叶子可以active通过isActive布尔属性或添加来设置aria-current='page'。如果叶子在子菜单中，则在其任何子菜单处于活动状态时扩展菜单。活动项目跟踪不是开箱即用的，它必须添加。我有两个问题：

1. 实施活动项目跟踪的正确方法是什么？我可以想到两种方法：onClick()为每个添加一个，SideNavMenuItem或者，正如我目前实现的那样：将一个引用数组放在一起，然后使用useEffect()从所有类中删除活动类并将其添加到选定的类
2. 当包含组件安装时（例如在页面刷新或通过书签导航到页面）时，标记活动项目的正确方法是什么。我的参考代码通过将所需的类添加到菜单项来设置活动状态，但SideNavMenu只有在其任何子项处于活动状态时才会打开 - 这是我无法通过参考设置的属性。

我当前的示例基于一个小的 8 项树，但我必须将其扩展到更大的规模。

从这个链接：https : //carbon-svelte.vercel.app/components/ComboBox 有一段代码应该允许我在 ComboBox 组件中启用拟合。

在我的项目中，我复制了该功能，并添加了如下组件：

currencyListCarbon 是货币列表。这些都出现在组合框中，但由于我有超过 100 个，当我可以简单地输入 USD 时我不想滚动，它会为我过滤，让我选择合适的值。我收到此错误：

Uncaught (in promise) ReferenceError: description is not defined

这是由于项目未定义，但当组合框包含所有项目时，我无法弄清楚为什么它未定义。这些是在从数据库加载页面期间加载的。

我试图更改函数以检查未定义。添加了 console.log 以查看 item 和 value 的值，并且几乎所有 item 始终未定义。

有任何想法吗？

谢谢

我有一个 CRA 打字稿安装，我正在使用 carbon-addons-iot-react 设计库。 https://github.com/carbon-design-system/carbon-addons-iot-react

当我检查 source-map-explorer 时，我发现我的包非常大，因为 carbon-addons-iot-react 以一种奇怪的方式导入 watson 图标。

您可以在图片中看到它； 源图

我试图以摇树的方式在我的组件中导入图标

但我认为原因是 carbon-addons-iot-react 导入图标的方式。

我还尝试了基于路由的代码拆分，但它并没有减少存储桶的大小。

构建后尺寸

我对 _generated 文件夹进行了一些研究，以及为什么它太大了。但我在网上找不到任何东西，也找不到他们的存储库上的问题。他们在存储桶中使用 PURE React.CreateElement，但由于某种原因，如果出现问题，我的 webpack 无法对它们进行三次摇晃。

有人有什么想法吗？

非常感谢。