问题标签 [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 投票
1 回答
778 浏览

javascript - 悬停时的 Fluent-Ui-React 图标轮廓

我是 fluent-UI 的初学者,使用 react (@fluentui/react-northstar 0.47.0)

我尝试了不同的解决方案,但无法解决这个结果。请在这里指导我。

目前,当我将鼠标悬停在它变成填充的图标上时,但我想保持它们的轮廓,无论我是否悬停鼠标。

这是我的观察,Fluent-UI 在运行时渲染图标,例如

这个在运行时渲染,我试图通过 CSS 来实现,但不能。任何知道这件事的人

0 投票
1 回答
823 浏览

fluent-ui - fluent-ui中TooltipHost的背景颜色

在 fluent-ui 中使用 TooltipHost 时,我可以将背景颜色应用于工具提示吗?我试过了

但它没有改变颜色。

谢谢

0 投票
1 回答
1374 浏览

reactjs - Office UI Fabric / Fluent UI React Charts 的官方文档和示例?

首先请多多包涵。我认为这个问题不适合 Stack Overflow。我第一次尝试在这个项目的官方 GitHub 存储库中提出这个问题,但他们强烈建议在 Stack Overflow中用相应的标签提出问题,所以我在这里......

对我来说奇怪的是,我在 Fluent UI React 的官方网站上找不到 Fluent UI React Charting 组件的官方文档和示例,尽管官方 NPM 包是公开的并且正在不断更新。公平地说,我找到了这个网站,但它看起来已经过时了。任何帮助都感激不尽。

0 投票
1 回答
293 浏览

reactjs - Fabric UI Modal 自定义尺寸

请帮助自定义Fabric UI 模态窗口。我试图最小化高度并删除垂直滚动。尝试使用containerClassName, className, scrollableContentClassName- 但它们都不起作用。

在 scss 文件中:

0 投票
1 回答
1169 浏览

css - 如何在 MS Fluent UI 中对齐 Card.Section 组件?

我有带有 2 个 Card.Sections 的卡片。我正在尝试将第二个对齐到最右边,但是对我没有任何作用。我试过了:

  1. 将部分设置为flex并分配marginLeft: auto给第二个

  2. 设置 Card position: relative,然后添加float: right到第二个

0 投票
1 回答
1051 浏览

reactjs - 在 ReactJS 中获取没有 TypeScript 的 Fluent UI 下拉列表的价值

众所周知,在正常的下拉列表中,您可以使用 .onchange 获取它的值onChange={e => this.setState({ whatever: e.target.value })}。问题是,在 Fluent UI React 中,这不起作用,因为它有一个自定义值处理系统。在 Fluent UI 文档中,它说将 onChange 函数链接到:

我的项目必须是免费的,因为它以一种特殊的方式与另一个应用程序集成。有什么方法可以获取此下拉 onChange 的值而不是使用 Typescript?

谢谢!

0 投票
1 回答
599 浏览

fluent-ui - 如何在 Microsoft 的 mergeStyles() 实用程序中格式化“::before”伪类?

我正在尝试使用微软的 mergeStyles 实用程序将我的 SCSS 代码移动到 React 组件中,该实用程序是其 FluentUI 框架的一部分。我一直在弄清楚如何将“::before”指定为选择器属性。出于某种原因,mergeStyles() 自己识别了 ":hover::before" 而不是 "::before"。例如,请参见下面代码中的注释。任何帮助表示赞赏。谢谢你。

0 投票
1 回答
544 浏览

reactjs - React FluentUI 组件未更新

我在 Sharepoint webpart 中有一个FluentUI Dropdown 组件,它的行为很奇怪,它的定义如下:

当 onChange 事件触发时,它会调用以下函数:

除了下拉 UI 元素没有改变以反映新的选择之外,一切都很好。如果我删除对 setState() 的调用,则 UI 元素会更新以反映选择,但状态不会更新。

谁能看到我哪里出错了,是否有办法在不破坏 UI 元素的情况下更新状态属性?

0 投票
1 回答
708 浏览

office-ui-fabric - 有没有一种简单的方法来更改嵌套导航组件中的人字形图标?

我个人和很多客户都认为导航组件中带有嵌套项的链接的默认图标很奇怪。因此,我希望他们的外观和行为由此改变:

默认外观

对此:

预期的外观和感觉

(在屏幕截图中,大小也不同,但这只是我拍摄它们的上下文。我只是想更改图标)。后者也被微软 OWA (Outlook Online) 使用,它也使用 Fluent UI React。我唯一能想到的(但效果不是很好)是使用样式隐藏默认 V 形并修改渲染链接onRenderLink以显示其他 V 形。

我知道这个问题,但是通过样式更改图标是没有选择的,我想流利的 ui 不再是首选方式。

我有没有更好或官方的方式?

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 => {

返回(创建帐户);};