bellcode-md v1.1.0

Bellcode material design 通用组件文档

有问题请与 md2@bellcode.com 联系，也欢迎其他小伙伴帮忙完善文档。

目前只做了少数通用组件，例如 Button, 该组件提供了丰富的自定义功能以满足不同地方对按钮样式的需求，其他前端小伙伴这里添加组件的时候，请参考 Button 的文件结构及代码实现。

开发规范

• 每一个组件的所有 props，除了 children， 应该是可选的。
• 大部分可配置项，应该是一个枚举值，即通过 export 一个对象让别人选择其中某种属性。

export const ColorType = {

  blue: "blue",

  orange: "orange",

  purple: "purple"

};

• 对于需要频繁定义样式的组件（如 button）， 应该尽量追求最大程度的可扩展性，如 style 应该可以通过传值得到完全的自定义。

render() {
    const { iconSrc, style } = this.props;
    return (
      <Button
        variant={this.props.variantType}
        className={this.className}
        style={style}
      >
        {iconSrc && <img className="icon" src={iconSrc} />}
        {this.props.children}
      </Button>
    );
  }

使用示例

见 teaching site/pages/material-gallery 文件。

import React, { Component } from "react";
import MDButton, {  VariantType, ColorType, SizeType } from "PublicRepo/material_components/button";

<MDButton >
	默认按钮
</MDButton>
<MDButton colorType={ColorType.orange}>
	按钮，颜色2
</MDButton>
<MDButton colorType={ColorType.purple}>
	按钮,颜色3
</MDButton>
<MDButton 
	variantType={VariantType.outlined} 
	colorType={ColorType.orange}>
	外框按钮, 颜色2
</MDButton>

Material-Gallery 相关

Material Gallery 是平台的一个不对外暴露的页面，目的是展示目前所有的通用组件，让设计师与产品经理有一个参考，降低重复实现相似样式的工作量。

所有的通用组件务必再 gallery 上添加你写好的组件，并最好添加上其各种可配置的样式。

todo

• gallery 支持显示代码，让开发者复制粘贴代码即可调用组件
• 从 public Repo 迁移为独立的 npm module