ygd
Version:
An enterprise-class UI design language and React-based implementation
183 lines (115 loc) • 5.87 kB
Markdown
<p align="center"><a href="https://www.ygyg.cn" target="_blank"><img width="100" src="https://www.ygyg.cn/static/headerPublic/images/logo.png"></a></p>
<p align="center">
<a href="https://nodejs.org"><img src="https://img.shields.io/badge/node-%3E%3D8.9.1-green.svg?style=flat" alt="Node.js Version"></a>
<a href="http://standardjs.com"><img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg" alt="js-standard-style"></a>
</p>
<h1 align="center">YG Design</h1>
<div align="center">
An enterprise-class UI design language and React implementation.
</div>
[](http://ygd.ygego.dev1)
English | [简体中文](./README-zh_CN.md)
## ✨ Features
- An enterprise-class UI design system for web applications.
- A set of high-quality React components out of the box.
- Written in TypeScript with predictable static types.
- The whole package of development and design resources and tools.
## 🖥 Environment Support
* Modern browsers and Internet Explorer 9+ (with [polyfills](https://ygd.ygego.dev1/docs/react/getting-started#Compatibility))
* Server-side Rendering
* [Electron](http://electron.atom.io/)
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
| --------- | --------- | --------- | --------- | --------- | --------- |
| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
## ⌨️ ops deploy
```bash
cnpm i
npm run site
```
``` Nginx
server {
listen 80;
server_name ygd.f.me;
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers: content-type;
try_files $uri /index.html;
autoindex on;
root /Users/fugang/workspace/xinao/ygyg-design/_site/;
}
}
```
## 📦 Install
```bash
npm install ygd
```
```bash
yarn add ygd
```
## 🔨 Usage
```jsx
import { DatePicker } from 'ygd';
ReactDOM.render(<DatePicker />, mountNode);
```
And import style manually:
```jsx
import 'ygd/dist/ygd.css'; // or 'ygd/dist/ygd.less'
```
Or [import components on demand](https://ygd.ygego.dev1/docs/react/getting-started#Import-on-Demand).
### TypeScript
See [Use in TypeScript](https://ygd.ygego.dev1/docs/react/use-in-typescript).
## 🌍 Internationalization
See [i18n](http://ygd.ygego.dev1/docs/react/i18n).
## 🔗 Links
- [Home page](http://ygd.ygego.dev1/)
- [Components](http://ygd.ygego.dev1/docs/react/introduce)
- [YG Design Pro](http://pro.ygego.dev1/)
- [Change Log](CHANGELOG.en-US.md)
- [rc-components](http://react-component.github.io/)
- [Mobile UI](http://mobile.ygego.dev1)
- [Landing Pages](https://landing.ygego.dev1)
- [Motion](https://motion.ygego.dev1)
- [Scaffold Market](http://scaffold.ygego.dev1)
- [FAQ](https://ygd.ygego.dev1/docs/react/faq)
- [CodeSandbox Template](https://u.ygego.dev1/codesandbox-repro) for bug reports
- [Awesome YG Design](https://github.com/websemantics/awesome-ant-design)
- [Customize Theme](http://ygd.ygego.dev1/docs/react/customize-theme)
## ⌨️ Development
Use Gitpod, a free online dev environment for GitHub.
[](https://gitpod.io/#https://github.com/ant-design/ant-design)
Or clone locally:
```bash
$ git clone git@git.ennew.alpha:front-end/ygyg-design.git
$ cd ygyg-design
$ npm install
$ npm start
```
Open your browser and visit http://127.0.0.1:8001 , see more at [Development](https://github.com/ant-design/ant-design/wiki/Development).
## 🤝 Contributing [](http://makeapullrequest.com)
Read our [contributing guide](https://ygd.ygego.dev1/docs/react/contributing) and let's build a better ygd together.
We welcome all contributions.
## plan
增加reqpath 处理 自动处理接口请求,并返回数据 。
reqpath -> dispatch -> model -> service ->
data render view ui
用于 解决 以往 cloneRow 的习惯
对应原有bind事件,如delegate ,事件一直都在。不需要再考虑.
默认resultData为列表数据,可指定列表数据返回值 是否为resultData
## border-box
menu/style/index.less 保持右侧导航
select/style/index.less
## contentbox
layout layout/style/index.less
date-picker/style/TimePicker.less
pagnation pagination/style/index.less
upload/style/index.less
time-picker/style/index.less
switch/style/index.less
carousel/style/index.less
table/style/index.less
grid/style/mixin.less
grid/style/index.less
form/style/mixin.less
start
$ antd-tools run guard
antd-tools run guard