lcgc-ui v0.0.16

一、说明

整理目前前端拥有的一些前端组件，方便开发复用，以及快速知道有哪些组件，具体效果如何。

二、安装

npm install lcgc-ui --save

三、使用

LCGC UI 抛弃传统的资源加载方式，基于 webpack 打包，资源种类多种多样，会涉及一些 webpack 的配置，如下：

{
  module: {
    loaders: [{
      test: /\\.(eot|woff|woff2|ttf|svg|png|jpg)(\\?v=[\\d\\.]+)?$/,
      loader: 'file?name=files/[hash].[ext]'
    }, {
      test: /\\.css$/,
      loader: 'style!css'
    }]
  },
  resolve: {
    alias: {
      bfd: 'bfd-ui/lib'
    }
  }
}

webpack 配置完成后，即可在代码中使用组件，以 ActionSheet 为例：

import actionSheet from 'bfd/ActionSheet'

const ActionSheetBasic = () => {
  return (
    <button onClick={() => {
      actionSheet.show('动作面板', () => {
        return (
          <div>
            这个是一个面板
          </div>
        )
      })
    }}>展示动作面板</button>
  )
}

四、开发规范

• 向下兼容
• 单元测试：组件根目录下创建 __tests__ 文件夹【TODO】
• 代码规范参考 airbnb react

编写一个新组件

npm run create MyComponent

查看: http://localhost:4001/components/MyComponent