Questions tagged [fluent-ui]

Fluent UI is set of cross platform UI libraries from Microsoft. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior. Build for one platform or for all. Everything you need is here. Components for React, Web Components (Typescript and Blazor), Windows, iOS, Android, macOS and Cross-platform

Fluent UI is a collection of UX frameworks for creating, cross-platform apps that share code, design, and interaction behavior.

Build for one platform or for all. Everything you need is here.

Components for React, Web Components (Typescript and Blazor), Windows, iOS, Android, macOS and Cross-platform

386 questions
0
votes
1 answer

How to open modal on onclick of Detail List row in office ui fabric?

I have requirement where I want to open modal on clicking a detail list row. We are using office ui fabric.
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
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…
0
votes
2 answers

Fluent ui react theme for teams

I am am building a teams app, I want to set the teams theme using fluent theme, what are the exact values for theme in theme provider, Can i use fluentui/Northstar and fluentui/react together?
0
votes
1 answer

Image SPFx control with Hyperlink and OnClick

There are many examples of Carousel implementations and I've implemented React slick slider with Fluent UI Image control using the sample from PnP. I have a requirement to add a URL to an image in the slider which will take the user to the target…
0
votes
1 answer

onGetErrorMessage not being called for FluentUIReact TextField

I was going through fabric UI TextField documentation(https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield ) . I tried few examples of TextField with the following two handlers:- onChange onGetErrorMessage. I tried few…
0
votes
1 answer

React Typescript Fluent Ui -DetailList in onRenderItemColumn

i I don't succeed to fix the bug I need that in tablle show buttom I copy the code from fluent UI https://developer.microsoft.com/de-de/fluentui#/controls/web/detailslist/customitemcolumns enter image description here but this in give bug in…
0
votes
1 answer

How to not leave button in selected state after click - fluent-ui (office ui fabric)

Using DefaultButton currently. This remains selected when clicked, which property can be used to revoke selection once clicked. Alternatively, is there any styling that needs to be done for selection?
0
votes
1 answer

Custom data attributes on Fluent UI dropdown

I have a requirement to add custom data attributes to the Fluent UI dropdown. In javascript/html I could add them like this. option data-passign="true" data-minpt="3" data-maxpt="6" value="7">Data Quality
tok2vb
  • 3
  • 4
0
votes
1 answer

How to set font color of ToolTip in fluent-ui

Not able to set font color of ToolTipHost in fluent-ui, I tried below code but it is not working.
0
votes
0 answers

Office UI Fabric/Fluent UI Dropdown Custom Rendering

I'm looking at the options for customise fluent UI dropdown, based on the doc there are 4 options: https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
Shawn
  • 184
  • 2
  • 14
0
votes
1 answer

Custom icon for Fluent ui React northstar using svg

I am using yarn fluentui/react-northstar and i need to add custom icon using svg as this https://fluentsite.z22.web.core.windows.net/0.53.0/icon-viewer. is there proper way or guideline to do add custom icons?
DevÁsith
  • 1,072
  • 12
  • 38