UNPKG

ygd

Version:

An enterprise-class UI design language and React-based implementation

183 lines (115 loc) 5.87 kB
<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> [![](https://cdn-images-1.medium.com/max/2000/1*NIlj0-TdLMbo_hzSBP8tmg.png)](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. [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](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 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](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