Questions tagged [fluentui-react]

Fluent UI react or web represents a collection of utilities, React components, and web components for building web applications. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior. Home: https://developer.microsoft.com/en-us/fluentui#/ Source: https://github.com/microsoft/fluent-ui-react

Fluent UI react or web represents a collection of utilities, React components, and web components for building web applications. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.

Home: https://developer.microsoft.com/en-us/fluentui#/ Source: https://github.com/microsoft/fluent-ui-react

311 questions
0
votes
0 answers

How to use styling in React fluentui with child components

How do you create components with React fluentui and apply styling to root and child components?
Amit
  • 29
  • 4
0
votes
0 answers

How can I specify "download" attribute for menu item?

I have a FluenUI contextual menu component, initialized like this: const items = [ { key: 'linkWithTarget', text: 'Download File', href: 'https://some.site.com/somefolder/somefile.txt', } ];
Nikolay
  • 10,752
  • 2
  • 23
  • 51
0
votes
1 answer

DetailsList - Display a message when empty

are you guys aware of an elegant way for disaply a message like "no items found" or similar, when a FluentUI DetailsList is empty? Currently the DetailsList is rendered but without any row. Cheers
0
votes
1 answer

teams chat component in dynamics, is the component available

dynamics chat image is this component available i.e(Gifs, emoji , edit the text ) rather building the chat component using fluent ui northstar
0
votes
1 answer

How to render FluentUI controls in a HTML page similar to rendering React Components in a script tag inside a Div

I have a sample code for invoking a Teams Task Modules, where a typescript file is being render in a HTML page - github link for the sample :…
MaheSH YU
  • 27
  • 6
0
votes
1 answer

@fluentui/icons not showing in page

recently I cleaned up the webpack configuration in a project in order to make it more maintainable, I did so by splitting the configuration in two files: // webpack.config.js const ReactRefreshWebpackPlugin =…
0
votes
1 answer

How to make a DetailsList header shows tooltip

How to configure detailsHeader properly to make it show tooltip for the header text? In each column, I've added ariaLabel, name, key, fieldName and have tried the top answer in this post but does not work: How to render a column header with both…
bunny
  • 1,797
  • 8
  • 29
  • 58
0
votes
1 answer

How to change fluent ui primary or secondary text color?

I have a very simple question. It should be very easy. I can't change color of secondaryText in PersonaDisplay.
0
votes
1 answer

Fluent ui Stack component makes PrimaryButton fill all the horizontal space available. How to make it shrink to fit

When I put a PrimaryButton inside a Stack component from fluent ui, button is rendered as follows in an electron app. How to make it shrink to fit? Code for this is as follows return (
rsp
  • 537
  • 2
  • 13
0
votes
1 answer

Don't let flex to wrap label text of toggle

I have the following code (with "@fluentui/react": "^8.33.0",) import React from 'react'; import { Toggle } from '@fluentui/react/lib/Toggle'; class TestIt extends React.Component { render() { return (
SoftTimur
  • 5,630
  • 38
  • 140
  • 292
0
votes
1 answer

not getting useState variable updated value after updating it in useEffect

I am not getting useState variable(selectedItem) updated value after updating it in useEffect. I have 2 useEffect first one dependency array is empty and i am changing dropdown value based on role. In Second UseEffect Dependency array I have…
0
votes
2 answers

How to add a notification bar inside Microsoft Teams in-meeting tab?

I'm developing a Microsoft Teams in-meeting app. I want to add the notification bar at the exact position shown in this document? I'm trying to place all the notifications outside the iframe (just like it's shown in the document). How can I achieve…
Riya Ghosh
  • 57
  • 11
0
votes
2 answers

How to reset Fluent UI choice group selection

I am using a choice group in y page and I have a situation where I need to clear radio button selection (if any). I am using selectedKey property n IChoiceGroup. On load, when I pass correct key id, it does select the right radio button, however,…
Purbasha
  • 215
  • 2
  • 11
0
votes
1 answer

How do customise a component's CSS selectors in FluentUI

I am trying to customise the behavior of an FluentUI component when it is hovered over (A Primary Button in this case). How do I customise CSS selectors when I am using Microsoft's React FluentUI library. I tried this initially (This approach is…
Michael Dera
  • 99
  • 14
0
votes
0 answers

Adding a menu component in each option of react-select

I am trying to open a contextual menu when I click a button on the side of each option in rselect options. eact select. I have used a custom option to add button functionality to select optionis. I tried using contextual menu from fluentui but…