Questions tagged [fluentui-react]

Fluent UI react or web represents a collection of utilities, React components, and web components for building web applications. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior. Home: https://developer.microsoft.com/en-us/fluentui#/ Source: https://github.com/microsoft/fluent-ui-react

Fluent UI react or web represents a collection of utilities, React components, and web components for building web applications. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.

Home: https://developer.microsoft.com/en-us/fluentui#/ Source: https://github.com/microsoft/fluent-ui-react

311 questions
1
vote
1 answer

Masonry layout in Fluent UI?

In Fluent UI's sample I see supports dynamically rendering grid items. https://developer.microsoft.com/en-us/fluentui#/controls/web/list In our app we have grids in same width but different height and want them stack vertically in multiple…
1
vote
1 answer

Hide a Column in fluent-UI Detailslist

How do one hide/prevent a column from rendering in fluent-UI DetailsList component.
1
vote
1 answer

Other way to share react ts components between projects

I have been looking for a way to mostly share some code between projects specifically for SPFX and fluent ui. We found 3 main ways to do that. 1. Creating a component library is the way that seemed least complicated cause it uses the same…
1
vote
1 answer

How to use FluentUI React Northstar icons in Fluent UI Contextual Menu

We're using a Fluent UI React Contextual Menu because the Fluent UI Northstar library doesn't contain a Context Menu Component. However, we'd like to use the MS Teams Icons that are in the Fluent UI Northstar library but I can't seem to find any…
HK1
  • 11,941
  • 14
  • 64
  • 99
1
vote
1 answer

Fabric UI Using PivotItem in Map Loop

I'm trying to dynamically add PivotItems to a Fabric UI Pivot. return (
Add
Tobias Koller
  • 2,116
  • 4
  • 26
  • 46
1
vote
0 answers

Using @fluentui/react (not the "northstar") to build UI for teams tab?

How do I use classic "@fluentui/react" (not "@fluentui/react-norhtstar") to build an app for Microsoft Teams? I mean, basically I would like to have the "classic" FluentUI lib to use the theme settings from the teams.
Nikolay
  • 10,752
  • 2
  • 23
  • 51
1
vote
0 answers

How to add non-button items to Commandbar?

Can components other than button be added to Commandbar ? I want to add a SearchBox to the Commandbar . Is that possible?
Alcibiades
  • 335
  • 5
  • 16
1
vote
0 answers

react-hook-form & components without 'name' property

In a React project, I have a table which renders rows with lots of columns, most of them containing Fluent UI controls. I can use the react-hook-form Controller component to handle most of the cases. The issue is that part of the controls I'm using…
n0e
  • 309
  • 3
  • 12
1
vote
0 answers

Not able to provide input when we use Adaptivecards fabric UI in spfx bot extension

Not able to provide input when we use AcFabric from adaptivecards-fabric in spfx bot extension version we are using "adaptivecards-fabric": "^1.1.1", We are using adaptivecards package with bot framework in spfx solution. Issue: When we do not use…
Jaya Raut
  • 21
  • 6
1
vote
1 answer

Why is React.useCallback used here, instead of a normal function?

I am looking at an example in the documentation of fluentui: ... export const TextFieldControlledExample: React.FunctionComponent = () => { const [firstTextFieldValue, setFirstTextFieldValue] = React.useState(''); ... const…
O. Altun
  • 685
  • 7
  • 20
1
vote
1 answer

How to freeze first column in Fluent UI details list

How can I freeze the first column only in Fluent UI Details list? Columns are more than 40 . Hence needs to be frozen so that horizontal scroll can be used.
bharath
  • 111
  • 1
  • 2
  • 15
1
vote
2 answers

Checkbox size in Fluent UI Northstar

What is the proper way to control the size of checkboxes in Fluent UI Northstar? I have tried adjusting the font size and the height, but it only acts on the label, not the box itself. And I didn't find anything in the documentation.
Christophe
  • 27,383
  • 28
  • 97
  • 140
1
vote
1 answer

How to center button in TeachingBubble FluentUI component?

I'm using Fluent UI's TeachingBubble component. I want it to have one button, which should be centered. How can that be done? I'm unable to move it from the bottom right corner. Current code:
Alcibiades
  • 335
  • 5
  • 16
1
vote
2 answers

How to use the Fluent UI Northstar Color Palette?

Fluent UI Northstar comes with a color palette. I can find the color names and gradients in the documentation, but how am I supposed to use the names and gradient values (100, 200, etc.) in TypeScript? I couldn't find any documentation or examples.
Christophe
  • 27,383
  • 28
  • 97
  • 140
1
vote
0 answers

FluentUI - Dashboard template

I didn't understand if it is possible to customize a dashboard template of Fluent UI https://dev-int.teams.microsoft.com/storybook/main/index.html?path=/story/ui-templates-dashboards--default. for example: Question 1 - is it possible to increase the…