在使用Microsoft Teams接入其他系统的时候,当然会碰到一些兼容样式不统一问题。那这种问题怎么解决呢?有没有类似于Office UI Fabric的东东?这样我们可以接入系统,样式不成拦路虎。
答案是肯定的,这就是官方提供的React组件,npm package包在这儿:https://www.npmjs.com/package/msteams-ui-components-react。国内的registry也有,淘宝大法好:https://npm.taobao.org/package/msteams-ui-components-react。
用法就不提了,在链接里也都有。使用React的大神比我更清楚,一眼就明白。其中react组件和microsoft teams的javascript sdk配套使用,很强大。
在真正使用之前,大家可能想知道某些组件究竟什么样式,自己需要的能不能在这个package里找到?所以,基于这个问题,
这篇文章就跟大家介绍一下Control library【其实也是App Studio里的一个功能,很好用。关于App Studio,请戳https://blog.csdn.net/beastboy/article/details/100578648】。
闲言少叙,直接入正题。上图瞧瞧什么样:
可以看到,App Studio里的这个Control library就是为界面控件设计而来,有针对这个控件库的介绍,也有各种控件的样式展示。
如button:
还有dropdownlist
再比如toggle【每个控件都会有样式展示,而且可以show出code,很是方便】:
class ToggleExample extends React.Component {
constructor() {
super();
this.onToggle = this.onToggle.bind(this);
this.state = { toggle: false };
}
onToggle() {
this.setState({toggle: !this.state.toggle});
}
render() {
return <TeamsThemeContext.Consumer>
{(context) => {
const { rem, font } = context;
const { sizes, weights } = font;
const styles = {
header: {...sizes.title, ...weights.semibold},
section: {...sizes.title2, marginTop: rem(1.4), marginBottom: rem(1.4)}
}
return <Panel>
<PanelHeader>
<div style={styles.header}>Toggles</div>
</PanelHeader>
<PanelBody>
<div style={styles.section}></div>
<Toggle autoFocus checked={this.state.toggle} onToggle={this.onToggle} />
<Toggle autoFocus disabled checked={this.state.toggle} onToggle={this.onToggle} />
</PanelBody>
<PanelFooter>
</PanelFooter>
</Panel>;
}}
</TeamsThemeContext.Consumer>
}
}
其他控件也都有code,直接copy过来,非伸手党,但这确实很方便,拿过来改改,提高效率嗖嗖的~~~~
如果有童鞋想自己写,也没问题,直接引用npm包就好。根据个人需要自取。
总之,微软也是为这个社区和平台提供强有力的支持。如果哪些需求暂时没有官方solution,大家也可以去User Voice【https://microsoftteams.uservoice.com/forums/555103-public】上去提提意见。