问题标签 [fluentui-react]
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.
office-ui-fabric - Fluent UI PeoplePicker onChange
我正在尝试在 Fluent UI 上使用 PeoplePicker 控件:
https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker
进行选择时如何触发操作?我没有在 API 中看到任何 onChange 方法或类似方法。
fluent-ui - Fabric/Fluent UI Datepicker 星期几与日历数字日期不一致
Fabric/Fluent UI Datepicker 日历数字日期与一周中的实际天数不一致。截图演示:
^ 可以看出,突出显示的今天日期标记为 2020 年 9 月 17 日,在日历的星期五列下,但这显然是错误的,因为 2020 年 9 月 17 日是星期四。
我认为这可能是由于实际Date()
对象中的错误,但这没有意义,因为这只会导致日期错误,日历数字日期与星期几的对齐永远不应该像这样错位,因为无论如何这都是错误的。无论Date()
您在 Datepicker 中输入什么对象,2020 年 9 月 17 日始终是星期四,而不是星期五。
这是 Fabric/Fluent UI Datepicker 的错误吗?有没有其他人得到这种行为,或者我可能忽略了什么?
提前谢谢了。
javascript - Fluent UI 读取 DetailsList 的 ViewPort 的高度
我DetalisList
在ScrollablePane
组件内使用以保持标题可见,并让行可滚动。但是,这需要我手动设置可滚动容器的高度。
当我调查 DetalisList 的 DOM 元素时,我可以看到它包含在 ViewPort 元素中。该元素的高度是构成列表的所有组件(列标题、行等)的高度总和的实际高度。因此,我希望能够读取这个值并根据它是否超过某个值来设置容器高度。
有没有一种很好的方法来访问 ViewPort 的高度?我总是可以查询 DOM 并找到元素,但我想避免依赖组件的内部结构。
因此,到目前为止,我找不到任何有关此的信息。我注意到DetailsList
需要一个名为 的道具viewport
,但我认为这不是我想要的。
reactjs - 将项目推送到流畅的 ui 命令栏组件
我正在使用流畅的 UI 命令栏组件。当我尝试在初始渲染后将其他项目推送到 _items 数组时,命令栏将它们作为溢出项目添加到命令栏末尾的可单击省略号中。如果满足条件并且它们在初始渲染之前被推送,则它们会像普通命令栏项目一样正确渲染。如果在初始渲染后推送它们,如何使它们正确渲染?
// 我要推送的项目
// 这是我的基本命令栏实现
reactjs - 让一个方法调用函数组件中的另一个方法
我正在使用Fluent UI 库中名为DocumentPicker的组件。
这个组件有几种方法:
对于我的具体情况,我想让这个组件的一个方法调用另一个方法。例如,让 onEmptyInputFocus 触发 onResolveSuggestions。我怎样才能做到这一点?
[编辑] 基本上我试图用一个函数组件来完成我可以在类组件上使用“this”来完成的事情。在我的类组件中,我可以编写如下内容:
reactjs - 如何删除或处理图标被重新注册警告反应?
警告
react_devtools_backend.js:2273 Some icons were re-registered. Applications should only call registerIcons for any given icon once. Redefining what an icon is may have unintended consequences. Duplicates include: GlobalNavButton, ChevronDown, ChevronUp, Edit, Add, Cancel, More, Settings, Mail, Filter (+ 3592 more)
- 有没有办法编译和删除这个警告。
reactjs - 如何通过 Fluent UI Nav 正确使用到达路由器链接
有没有办法让 Fluent UI(以前的 Office Fabric UI)导航组件正常工作<a>
,用自定义链接(例如<Link>
来自 Reach Router)替换它的元素链接?
Fluent UI Nav 提供了一个onRenderLink
道具,但只会更改内部内容最里面的<a>
元素。它将外包装元素保留为传统<a>
的,当用户使用它时会导致整个页面重新呈现。
它还提供了linkAs
prop ,但它改变了“Group Header”的全部内容,并采用了Nav
首先使用的所有漂亮的 CSS 样式优势。
有没有办法真正让这个工作?
fluentui-react - 设置 Fluent React TagPicker 的值?
Fluent React 的 TagPicker 组件 ( https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers ) 如何呈现现有标签。我试过用input
和value
道具传递,没有运气。例如:
sass - SCSS 主题化不适用于 Fluent UI React
我正在使用流畅的 UI 反应命令栏。我正在使用 SCSS 主题化模式来主题元素。主题适用于顶级命令栏类名称,但某些主题化块似乎完全被跳过。
例如,下面显示的块永远不会执行,因此图标路径将具有红色填充。
这是另一个例子。Themify 块适用于顶级 commandItem 样式,但不适用于 dropdownMenu(流畅的 UI 子菜单)。然而,.dropdownMenu
选择器确实有效。background-color: red
如果我在主题块之外设置下拉菜单,则颜色会更新。
任何可能发生这种情况的想法都会非常有帮助!谢谢 : )
这是从外部包中获取的themify SCSS mixin 代码。
office-ui-fabric - 如何在fluentui(office ui fabric)中创建一个“危险”按钮?
如何在 Microsoft fluentui 库中创建“危险”(红色)按钮?就像在其他 ui 框架中一样,如 bootstrap 等。
有<DefaultButton>
,<PrimaryButton>
但我还没有找到类似的东西<DangerButton>
?
或者,您如何指定样式以使按钮使用主题指定的“危险”颜色?