# bellcode-md

> The BellCode UI library

Latest version **1.1.0** (published 2018-08-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install bellcode-md
pnpm add bellcode-md
yarn add bellcode-md
bun add bellcode-md
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-08-16 |
| First published | 2018-08-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 27.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | MD2/NY/ |
| Maintainers | bellcode-ny |

## Links

- npm: https://www.npmjs.com/package/bellcode-md
- npm.io page: https://npm.io/package/bellcode-md

## Dependencies (2)

- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^1.2.0
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^2.0.0

## Recent versions

- 1.1.0 (latest) — 2018-08-16
- 1.0.0 — 2018-08-16

## README

# Bellcode material design 通用组件文档

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

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

## 开发规范

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

```javascript
export const ColorType = {

  blue: "blue",

  orange: "orange",

  purple: "purple"

};
```

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

```react
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 文件。

```react
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](www.bellcode.com/#/gallery) 相关

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



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



## todo

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

---
_Source: https://npm.io/package/bellcode-md · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._