office-ui-fabric

Office ui Fabric People Picker, pass varaibles to onChangeEvent

由 怎甘沉沦 提交于 2020-04-30 11:47:47
问题 I would like to know if there is a possibility to added a variable to the default onchange event of the office ui fabric react People Picker component. In the onchange event default is onChange?: (items?: IPersonaProps[]) => void I would like to pass an variable to add to an array like Key Value for using later in my code. 回答1: You can build a HOC to achieve this. Define // Your HOC component interface Props { yourCustomState: string // get custom value from props ... return ( <> <Select

Office ui Fabric People Picker, pass varaibles to onChangeEvent

由 时光毁灭记忆、已成空白 提交于 2020-04-30 11:44:49
问题 I would like to know if there is a possibility to added a variable to the default onchange event of the office ui fabric react People Picker component. In the onchange event default is onChange?: (items?: IPersonaProps[]) => void I would like to pass an variable to add to an array like Key Value for using later in my code. 回答1: You can build a HOC to achieve this. Define // Your HOC component interface Props { yourCustomState: string // get custom value from props ... return ( <> <Select

Content Security Policy and Office UI Fabric

由 情到浓时终转凉″ 提交于 2020-03-05 06:57:18
问题 I've been trying to set up a CSP to work with Office UI Fabric React. Is it possible to get anything more secure than style-src 'unsafe-inline' ? We have a Create React App with TypeScript and we're using Office UI Fabric React to provide a consistent look and feel. Using csp-html-webpack-plugin and craco, when INLINE_RUNTIME_CHUNK=false is set it is possible to generate the CSP with hashes for styles and scripts for our own code. The problem occurs with Office UI Fabric React - it injects 7

CSS oddities with Office UI Fabric libraries

由 只愿长相守 提交于 2020-01-04 04:22:07
问题 I'm working on a Word 2016 Add-in project and I'm having some difficulties using Office UI Fabric libraries. Basically I would like to give my Add-in the official Office look & feel, so I thought that Office UI Fabric would be the best choice, in conjunction with Fabric javascript components, like dropdown menus and so on. I installed these two NuGet packages: OfficeUIFabric 2.6.3 and OfficeUIFabricJS 1.4.0 , then I added some components to a page, by using these css classes: "ms-Dropdown",

How we can close the error messagebar of office react fabric component?

由 孤街醉人 提交于 2019-12-23 17:24:09
问题 I am trying to use fabric react messageBar component in my application but i am not able to close(dismiss) the message section even i clicked on close icon in the messageBar component. Please find the below code for reference. import React from 'react' import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib-commonjs/MessageBar' class MyMessage extends React.Component{ log=(event)=>{ console.log('close on test'); } render(){ return( <div> <MessageBar componentRef={(messageBar)=>

Don't hide items when there are still space

由 梦想与她 提交于 2019-12-12 05:37:12
问题 I am trying to use the command bar of ng-office-ui-fabric, here is a code <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" /> <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" /> <script src="https://cdnjs

Getting simple web project running with Fabric React

由 [亡魂溺海] 提交于 2019-12-12 04:04:12
问题 ----UPDATE---- Got it to work using the following: Webpack Typescript ts-loader react react-dom @types/react @types/react-dom office-ui-fabric-react Once I had a simple react example running, it was easy to do the same for fabric-react. Some good tutorials: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html https://medium.com/@gmonne/simple-app-layout-with-office-ui-fabric-react-2eac6361e1b4 ----Original post---- As a newcomer to React / node I want to create a test application

How to change layout of Office's Fabric elements?

由 江枫思渺然 提交于 2019-12-11 20:01:25
问题 I'm fairly new to React and Microsoft's Fabric. I've been trying to figure out if I can change the layout of elements inside a <GroupHeader> Looking at the source it's not totally clear to me if the elements follow some sort of layout style, or if they just appear in the order of declaration inside the render function. I was hoping to rearrange some elements rather than create a completely custom <GroupHeader> . I've tried adjusting some CSS properties and passing those in as a className ,

Office ui fabric panel won't close

由 回眸只為那壹抹淺笑 提交于 2019-12-11 19:52:06
问题 I use an Office UI Fabric Panel (nothing special, just as in the Microsoft examples). However, I want to trigger the panel programmatically. I open the panel lik this: $("#btnOpenPanel").trigger( "click" ); In the panel I have a form. When I submit the form I do an update in the database and close the form. The database update works fine and I want to close the panel the same way I opened it. So like this again: $("#btnOpenAddPanel").trigger( "click" ); But that is not working. The panel

React Fabric UI Pivot unmounts component on PivotItem change

由 扶醉桌前 提交于 2019-12-11 19:14:40
问题 I'm using a Pivot component from FabricUI but I'm stuck because I have several PivotItems and every PivotItem has a child component that talks to the server when it's mounted. Every time I change a pivot item, current component get's unmounted and a new one is mounted. <Pivot> <PivotItem linkText='One' itemKey='0'> <GridDataOne/> </PivotItem> <PivotItem linkText='Two' itemKey='1'> <GridDataTwo/> </PivotItem> </Pivot> class GridDataTwo extends React.Component<any,any> { ... componentDidMount()
订阅 office-ui-fabric