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

Custom table filtering for MSTeams using fluentui/northstar

I am developing a custom tab for the MS Teams using the fluentui/react-northstar v0.51.4 I have a requirement to have a table with the capability of Sorting, Filtering, and Paging the table. I am not able to find any of the details for the same. If…
Sigar Dave
  • 2,598
  • 1
  • 20
  • 42
0
votes
1 answer

react-sortable-tree Crud Operation using hooks

I would try to do a react-sortable-tree Crud Operation. I have Too much Struggle to update Data after Editing. Kindly anyone clarifies my issues. I would attach my code sandbox live link…
Annath Raj
  • 11
  • 1
0
votes
1 answer

How to style new @fluentui/react-button [v8 beta]?

Is there any documentation on how to apply style customisations to the new Button? The styling using the IButtonStyles interface is broken on the new button, as per code below. import { PrimaryButton } from '@fluentui/react'; import { Button as…
David Min
  • 1,246
  • 8
  • 27
0
votes
0 answers

Compatibility between the Microsoft Graph Toolkit and Fluent UI styling

I am building Web forms that use a mix of Microsoft Graph Toolkit components (React flavor) and Fluent UI components. What is the proper way to style those forms? Are the Fluent UI styles going to work seamlessly on mgt components as well, or are…
Christophe
  • 27,383
  • 28
  • 97
  • 140
0
votes
2 answers

Why do we add " ( ) => " before a function reference?

I am learning typescript and was trying to implement a detailList component from Microsoft Fluent UI, but I ran into some trouble: Type '(ev: React.MouseEvent, checked: boolean) => void' is not assignable to type '(event:…
Haytham
  • 23
  • 6
0
votes
2 answers

Update node in react-sortable-tree

I need to update the node into to edited node. when I edit and update the node means that node to add parent node. kindly help me to fix those issues. I would attach my project code sandbox link…
Saranya S
  • 13
  • 6
0
votes
2 answers

FAST and BLAZOR - How to change the Color Palette of fluent-design-system-provider with Blazor

I am evaluating the new Microsoft fast.design https://www.fast.design/ with fluent-design-system-provider and trying to customize the accent color for Blazor project but no luck... This is what I did so far as per the official documentation…
ameya
  • 1,448
  • 1
  • 15
  • 31
0
votes
1 answer

Building a dashboard with fluent-ui in React and the cards and table appear at bottom of screen when they're not supposed to

I am following a tutorial to build a dashboard using fluentui in React, and am going to customise it and change it afterwards. However I have followed the tutorial exactly and got no errors but for some reason the cards and table appear at bottom of…
MicSt
  • 177
  • 2
  • 21
0
votes
1 answer

Update default value in React component

I would like to set a default value on an Input from a value stored in redux. I saw in this post that defaultValue is only for first rendering. So I tried to use instead value then the problem is that I'm not getting able to change it's…
infodev
  • 4,673
  • 17
  • 65
  • 138
0
votes
0 answers

calling loadTheme from a .ts file

I one of my "office-ui-fabric-react" project, I am writing a utility class(common.ts) where I have a function to load theme for a page. This utility class will be included as part of the script tag in an html file as common.js. I want to call…
0
votes
1 answer

Fabric/Fluent UI Details List: Highlight column when clicked on the Header

Is there a way to highlight the whole column or at least the header in DetailsList when clicked, with a condition that only 1 column can be selected at a time? Changing the class inside 'onColumnHeaderClick' works but, it doesn't make the columns…
0
votes
1 answer

Background Image Not Displaying in React App

I am trying to use a background image of an upload icon in my video cards within my React app, but so far have been unable to get the background image to display. I see the background color I have declared, but not the background image, and I'm not…
Muirik
  • 6,049
  • 7
  • 58
  • 116
0
votes
1 answer

React - function does not print current states

Playing with Fluent UI DetailsList, I've created this solution. I've deleted all unnecessary lines to minimize the problem, as it appears that when logging in onColumnClick then somehow it doesn't print the current state but the initial state, why…
0
votes
3 answers

React component is not accepting JSX Element as prop

I would render a component as a Label content instead of a string. Actually I'm getting this error: The shorthand prop for "Box" component was passed a JSX element but this slot only supports string|number|object|array|ReactElements. import…
infodev
  • 4,673
  • 17
  • 65
  • 138
0
votes
0 answers

Applying style distorts React Callout component

I have a react application with the Callout component that looks perfectly normal if I don't apply any styles to it. Its pointer perfectly points to a filter button However, when I try to hide it (apply display:none to it) and un-hide it, the…
James
  • 1,081
  • 4
  • 15
  • 34