问题标签 [office-ui-fabric-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.

0 投票
1 回答
694 浏览

office-ui-fabric - 如何更改 NormalPeoplePicker 下拉菜单的宽度

我正在使用来自https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker#IPeoplePickerProps的 NormalPeoplePicker 的默认示例。当下拉菜单显示时,它会切断较长的项目(例如:'Anny Lundqvist,Soft..的初级经理')。如何使其更宽,以便显示完整项目的文本?

0 投票
1 回答
561 浏览

office-ui-fabric-react - 更改 Fluent UI 面板上的退出按钮样式

我在 React 中使用来自“office-ui-fabric-react/lib/Panel”的面板。

此面板在右上角生成一个小 [x] 按钮。很难看,有没有办法将其默认背景颜色更改为红色并修改其鼠标悬停值?

0 投票
1 回答
785 浏览

office-ui-fabric - 如何在流利的 ui react Dropdown 控件中从 API 响应中设置动态选项?

我遇到了一种情况,我需要显示一个下拉菜单并希望从 API 动态获取选项并在单击插入符号时加载(可能在 API 响应通过时显示加载程序)。我正在寻找的经验是以下几行 -

在此处输入图像描述

加载(从 API 获取选项)

在此处输入图像描述

成功响应后显示选项

该文档没有提供任何可以实现此目的的 API 表面。是否可以使用该控制组件的当前 API 来实现这一点?

0 投票
1 回答
2863 浏览

office-ui-fabric - 有没有办法在 Fluent UI 中使 DetailsList 标题文本换行?

我有一种情况,我想在FluentUI DetailsList中显示数据,其中列名可能很长,而列内容可能很窄。在这种情况下,标题将被截断。 请参阅此代码笔

有没有办法改变这种行为,比如标题文本覆盖多行?

虽然我在 2 年前发现了这个悬而未决的问题,但在 Stackoverflow、Github 或官方文档上都找不到关于该主题的答案。以下是我尝试的一些方法:

  • word-break: break-all;通过headerClassName字段注入一个 CSS 类IColumn
  • isMultiLine在列上设置
  • DetailsHeader我可以覆盖其渲染的组件本身onRenderDetailsHeader似乎没有提供任何用于自定义文本显示方式的道具

甚至有没有办法实现所需的行为(包装多行而不是截断长列标题)?

0 投票
1 回答
1102 浏览

office-ui-fabric - 带有 Fluent UI 的 Pivot 的粘性标签栏

我正在使用 Fluent UI 的Pivot组件构建一个选项卡式环境。一些选项卡(或PivotItemsFluent UI 用语)很长,需要可滚动。有没有办法让标签栏保持粘性,无论用户滚动到标签的哪个位置,它都保持在框架的顶部并且可见?

0 投票
1 回答
969 浏览

office-ui-fabric - 将颜色应用于特定尺寸的标签 - FluentUI

我正在阅读 UI Fabric React 的文档,我可以看到我们有这些类可以将字体大小应用于我们的标签:https ://docs.microsoft.com/en-us/office/dev/add-ins/设计/附加排版..我喜欢“副标题”和“正文”的大小作为标题,但是应该是标题的副标题显示为灰色,正文应该是子标签似乎是黑色的。执行以下操作时如何更改默认颜色:

0 投票
0 回答
228 浏览

office-ui-fabric - 使用 UI Fabric React 在两列中显示数据

我想使用 UI Fabric React 在 2 列中动态显示数据。例如,我希望有 2 列,一列用于教师,一列用于学生,每次我想用代码动态地向其中一列添加一个条目。这 2 列应彼此相邻对齐。我们如何使用 Office UI Fabric 做到这一点?知道教师和学生的人数可能不同

下面的例子:

0 投票
0 回答
135 浏览

office-ui-fabric-react - Fluent UI - Nav:可以扩展到 selectedKey

是否有可能自动将导航扩展到 selectedKey?我正在使用嵌套导航,这将完全受益于自动扩展。虽然我找到了一种手动解决方案来遍历这些项目,但内置的自动方式会很棒。

谢谢

0 投票
0 回答
88 浏览

typescript - 从 .ts 文件调用 loadTheme

我是我的“office-ui-fabric-react”项目之一,我正在编写一个实用程序类(common.ts),其中我有一个为页面加载主题的功能。此实用程序类将作为脚本标记的一部分包含在 html 文件中,如 common.js。

我想调用在 \node_modules@uifabric\styling\lib\styles\node_modules@uifabric\styling\lib\styles\theme.d.ts 中定义的 loadTheme

我尝试import { loadTheme } from "office-ui-fabric-react"并给了我一个通用的构建错误。

如何从 .t​​s 文件导入“office-ui-fabric-react”中定义的 API?

0 投票
1 回答
108 浏览

sharepoint-online - Office UI Fabric 主题

我想在我的 Web 部件中使用正文文本颜色,因此如果主题为黑色,它将以白色显示文本,如果背景为白色,它将以黑色显示。目前我在我的 .scss 文件中引用了这个:

我正在查看以下文件office-ui-fabric-react/dist/sass:_Font.scss 和 _Color.scss,但我没有找到与正文颜色相关的任何内容。

任何帮助表示赞赏。