问题标签 [office-fabric]

我需要创建一个与 Office 365 和 Exchange Online/2016 视觉一致的管理门户

在这些情况下，哪些 UX 体验与管理门户最相似？

我发现了Office Fabric，但不确定获取 Exchange 管理员页面还需要什么。

我正在使用Office-Fabric-Ui及其对话框功能。

现在，uidialog有_overlay变量，单击此_overlay关闭uidialog，但我们不希望对话框在单击时关闭并尝试删除处理程序_overlay

我尝试了许多解决方案，其中一些解决方案仍然无法从覆盖元素中删除处理程序：

解决方案 1

解决方案 2

有人可以建议如何删除点击事件处理程序fabric.Overlay吗？

对于 DetailsLists，“onActiveItemChanged”不能很好地打开该项目的模式对话框，因为第二次单击同一行（关闭模型对话框后）将被忽略，因为 activeItem 没有更改。“onItemInvoke”也不是很好，因为它只响应双击。

有没有办法清除活动项目？

我的表单中有一个 TextField 和 PrimaryButton。

单击按钮时，我想验证文本字段。如果没有值，则在单击按钮时触发必填字段验证，并显示与 onGetErrorMessage 事件显示相同的消息。

我知道验证是触发 onBlur 事件，但我想在按钮单击时触发验证。

我该怎么做？

我的导航项目需要更改颜色和图标。

但是，我发现我似乎拥有的一组图标和 iconClassName 似乎没有被显示

Nav 和 CommandBar 中似乎支持一组有限的图标。这个对吗？我也很惊讶 iconClassName 没有被选中。

我想增加height. _ _divdivclass=ms-Dialog-content content_49e4f91aiframe

有没有办法在 office.js 对话框中应用 css？

请建议。谢谢。

我不知道如何设置织物 ui 组件的样式。我只想将导航栏的背景更改为白色手机的黑色，而不是白色背景和黑色字体。但是，对于当前组件，这似乎真的很难。

几乎没有关于如何设计样式的文档。

https://dev.office.com/fabric#/components/nav

谢谢，德里克

有人对如何在反应详细信息列表中聚焦按钮有建议吗？Refs 似乎是要走的路，我想做这样的事情：

但我无法获得按钮元素的 ref 句柄。

我尝试过的一种方法是在我的 DetailsList 中：

还有我想要关注的按钮（来自renderItemColumn）：

在 didComponentMount() 中，我现在可以访问 DetailList，但我不确定如何让按钮 ref 获得焦点。

或者，我可以将按钮定义为：

这给了我一个按钮的句柄，但它没有 focus() 函数。

谢谢你的想法。

Office Fabric 具有“非模态”面板的概念： https ://developer.microsoft.com/en-us/fabric#/components/panel

非模态面板不会在面板的其余部分上显示阴影覆盖，并且非模态区域中的按钮将对悬停事件做出反应，但它们不会响应点击（在示例中也是如此）

如果不是这种情况，我不清楚非模态面板的目的。

有没有办法响应非模态外区域的点击？

我正在制作一个MERN用于培训的应用程序，尽管使用Office Frabric UI可能是个好主意。

我正在为我的应用程序使用服务器端渲染，但是当我使用单个<Fabric>组件时出现此错误：

这就是问题。

好的，我在服务器端渲染的“文档”步骤中看到：

1. 我把它放在我的serverRender文件中：

   从“反应”导入反应；从 'react-dom/server' 导入 ReactDOMServer；从'axios'导入axios；从“@microsoft/load-themed-styles”导入 { configureLoadStyles }；

   从 './src/components/app' 导入应用程序；从'./config'导入配置；

   const getApiUrl = CompetitionId => { if (contestId) { return ${config.serverUrl}/api/contests/${contestId}; } 返回${config.serverUrl/api/contests}；};

   const getInitialData = (contestId, apiData) => { if (contestId) { return { currentContestId: apiData.id, 竞赛: { [apiData.id]: apiData } }; } 返回 { 比赛：apiData.contests }; };

   const serverRender = (contestId) => axios.get(getApiUrl(contestId)) .then(resp => { let _allStyles = ''; const initialData = getInitialData(contestId, resp.data); configureLoadStyles((styles: string) = > { _allStyles += 样式; });

   导出默认服务器渲染；

2. 这是我的server文件：

   从'./config'导入配置；从'./api'导入apiRouter；从'./serverRender'导入服务器渲染；

   // 从 'node-sass-middleware' 导入 sassMiddleware; 从“路径”导入路径；从“快递”进口快递；

   常量服务器 = 快递（）；

   /* server.use(sassMiddleware({ src: path.join(__dirname, 'sass'), dest: path.join(__dirname, 'public') })); */

   server.set('视图引擎', 'ejs');

   server.get(['/', '/contests/:contestId'], (req, res) => { serverRender(req.params.contestId) .then(({ initialMarkup, initialData, styles }) => { res .render('index', { initialMarkup, initialData }); red.render('header', { styles }); }) .catch(console.error); });

   server.use('/api', apiRouter); server.use(express.static('public'));

   server.listen(config.port, config.host, () => { console.info('Express监听端口：', config.port); });

3. 最后在我的header文件中：

   命名比赛

   <%- 样式-%>

它仍然不起作用。

哪个是正确的从到 SSR Office Fabric UI？