Stack Overflow
Stack Overflow

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

Where are the css variables generated in the fluentui source code?

I want to implement my own UI based on fluent design system language (many tokens) with Emotion. This is some code of my lib. import { css } from '@emotion/react'; import { tokens } from '@fluentui/react-theme'; const smallSizeCss = css({ padding:…
hilodfulaidien
  • 11
  • 2
1
vote
0 answers

How can I disable the checkbox in a Details List after certain numbers of item selection?

I have a fluent UI details list component which contains onRenderCheckbox method. We are using this method to render a custom checkbox. Now the requirement is after 'N' number of item selection those checkbox should be disabled and if someone…
Xero
  • 21
  • 2
1
vote
1 answer

Loading Fluentui 9.19.1 React components' style on Microsoft SharePoint WebPart

I'm currently developing a Microsoft WebPart. I'm using "yo @microsoft/sharepoint" to generate the project with React framework and I'd like to use the new "@fluentui/react-components" to design the WebPart. But, when I deploy the application, the…
Dams
  • 11
  • 4
1
vote
1 answer

FLuent UI React v9 in Formik

I created a Formik form that uses Fluent UI v9 components on a Formik form (Input, Textarea and Dropdown). The first 2 work as expected but I cannot figure out how to wire up the Dropdown, resulting in two issues: (a) the dropdown does not update…
Donald Koscheka
  • 336
  • 1
  • 6
1
vote
0 answers

Add link to text in react

Assuming I have this text : Sources document : link1 link2 link3 I want to add a a fluent ui Link components to all 3 string link1, link2, link3 like this : {link1} and return the initial text with the…
Yafaa Ben Tili
  • 176
  • 1
  • 7
1
vote
1 answer

Upgrading Microsoft.Fast.Components.FluentUI 1.6.0 to 2.1.4 Blazor WebAssembly does not load CSS or JS

Looking at the NuGet for Microsoft.Fast.Components.FluentUI 2.14 they state the following: When upgrading from an earlier version If you are upgrading from an earlier version of the library, please see the what's new for information on (breaking)…
Ogglas
  • 62,132
  • 37
  • 328
  • 418
1
vote
0 answers

Receiving an SSL connection could not be established error when using Fast.Components.FluentUI on Blazor Server

NET community When using Fast.Components.FluentUI on Blazor Server (.NET 7), I get the following error on components where the FluentDataGrid component is used: [2023-03-24T09:47:34.226Z] Error: System.Net.Http.HttpRequestException: The SSL…
Sascha
  • 11
  • 3
1
vote
1 answer

How to style Fluent UI checkbox?

I need to style Fluent UI checkbox and change checkmark color while it is in indeterminate state. I use Flueint UI 8.x. "dependencies": { "react": "16.8.6", "@fluentui/react": "8.29.0", "react-dom": "16.8.6" } I was able to style…
Sergiy Kostenko
  • 273
  • 1
  • 2
  • 11
1
vote
1 answer

Display few items in the list TypeScript/React/FluentUI

I have the following code to display a list of items using Fluent UI DetailsList control. The response includes a total of 200 items. However, I only see 30 items in the list on running the code. What am I missing? import React from 'react'; import…
user989988
  • 3,006
  • 7
  • 44
  • 91
1
vote
1 answer

How to override css style of shadow dom

I am using the fluent ui web component for autocomplete drop-down. I want to change the background of the drop-down box but there is a #shadow-root(open) created which I am not able to override. So please help me how to override this shadow dom. I…
Poojan3037
  • 310
  • 1
  • 9
1
vote
2 answers

Make the width of the dropdown list different from the width of the dropdown button

I would like to realize a dropdown, where the width of the dropdown button is not necessarily equal to the width of the dropdown list. I know that we can use style={{ minWidth: '200px' }} to control the width of the dropdown button and dropdown…
SoftTimur
  • 5,630
  • 38
  • 140
  • 292
1
vote
1 answer

Adjust the width of the dropdown button

I'm using the preview Dropdown of Fluent UI. I would like to reduce the width of the button. I tried to modify maxWidth: "500px", it did not work. I tried to add root={{ minWidth: "100px"}} in the
SoftTimur
  • 5,630
  • 38
  • 140
  • 292
1
vote
1 answer

Nested components & styles in fluent ui v9 / Griffel

I have a style for a standard list export const useOverrides = makeStyles({ list: { ...shorthands.padding("2px", "4px", "8px", "30px"), }, I add it to the list
  • item1
  • item1
    • …
TommyD
  • 913
  • 3
  • 17
  • 32
1
vote
3 answers

Make a panel under a button that overlays another element

I have an editor and several buttons above it on the right. I would like to have a panel just under Button2 that overlays the editor. Then, clicking on Button2 will expand and collapse the panel (which will be easy to implement). I have written the…
SoftTimur
  • 5,630
  • 38
  • 140
  • 292
1
vote
1 answer

How to add a click handler to Fluent UI v9's SplitButton?

The documentation of Fluent UI v9's SplitButton is not clear on how to add a click handler to the primary button. Can anyone show me an example of how that is done? I have tried finding examples on their GitHub page and I've googled for possible…
Willem Sleegers
  • 63
  • 1
  • 4
1 2 3
…
25 26