Git Product home page Git Product logo

bfd-ui's Introduction

BFD UI

build status npm package NPM downloads

企业级 React 组件库 http://ui.baifendian.com

安装

npm install bfd-ui --save

使用

BFD 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 配置完成后,即可在代码中使用组件,以 DatePciker 为例:

import React, { Component } from 'react'
import DatePicker from 'bfd/DatePicker'

class App extends Component {

  handleSelect(date) {
    console.log(date)
  }

  render() {
    return <DatePicker onSelect={this.handleSelect} />
  }
}

强烈建议基于脚手架开发,省去繁琐的环境配置、项目基本结构、模板以及开发和部署相关工作

组件全局配置

覆盖或扩展 defaultProps 即可,以 DatePciker 为例:

DatePicker.defaultProps = Object.assign(DatePicker.defaultProps || {}, {
  placeholder: 'Please select date'
})

命令式 API 模块 messageconfirmxhr 也支持全局配置,涉及 url 方式加载数据的组件以及 Form 均依赖 xhr。详细配置请参考其各自文档

全局配置后,这些 API 会变成有状态的,即最终结果受配置影响,所以尽量一次性配置并向其它开发者说明

受控属性与不受控属性

组件支持不受控(defaultXXX)的使用方式,关于为什么区分受控 / 不受控请参考 Controlled / Uncontrolled Components

浏览器支持

Chrome、Firefox、Safari、IE9+

开发者说明

开发环境安装

git clone https://github.com/yourName/bfd-ui.git

# DEMO 站集成了脚手架项目的说明,所以需要依赖这个项目的一些资源,与 bfd-ui clone 在同一目录下即可
git clone https://github.com/baifendian/create-bfd-app.git

cd bfd-ui

npm install

npm start

查看: http://localhost:4001

开发规范

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

编写一个新组件

npm run create MyComponent

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

更新日志

CHANGELOG

LICENSE

BSD License

bfd-ui's People

Contributors

allan8212 avatar antsfee avatar caojingwei avatar dangtuo avatar goddie1 avatar haroenv avatar jianghai avatar jiangtl avatar sunny586 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bfd-ui's Issues

提示的一些需求

1.message提示样式太太太丑,希望可以提供可选样式,简洁鲜明的那种,然后位置可以控制,在上下,左右中。
2.可以提供不关闭模式,不设置自动关闭,由用户手动关。X。
3.confirm提供自定义按钮组,可选择2个按钮或3个按钮。

4.form中的表单元素可以提供去前后空格配置

Model

为什么老是弹不出来

form 回车事件

Form 表单 FormSubmit 貌似不能响应回车事件,(type=submit)这个属性 可以修改一下

NAV组件

能不能提供一个open属性,控制子节点的展开和隐藏。目前只有defaultOpen。

selec控件需求

1.下拉给配置不自适应选择展示上方或下方,默认展示在下面。
2.select 的handleSelect返回event。

官网有问题

官网的字体选择有问题,mac下看着又晕又瞎, 背景太白,字太细

datatable几点建议

datatable有几点使用起来不是很方便,希望能修改一下:
1.datatable 列配置里面的render方法参数没有提供列的序号,不方便删除列。
2.datatable url方式获取数据时没有提供回调函数供格式化api返回的数据。
3.datatable 前端分页需要自己计算分页数据,不够智能,希望能自动计算分页。
4.如果 datatable 实现了自动分页的,希望能提供修改分页页码相关控件的render方法,以便定制分页页码样式。

国际化支持

const text = require('./lang/' + process.env.LANG)

webpack配置

config.plugins.push(new webpack.DefinePlugin({
    'process.env': {
      'LANG': JSON.stringify('en')
    }
  }))

自动完成 AutoComplete

当备选框里的source={[.....]}值发生改变时,备选框收起了。能否做成类似百度搜索框的功能。输入框的值发生改变,备选框的内容也相应发生改变,且不收起。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.