如何使用前端代码写出Teams里的样式?

在使用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】上去提提意见。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页