问题标签 [fluent-ui]

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 投票
2 回答
2175 浏览

office-ui-fabric - 如何在fluentui(office ui fabric)中创建一个“危险”按钮?

如何在 Microsoft fluentui 库中创建“危险”(红色)按钮?就像在其他 ui 框架中一样,如 bootstrap 等。

<DefaultButton><PrimaryButton>但我还没有找到类似的东西<DangerButton>

或者,您如何指定样式以使按钮使用主题指定的“危险”颜色?

0 投票
1 回答
807 浏览

fluent-ui - Fluent UI React 将焦点轮廓颜色更改为主要反转颜色

我在一个CommandButton带有渐变的深色背景的容器内只渲染一个图标,并且我已将按钮的背景颜色设置为透明。(注意它是透明的,因为容器的背景颜色有渐变。)

我遇到的问题是,由于按钮的默认焦点轮廓是黑色的,并且在深色背景下不可见。如何更改此设置以使焦点轮廓变为原色的反转颜色?

我总是可以附加自定义 CSS 来更改轮廓颜色,但我正在寻找 Fluent UI 框架支持的正确方法。我注意到在指定道具Button时组件会设置白色背景色。primary=true所以,似乎有一种方法可以改变轮廓颜色,但我真的不知道怎么做。我还查看了源代码,它需要一个主题对象并生成一个类名,但这仍然没有告诉我完整的故事。

0 投票
2 回答
1992 浏览

office-ui-fabric - Fluent UI 组合框 allowFreeform

我对来自 ms 的 fluentui 中的受控ComboBox有疑问。我无法插入自己的文本,插入并按 Enter 后文本消失。选项选择没有问题。

这里有一个codepen:https ://codepen.io/verhext/pen/jOrKOPe

我不知道我在代码中做错了什么。
谢谢!

0 投票
1 回答
563 浏览

reactjs - Fluent UI React 命令栏使用状态不可能

我是 Fluent UI React 组件的新手。我正在尝试从流畅的 UI 反应在命令栏控件上实现 React Router,在这里发现它是带有溢出菜单项的 CommandBar。如果我想使用菜单项导航到不同的页面,我会使用 history.push("/myLink") ,如此所述。但是为了使该工作正常进行,我需要访问功能组件中的 useState 。代码如下所示:

我遇到的问题是,如果我使用 setRefreshPage(true) VS 代码抱怨状态变量无法识别。如果我将 useState 放在其他地方,则对非法使用 useState 的投诉做出反应。如何让 useState 在 const _items 对象中可用?任何帮助将不胜感激。

0 投票
0 回答
206 浏览

i18next - Fluent UI 中的本地化

我正在尝试使用 i18next 和 Fluent UI 在反应应用程序中实现本地化。

如此处所示 - https://developer.microsoft.com/en-us/fluentui#/styles/web/localization

文档日“Fluent UI 支持多种语言代码,映射到以下字体堆栈:..”

如何在 Fluent UI 中设置“语言代码”以实现相同的功能?

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

office-ui-fabric - 如何在其他地方更改时重置 FluentUI 下拉选择?

我在 reactjs office 插件中使用FluentUI 下拉菜单,并希望在用户输入完全不同的文本框时重置它。我可以获得对下拉列表的引用并调用一些重置功能吗?

这是一个简单的单选下拉菜单,例如:

我看到了https://github.com/microsoft/fluentui/issues/5917但它似乎并不完全一样。