问题标签 [fluent-ui]

今天尝试使用fluent-ui的Grouped DetailsList。

我的期望：我需要声明一些组，比如说红色、蓝色、绿色，然后添加到每个项目，我想添加到列表中，一个特定的属性，将项目映射到组。例如：

我发现我必须做的事情：我需要对包含我的项目的数组进行排序，所有属于红色组的项目都需要放在一个块中。例如：[红、红、红、蓝、蓝、绿、绿、绿]。现在我需要提供有关 startIndex 和 count 的信息，以将我的项目数组映射到组。

这就是组的定义：

我不明白他们为什么这样做（对我来说这样很不方便）。所以，虽然我更多地介于 JS 的初学者和中级之间。我认为执行此操作的人是专业人士。一定是有原因的。也许它与性能有关？我可以想象，当涉及到非常大的列表时，这种方式会表现得更好，但我不确定。

有人知道这方面的一些细节并可以解释吗？

如何使 FluentUI 的 DetailsList 标题在单击时显示下拉菜单，就像在 OneDrive 中一样？

https://imgur.com/EvNtsvb

我正在使用 Microsoft FluentUI 库中的 MaskedTextField 组件。我试图从组件中获取未屏蔽的价值，但没有成功。我尝试了通过将值传递给道具的受控组件方法，以及通过将默认值传递给道具的不受控制的组件方法；并检查了 OnChange 事件处理程序中的组件属性，但我没有发现存储未屏蔽值的属性。

我做对了吗？有什么解决方法吗？

谢谢！

我正在尝试使用 React 在 Microsoft 的 Fluent UI 中增加所选 Pivot 项目链接上的行高。

为了澄清起见，这是一个屏幕截图：

橙色箭头指向我想增加高度的蓝线。

我曾尝试设置Pivot组件的样式属性，但到目前为止还没有成功。这是一些代码

我已经尝试了两者的不同属性，link但linkContent还没有找到方法。我相信我想要做的是操纵IStyle界面，但我找不到它的属性的详细信息。那里的链接非常模糊。例如， 、 等的所有可用属性是link什么linkContent？

对此的任何想法将不胜感激！

谢谢你。

我正在尝试使用 Microsoft 的 Fluent UI 使用 React 覆盖 Separator 组件的边距属性。上边距似乎默认为 15px，我希望它小于这个值。

这是一个屏幕截图：

上面的米色部分默认为 15px，我想缩小它，但我似乎找不到正确的 css 来这样做。

这是我到目前为止的代码：

我已经尝试将margin: 0它当前所在的位置放在根级别，并且也嵌套在下面，::before但都没有奏效。

我唯一的其他潜在线索来自对 Chrome DevTools 中样式的检查，结果如下：

任何想法都将不胜感激！

谢谢你的时间！

我想做的是... - 更改用户尝试键入内容时出现的标注。我想添加一个带有搜索框的自定义组件以及用户选择类别的能力。- 更改渲染文本的外观。就像人物选择器，但带有图标和文本。- 能够在单击外部按钮时触发标注出现。当单击按钮时，也许我可以在 Picker 上触发焦点事件。只是大声思考。

我尝试实现它，但没有太多的文档。任何与之相关的示例将不胜感激。

谢谢！

我想为 Microsoft Teams 的团队中的频道复制 UI。该@fluentui/react-northstar软件包具有chat组件https://fluentsite.z22.web.core.windows.net/components/chat/definition但它与频道消息不同。

是否有组件可以重新创建它，还是我必须操纵 的样式chat？

如何将样式 overlayProps 传递到 Panel 组件中，如 https://developer.microsoft.com/en-us/fluentui#/controls/web/panel中所述

我试过了：

但似乎不起作用

单击按钮时，我有一个上下文菜单。最初检查的项目有 3 个。单击每个项目时，我正在切换检查。上下文菜单打开时，选中/取消选中不会反映。这曾经可以更早地工作，但使用最新的反应版本，它看起来已经被破坏了。

片段在这里

我正在尝试覆盖面板图层样式并将索引减少到 999998，以便在打开面板时使我的 div 位于灰色图层上方和面板下方。所以我试图覆盖 overlayProps ，但正如我所见，覆盖层上方有一个 Layer 组件，它具有 z-index:1000000 并继承了样式。如何以正确的方式覆盖图层类来实现我的案例？请检查我的 codepen 示例http://codepen.io/mariosch/pen/dyGYEQG