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
0 answers

Display data in two columns with UI Fabric React

I would like to display data dynamically in 2 columns with UI Fabric React. For example I want to have 2 columns one for teachers and one for students, and each time I want to add an entry to one of these columns dynamically with code. These 2…
0
votes
1 answer

Apply colors to labels with specific sizes - FluentUI

I am reading through the docs for UI Fabric React, and I can see that we have these classes to apply font sizes to our labels: https://learn.microsoft.com/en-us/office/dev/add-ins/design/add-in-typography .. I liked the size of the "Subtitle" and…
0
votes
1 answer

Fluent UI React commandbar usestate not possible

I am a newbee on Fluent UI React components. I am trying to implement React Router on the commandbar control from fluent UI react found here it is CommandBar with overflowing menu items. If I want to navigate to a different page with the menu items…
g00golplex
  • 397
  • 1
  • 6
  • 17
0
votes
1 answer

Fluent UI React Changing the focus outline color to primary inverted color

I'm rendering a CommandButton with only an icon inside a container with a dark background with gradient and I have set the background color of the button to be transparent. (Note that it is transparent because the container's background color has a…
CookieEater
  • 2,237
  • 3
  • 29
  • 54
0
votes
2 answers

Have a method call another method within a function component

I am using a component called DocumentPicker from the Fluent UI library. This components has several methods:
Christophe
  • 27,383
  • 28
  • 97
  • 140
0
votes
2 answers

I want to know how to set date value into a Fluent UI datepicker sharepoint spfx react

In here i want to get a date from the SharePoint list and set it in the datepicker, enter image description here FYI the date is coming properly from the API , i am using pnp js to retrieve data, but only the date value is not setting into the…
0
votes
1 answer

Fabric/Fluent UI Datepicker days of week are misaligned with calendar numerical date

Fabric/Fluent UI Datepicker calendar numerical dates are misaligned with the actual days of the week. Screenshot to demonstrate: ^ as can be seen, the highlighted today date is marked September 17th, 2020, under the calendar's Friday column, but…
Ian
  • 1
0
votes
1 answer

Fluent UI PeoplePicker onChange

I am trying to use the PeoplePicker control on Fluent UI: https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker How can I trigger an action when a selection is made? I don't see any onChange method or similar exposed in the API.
Christophe
  • 27,383
  • 28
  • 97
  • 140
0
votes
1 answer

Is there a way to add input field in nav element using React FluentUI (@fluentui/react)?

The examples on website show many examples of navbars with links. Image of navbar demo as shown on website. I want to implement a search bar inside the nav element like this. Is there a way to do it?
user14259168
0
votes
1 answer

How to get data from external file in render function in tsx file

I am developing an ApplicationCustomizer SPFX extension for SharePoint Online using visual studio code and react and Typesctipt. I am trying to generate a commandbar fabric ui component in the header section to render a fabric ui drop down menu. I…
0
votes
1 answer

React/Typescript restrictions on onRenderCell/onClick/... functions?

I'm trying to run Fluent UI Basic List example on my own bench. The example is presented here: https://developer.microsoft.com/en-us/fluentui#/controls/web/list. I copied entire example's code to app and replaced example's data with my own array.…
VIPPER
  • 326
  • 4
  • 24
0
votes
1 answer

Possibly 'undefined' error while compiling React code with onClick event

I'm fighting with Fluent UI Nav Link issue which appears when you user React Router. When you use Nav component standalone everything works fine. The problem is when you try to use it with React Router - it seems there's no a proper way to modify…
VIPPER
  • 326
  • 4
  • 24
0
votes
1 answer

Unable to load component properly from @fluentui/react-northstar@0.48.0 in a spfx webpart

I am using @fluentui/react-northstar carousal component link. it seems solution for my problem, but while loading it in spfx its not taking any default css or such. My webpart is simply showing images in vertical manner instead of showing proper…
0
votes
2 answers

Fluent/Fabric change dropdown menu css

I have a dropdown from Fluent UI and want to change the CSS of the dropdown options. I can add classes though className to the dropdown, but I can't reach the dropdown options through adding CSS here because the dropdown options exist on a layout on…
milmal
  • 526
  • 1
  • 9
  • 15
0
votes
1 answer

Is there a simple way to change the chevron icons in a nested Nav component?

I personally and a lot of customers think the default icons for links with nested items in the Nav component are strange. Hence I want their look and behavior to change from this: to this: (In the screenshots the size is also different, but that's…
alex3683
  • 1,460
  • 14
  • 25