问题标签 [office-fabric]

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 投票
1 回答
513 浏览

office-ui-fabric - FluentUI DetailsList 标头下拉

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

https://imgur.com/EvNtsvb

0 投票
1 回答
259 浏览

reactjs - 如何使用fabric react nav组件添加自定义html属性?

我在用

对于导航对象,我想添加自定义 html 属性,例如data-myTag. 如何将此属性添加到由该Nav对象添加到 DOM 的按钮中。

0 投票
0 回答
86 浏览

javascript - 将函数传递给子组件

我正在创建一个简单的 SPFX 扩展来管理任务列表。我创建了一个列表,它通过 pnpjs 通过 REST 获取项目。

我希望能够通过单击按钮来删除所述项目。当我单击删除按钮时,会打开一个模式 (WarningModal),要求确认。我设法创建了一个工作示例,但我很难理解它为什么起作用。当我尝试遵循官方文档(https://reactjs.org/docs/faq-functions.html)中的指南时,我的代码无法正常工作。

父组件中的渲染方法:

警告模式 截图

为什么这行得通?我希望警告模式中的代码如下,带有箭头函数:

但是当我单击按钮时,什么也没有发生。调试器也不显示任何错误消息。

0 投票
1 回答
2597 浏览

reactjs - 如何在 Fluid UI 中将样式应用于 IIconProps 类型的图标?

我有一个按钮,如下例所示,带有一个图标 (addFriendIcon)。

https://developer.microsoft.com/en-us/fluentui#/controls/web/button

如何为该图标添加样式?例如改变颜色?


从'react'导入*作为React;从“office-ui-fabric-react”导入 { ActionButton, IIconProps };

const addFriendIcon: IIconProps = { iconName: 'AddFriend' };

导出 const ButtonActionExample: React.FunctionComponent = props => {

返回(创建帐户);};

0 投票
0 回答
39 浏览

javascript - Office.js | 桌面excel | 如果对话框打开,则限制用户与 Excel 或加载项窗格交互

我正在使用 office.js 创建 excel 加载项。我确实需要从任务窗格打开对话框并将任务窗格内容显示到对话框中。使用客户端路由在对话框上显示任务窗格内容。使用下面的代码,我们可以在在线和桌面 excel 中打开对话框。

现在的要求是一旦用户从任务窗格打开对话框,限制用户与任务窗格以及 Excel 区域进行交互。在 Online excel (Office 365) 中,它按预期工作,对话框像弹出窗口一样工作,并且不允许用户单击任务窗格以及在 excel 区域中。

在桌面excel的情况下,我们如何使用对话框像弹出一样工作?有什么办法,或者它是桌面excel的限制。

0 投票
1 回答
125 浏览

javascript - Office.js | 如何从工作簿中读取隐藏的工作表数据

我正在使用 office.js 创建 excel 加载项。在单击任务窗格中的按钮时,我正在使用某些 json 对象创建隐藏表。现在的要求是,如果用户使用本机保存选项在本地保存工作簿,并且如果他在脱机模式下再次打开工作簿并尝试启动加载项,那么此时想要读取隐藏的工作表数据并将其填充到任务窗格中。

请证明我如何实现此功能的信息。这会很有帮助。提前致谢。

0 投票
1 回答
534 浏览

javascript - Fluent UI 读取 DetailsList 的 ViewPort 的高度

DetalisListScrollablePane组件内使用以保持标题可见,并让行可滚动。但是,这需要我手动设置可滚动容器的高度。

当我调查 DetalisList 的 DOM 元素时,我可以看到它包含在 ViewPort 元素中。该元素的高度是构成列表的所有组件(列标题、行等)的高度总和的实际高度。因此,我希望能够读取这个值并根据它是否超过某个值来设置容器高度。

有没有一种很好的方法来访问 ViewPort 的高度?我总是可以查询 DOM 并找到元素,但我想避免依赖组件的内部结构。

因此,到目前为止,我找不到任何有关此的信息。我注意到DetailsList需要一个名为 的道具viewport,但我认为这不是我想要的。

0 投票
0 回答
413 浏览

reactjs - Fluent UI Detail List - 我想在列标题中包含上下文菜单以进行排序和过滤

我正在使用 Fluent UI 详细信息列表。我想要一个功能来排序和过滤以选择何时在详细列表中单击列标题。

过滤就像,当点击过滤器时,它应该要求按照下图进行过滤

在此处输入图像描述

排序应该有 2 个选项可供选择(升序/降序)

0 投票
1 回答
190 浏览

reactjs - Fabric/Fluent UI 详细信息列表:单击标题时突出显示列

有没有办法在单击时突出显示整个列或至少是 DetailsList 中的标题,条件是一次只能选择一列?

更改“onColumnHeaderClick”中的类是可行的,但是如果选择了另一列,它不会使这些列处于非活动状态。

感谢大家。

0 投票
1 回答
87 浏览

fluent-ui - 如何设计新的@fluentui/react-button [v8 beta]?

是否有任何关于如何将样式自定义应用于新按钮的文档?使用 IButtonStyles 接口的样式在新按钮上被破坏,如下面的代码所示。