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

microsoft fluent UI library doesn't work with react 18

microsoft fluent-UI/react library did not work on my project when I included it, what is the best way to make this work properly? the UI broke immediately after I ran the project and I would like to know what the best fix is to this problem
0
votes
1 answer

Fluent UI style not working in passed commands with buttons to CommandBar

i am using Fluent UI in my project. I dont know how to change hoover style in CommandBar. I initializing my buttons with this simple code in javascript: // inside `buttons` array key: 'newfolder', text: 'New Folder', iconProps: { iconName:…
michasaucer
  • 4,562
  • 9
  • 40
  • 91
0
votes
1 answer

How to change Fluent UI icon color on mouse hover?

i am using Fluent UI in my project. I initializing my button with this simple code in javascript: iconProps: { iconName: 'NewFolder', styles: { root: { color: 'orange' }, } }, and i can…
michasaucer
  • 4,562
  • 9
  • 40
  • 91
0
votes
1 answer

Blazor Fluent UI boiler plate

Do anyone know of boiler plate template like https://github.com/siminture/fluentui-starter for blazor server? I am looking for something we can use both for mobile and desktop views in a single template.
Sam
  • 281
  • 5
  • 15
0
votes
1 answer

How to get all selected values of Tag Picker in Fluent UI

In the docs, some of the props do not exist on the component, so I guess it's outdated. I have a TagPicker component, I'm using the Tag Picker with inline suggestions one.
Yosi Leibman
  • 386
  • 3
  • 16
0
votes
1 answer

Tag picker onChange event not firing

I'm trying to trigger an event when the user writes something in the input field of Fluent UI Tag Picker but it seems that it's not working for some reason. The documentation provides examples for onFocus event and that one is working fine, however…
0
votes
0 answers

Next.js - When I Refresh the page styling of Fluent UI dissappears

I am trying to learn Fluent UI, but it doesn't work well. I searched the documentation, and wrote the same codes, but I always get the same result. When I refresh the page, styling disappears and I see an ugly Nav. How can I solve this problem? Or…
Ozan Bilgiç
  • 215
  • 1
  • 9
0
votes
1 answer

how to call child component callback event from parent component in react

Hi I am a beginner in React, I am using Fluent UI in my project . I am planning to use Panel control from Fluent UI and make that as common component so that I can reuse it.I use bellow code import * as React from 'react'; import { DefaultButton }…
kuntal
  • 1,591
  • 2
  • 16
  • 36
0
votes
1 answer

ScrollablePane with DetailsList cannot scroll fixed header issue

I am using fluent UI details list. I tried to scroll my headers with scrollbar. But My headers are not scrolling when I scrolls horizontally. This is my code. I found this from an example. But nothing change from this. If anyone have idea about this…
AlexDemo
  • 141
  • 3
  • 14
0
votes
1 answer

Adding sorting icon in column header in Details List in Fluent UI

For a DetailsList or ShimmeredDetailsList, I need to add two arrows (one up, one down) besides the column name in the column header so that the user can look at the grid and tell which column is sortable and which is not. Currently I am using…
coolest-duck
  • 105
  • 1
  • 1
  • 10
0
votes
1 answer

Adding aria-label to label or paragraph

I am working on fixing a bug for a frontend built using Fluent UI. I have a ChoiceGroup in which I have rendered two div tags each having text. I want the screen reader to read both the texts when the first div is chosen. The only way I can narrate…
RPDev
  • 1
0
votes
1 answer

Is it possible to define global styles with fixed css class names (or selectors) using merge-styles library?

I'm using Microsoft's Fluent UI library to build a React application. For styling of my own components I switched to using their merge-styles library, mainly because it integrates nicely with Fluent UI theming and all of their components. (I'm still…
alex3683
  • 1,460
  • 14
  • 25
0
votes
1 answer

React Fluent UI - Change color of checkbox's checked mark and label

I've a react app using Fluent UI. I'm using component but it's having it's default colors and behavious. Like this: I want to change the color of the checked mark and also the label (Green checked mark and brown lable). I tried the…
Ankit Saxena
  • 1,067
  • 1
  • 4
  • 16
0
votes
0 answers

fluent ui nortstar FormDropdown make it required field

how can we make the the dropdown in the Nortstar Form as a required field? is it possible to do so ? in the Fluent ui Form for the textarea and input component we have required Field so onsubmit it validates the input Form shows to fillout for…
umgolla
  • 39
  • 8
0
votes
1 answer

Fluent UI React how to change nav link icon color?

I want to change the nav link icon color. If I set the primary color by creating a custom theme it won't effect. Actually it worked on hover but not…
abdllhcay
  • 69
  • 2
  • 6