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

React FluentUI Component Not Updating

I've got a FluentUI Dropdown component in a Sharepoint webpart that's acting strangely, it's defined as follows:
Gavimoss
  • 365
  • 2
  • 4
  • 22
0
votes
1 answer

Getting value of a Fluent UI dropdown without TypeScript in ReactJS

As you all know, in a normal dropdown, you can get the value of it onchange with onChange={e => this.setState({ whatever: e.target.value })}. The thing is, in Fluent UI React, this does not work, since it has a custom value handling system. In the…
0
votes
0 answers

Latest Outlook "Edit Recurrence" control-id

Within an Outlook Addin I am currently capturing when a user clicks the Recurrence Button for Series using this XML:
eljoe
  • 168
  • 2
  • 7
0
votes
1 answer

How can i dynamically disable a Fluent UI button?

I am currently working with Fluent UI buttons. What i need to do is to dynamically switch between the normal and disabled state of a button according to a disabled flag. I tried to do the following: import { PrimaryButton as FluentUIButton } from…
Maffe
  • 430
  • 6
  • 14
0
votes
0 answers

What component to use to navigate between pages like Microsoft Homepage?

I'm trying to make a header to my website like the header of the Microsoft's website Homepage: Microsoft Homepage Header. The component from Fluent UI that I think is the most similar is the Pivot, but the best practices section says: "Don’t use the…
user12610261
0
votes
1 answer

How can I style a sub element of a Fluent UI component in React?

I am trying to style an HTML element inside the component from the Fluent UI React library. What I want to do is put the "On" / "Off" text to the left of the toggle rather than on the left. When I look at my "compiled" code I can see that the …
CodingAnxiety
  • 206
  • 2
  • 13
0
votes
1 answer

Is there a way to customize on-hover styles for FluentUI drop-down control?

I am using FluentUI drop-down control and can't find a way to customize the on-hover styles. I want to change the on-hover color to blue from grey. I tried following but it didn't seem to work. Any help would be highly appreciated. const…
0
votes
1 answer

Override z-index of Panel layer

I am trying to override the Panel layer styles and decrease the index to 999998 in order to achieve my div to be above the grayed layer and below the panel when Panel is opened. So I tried to override the overlayProps , but as i see there is a Layer…
user1292656
  • 2,502
  • 20
  • 48
  • 68
0
votes
1 answer

Context Menu not reflecting check/uncheck on click

I have a context menu on click of a button. There are 3 items which are initially checked. On click of each item, I am toggling the check. The check/uncheck is not reflecting while the context menu is open. This used to work earlier but with the…
0
votes
1 answer

How to replicate Microsoft Teams Channel UI with fluentUI?

I would like to replicate the UI for a channel in a team for Microsoft Teams. The @fluentui/react-northstar package has the chat component https://fluentsite.z22.web.core.windows.net/components/chat/definition but it differs to a channel…
Adam James
  • 3,833
  • 6
  • 28
  • 47
0
votes
1 answer

What is the best way to override the behavior of Picker Component of FluentUI?

What I would like to do is... - Change the callout that appears when the user tries to type something. I want to add a custom component with a Search Box and also the ability for the user to choose the category. - Change the look of rendered text.…
Ashit Vora
  • 2,902
  • 2
  • 27
  • 39
0
votes
1 answer

How to get unmasked value from MaskedTextField - FluentUI

I'm using MaskedTextField component from Microsoft FluentUI library. I'm trying to get unmasked value from the component but no success. I tried both controlled component approach by passing value to props, and uncontrolled component approach by…
Khoait
  • 328
  • 4
  • 18
0
votes
1 answer

FluentUI DetailsList header drop down

How to make FluentUI's DetailsList header show a drop down on click as in OneDrive? https://i.stack.imgur.com/iZJyY.jpg
user13254659
0
votes
1 answer

React FunctionComponent callback on change

I'm trying to use the Fluent UI PeoplePicker based on this example, for office outlook Add-In: FLUENT UI PeoplePicker which uses FunctionComponent in React. I'm not fluent in React but still, I know how callbacks work in classes, but I'm not sure if…
0
votes
1 answer

read the Form component from @fluentui/react-northstar@0.48.0

There is a nice looking schema-based Form component on fluentui import React from 'react'; import { Form, Button } from '@fluentui/react-northstar'; const fields = [ { label: 'First name', name: 'firstName', id:…
1 2 3
25
26