问题标签 [fluent-ui]

我一直在使用 Fluent UI 来实现我正在处理的 Excel 加载项的 UI。我需要一种方法来显示一系列不需要用户输入的弹出通知，而只是通知用户发生了一些事情。我想要的是使用像标注小部件这样的东西，它们可以很好地堆叠在一起。

我正在寻找的一个例子：https ://react-bootstrap.github.io/components/toasts/

我没有看到任何这样的小部件，并且想知道是否可以在 Fluent UI 中实现相同的功能，这样我就可以保留我的插件所具有的其余 UI 小部件的外观和感觉。如果这不可能，我别无选择，只能使用第三方库，然后调整它的外观以匹配 Fluent UI。

推荐的方法是什么？

我有一个来自 Fluent UI 的下拉菜单，并且想要更改下拉选项的 CSS。我可以通过 className 将类添加到下拉列表中，但我无法通过在此处添加 CSS 来访问下拉选项，因为下拉选项存在于与<div id="root">. 有没有办法可以将 CSS 设置为仅应用于此下拉列表（最好从下拉组件中）？

我的代码如下：

密码沙盒： https ://codesandbox.io/s/bold-moon-u0ol2 ?file=/src/App.js

如何在挂载时将 DetailsList 的列设置为特定宽度？

我想在每次保存时保存列宽，并在重新安装组件时恢复它们，即重新访问列表所在的视图。

如果我键入12345并将光标设置在 3 和 4 之间并开始键入，这将覆盖 4 和 5。我想要的是能够例如。在两者之间添加 77 ，输出将是：123 774 5. 有什么办法可以做到这一点吗？

我的代码基本上只是：

密码沙盒： https ://codesandbox.io/s/keen-sunset-khegc ?file=/src/App.js

我正在使用@fluentui/react-northstar carousal 组件链接。它似乎解决了我的问题，但是在将其加载到 spfx 时，它没有采用任何默认的 css 等。我的 webpart 只是以垂直方式显示图像，而不是显示正确的轮​​播。请在这里找到我的代码

我也尝试过反应材料轮播，但为此我也面临同样的问题。

我正在与使用 React Router 时出现的 Fluent UI Nav Link 问题作斗争。当您独立使用 Nav 组件时，一切正常。问题是当您尝试将它与 React Router 一起使用时 - 似乎没有合适的方法来修改 Nav 组件以显示和处理路由器链接。我在 Github 上的官方 Fluent UI 存储库中找到了以下线程：https ://github.com/microsoft/fluentui/issues/915

我正在尝试人们在那里提出的不同解决方案，对我来说没有任何效果。在编译过程中，每一个都会导致某种错误。我想使用的最近的解决方案是：

编译上述代码时，每次出现以下错误：

是因为我使用的是打字稿吗？我应该改变什么？

我正在尝试在我自己的工作台上运行 Fluent UI Basic List 示例。该示例在此处提供：https ://developer.microsoft.com/en-us/fluentui#/controls/web/list 。我将整个示例的代码复制到应用程序，并用我自己的数组替换了示例的数据。但是我收到以下错误：

是因为这是一个打字稿文件吗？我应该禁用某些东西来更改编译并防止此类错误吗？

更改后我的代码如下所示：https ://codepen.io/vipperdev/pen/QWNdeJe

使用 Fluent UI React，我在 TextField 中显示来自 AppSync API 的一些数据。我希望能够从 API 中显示联系表单的文本。然后我想编辑该文本并单击一个按钮将其发布回 AppSync API。

如果我自己使用 TextField 组件，我可以使用挂钩将变量设置为 AppSync API 调用的结果，然后让 TextField 组件读取来自我使用挂钩设置的变量的值。然后，我可以根据自己的喜好编辑该文本，并且很好。

我遇到的问题是，如果我想对 TextField 进行编辑并使用我的钩子设置它们，我就会失去对 TextField 的关注。为此，我使用了 TextField 的 onChange 属性。我可以很好地设置变量，但我必须继续点击返回输入窗口。

关于如何保持专注的任何想法？

编辑

我已更改 handleChange 函数以使用 prevItem。对于此事件，它确实接受事件和值。如果您记录该值，则它是当前值并且似乎有效。

尽管发生了变化，但我仍然看到失去焦点，这意味着我每次只能进行一键编辑。

我正在使用 Visual Studio 代码、React 和 Typesctipt 为 SharePoint Online 开发 ApplicationCustomizer SPFX 扩展。我正在尝试在标题部分生成一个命令栏结构 ui 组件以呈现结构 ui 下拉菜单。根据在线提供的入门示例，我已设法使其正常工作。

我需要从存储在 SharePoint 上的 SiteAssets 文件夹中的外部文本文件中读取菜单项字符串，该文件采用所需的菜单项格式。有人可以指导我正确的方法来更新 getItems() 函数中的代码以从外部文件返回文本，下面是我的 tsx 代码文件：

网站上的示例显示了许多带有链接的导航栏示例。 导航栏演示的图像，如网站所示。

我想在这样的导航元素内实现一个搜索栏。有没有办法做到这一点？