自定义文件浏览器
应用自定义主题
通过利用文件浏览器的组件,你可以轻松将Office UI Fabric应用到文件 Customizer 浏览器。
下面介绍了如何将主题应用到 GraphFileBrowser 使用 Customizer :
- 在应用程序React中,从
Customizer导入office-ui-fabric-react/lib/Utilities和从IThemeoffice-ui-fabric/lib/Styling导入。 - 创建自定义并
ITheme传递到 的settings属性Customizer。 可以使用Office UI Fabric主题生成器创建自定义调色板。 - 使用
GraphFileBrowser组件包装Customizer组件以查看应用的自定义主题。
下面是完成上述步骤后的代码示例:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GraphFileBrowser } from '@microsoft/file-browser';
import { Customizer } from 'office-ui-fabric-react/lib/Utilities';
import { createTheme, ITheme } from 'office-ui-fabric-react/lib/Styling';
export const theme = createTheme({
palette: {
themePrimary: '#6264a7',
themeLighterAlt: '#f7f7fb',
themeLighter: '#e1e1f1',
themeLight: '#c8c9e4',
themeTertiary: '#989ac9',
themeSecondary: '#7173b0',
themeDarkAlt: '#585a95',
themeDark: '#4a4c7e',
themeDarker: '#37385d',
neutralLighterAlt: '#f8f8f8',
neutralLighter: '#f4f4f4',
neutralLight: '#eaeaea',
neutralQuaternaryAlt: '#dadada',
neutralQuaternary: '#d0d0d0',
neutralTertiaryAlt: '#c8c8c8',
neutralTertiary: '#c2c2c2',
neutralSecondary: '#858585',
neutralPrimaryAlt: '#4b4b4b',
neutralPrimary: '#333',
neutralDark: '#272727',
black: '#1d1d1d',
white: '#fff'
},
semanticColors: {
bodyBackground: '#fff',
bodyText: '#333'
}
});
class App extends React.Component {
getAuthenticationToken() {
return Promise.resolve('<access_token>');
}
render() {
return (
<Customizer
settings={ { theme } }>
<GraphFileBrowser
getAuthenticationToken={this.getAuthenticationToken} />
</Customizer>
);
}
}
ReactDOM.render(
<App />,
mountNode
);
呈现自定义操作按钮
为了支持高级方案,文件浏览器 SDK 公开用于React"选择"和"取消"操作按钮的"组件"属性。
默认情况下,组件在页脚中呈现"选择" GraphFileBrowser 和"取消"按钮。
每个按钮都有一个对应的函数,用于提供要呈现的自定义元素来表示默认按钮。
它们分别命名为 onRenderSuccessButton 和 onRenderCancelButton 。
/**
* Custom render function for the "Success" action button.
*/
onRenderSuccessButton?: IRenderFunction<IButtonProps>;
/**
* Custom render function for the "Cancel" action button.
*/
onRenderCancelButton?: IRenderFunction<IButtonProps>;
和 onRenderSuccessButton onRenderCancelButton 属性的类型均来自 IRenderFunction office-ui-fabric-react 。
此类型接受组件属性并调用可选的呈现函数,该函数将属性用作其唯一的参数。
对于操作按钮,将传入类型的默认操作 GraphFileBrowser IButtonProps 按钮属性。
然后,开发人员可以随意应用这些属性,并返回一个有效 JSX.Element 属性,但是他们希望。
本演练介绍了自定义操作按钮的文本和样式。
自定义按钮文本
上述呈现函数允许完全自定义操作按钮。 例如,您可以使用以下实现自定义控件的文本,同时保留其余默认属性:
class App extends React.Component {
public render() {
return (
<GraphFileBrowser
getAuthenticationToken={this.getAuthenticationToken}
onRenderSuccessButton={this.onRenderSuccessButton}
onRenderCancelButton={this.onRenderCancelButton} />
);
}
private getAuthenticationToken() {
return Promise.resolve('<access_token>');
}
private onRenderSuccessButton(props) {
return <PrimaryButton {...props} text="Ok" />
}
private onRenderCancelButton(props) {
return <DefaultButton {...props} text="Discard" />
}
}
这会将组件"选择"和"取消"按钮的文本替换为"确定"和"放弃 GraphFileBrowser "。
自定义按钮样式
通过使用 IRenderFunction<IButtonProps> ,开发人员可以自定义"文件浏览器"按钮,而更改其文本值。
例如,可以通过替代默认、悬停和按下的样式来按每个按钮应用自定义样式。
基于上述自定义"选择"按钮构建,让我们在默认、悬停和按下状态下 background-color 应用自定义。
由于我们呈现的是 Button,因此可以使用此 Wiki 条目中介绍的库方法设置 office-ui-fabric-react PrimaryButton styles 组件样式。
private onRenderSuccessButton(props) {
const styles = {
root: {
backgroundColor: '#5c2d91'
},
rootHovered: {
backgroundColor: '#6b3e9f'
},
rootPressed: {
backgroundColor: '#32145a'
}
};
return <PrimaryButton {...props} text="Ok" styles={styles} />
}
应用上述更改后,刷新应用程序以查看"确定"按钮以一组自定义颜色呈现,该按钮用于鼠标悬停、按下和默认 background-color 状态时。