React UI Library so easy used in mobile, Demo Style UI Url:http://imweb.github.io/sheral
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin 重写dialog icon mask May 19, 2016
dist 调整examp的架构 Jul 7, 2016
examples update sheral css file Aug 5, 2016
src add Forms and Input Component May 25, 2016
test/util init react ui May 5, 2016
.babelrc init react ui May 5, 2016
.gitignore init react ui May 5, 2016
.travis.yml add 单元测试和测试覆盖率 Jul 8, 2016
LICENSE Initial commit Apr 18, 2016
README.md Update README.md Sep 1, 2018
gulpfile.js
package.json 解决构建错误 Aug 4, 2016
rhino.png readme May 19, 2016

README.md

kodo

Build Status Coverage Status

How to Run

首先你需要通过命令npm install来安装所需要的依赖环境。整个项目分为了两个部分,kodo 库源码和 examples 展示例子。

你可以运行 npm run dev 来构建 kodo 项目开发者版本,然后运行 npm run examp 来构建 examples 展示例子。

现在你可以运行 npm run dev-server 来启动一个Web 服务器,这样在地址栏输入: http://localhost:3000/#/index/ 就可以访问 Demo 了。

How to Update

你可以使用 npm outdate 命令来查询是否需要更新,然后再运行 npm update 来个更新你的应用环境。

结构与参与项目方式说明

kodo 项目的源码放置在顶层的 src 目录下,如果你需要创建一个组件:

  • components 目录中创建你的组件目录和 index.js 文件
  • 在入口 index.js 文件中导出你的组件
  • 请注意将你的组件和导出组件使用大小写区分,例如 components/button ,导出时可以使用 Button

当你编写完一个组件时,需要进行测试:

  • test 目录中编写单元测试文件
  • examples/src/interface 目录中创建你的展示例子目录
  • examples/src/router 路由文件中配置好你的路由

当你想亲自参与这个开源项目时可以Fork kodo 项目,按照上述的方式来添加新的组件和展示例子,那么你就可以发送 PR 给我们了。

import React, { PropTypes } from 'react';
import { render } from 'react-dom';
import { Router, Route, hashHistory, IndexRoute } from 'react-router';
import NoPages from '../components/nopages/';
import IndexPages from '../interface/index/';
import ButtonPages from '../interface/button/'

const propTypes = {
  children: PropTypes.element
};

// Web App 启动

class AppStart extends React.Component {
  render() {
    if (!this.props.children) {
      return null;
    }
    return (
      <div
        className="app-container"
      >
        { this.props.children }
      </div>
    );
  }
}

AppStart.propTypes = propTypes;

module.exports = {
  start() {
    render((
      <Router
        history={ hashHistory }
      >
        <Route
          path="/"
          component={ AppStart }
        >
          <IndexRoute component= { IndexPages } />
          <Route path="button" component={ ButtonPages } />
          <Route path="*" component={ NoPages } />
        </Route>
      </Router>
    ), document.getElementById('app-container'));
  }
};

感谢

感谢好友 结一 提供了CSS UI sheral项目。

开源遵循

The MIT License (MIT)

Copyright (c) 2016

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.