方正 7 gadi atpakaļ
vecāks
revīzija
5da20fccc4
2 mainītis faili ar 56 papildinājumiem un 18 dzēšanām
  1. 0 0
      README.EN.md
  2. 56 18
      README.md

+ 0 - 0
README.EN.md


+ 56 - 18
README.md

@@ -1,25 +1,63 @@
-# Whath is Dragact?
+# 什么是 Dragact?
 
-Dragact is a react component, which allows you to build your own **dragable grid layout** easily.
+Dragact 是一款React组件,他能够使你简单、快速的构建出一款强大的 **拖拽式网格(grid)布局**.
 
 ![](https://github.com/215566435/React-dragger-layout/blob/master/example/image/NormalLayoutDemo.gif)
 
-### 快速安装
+# Demo地址
+[Live Demo(预览地址)](http://htmlpreview.github.io/?https://github.com/215566435/React-dragger-layout/blob/master/build/index.html)
+
+
+# 快速开始
 ```
 npm install --save dragact
 ```
 
+### 写一个例子🌰
+```javascript
+//index.js
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import { Dragact } from 'dragact';
+import './index.css'
+
+ReactDOM.render(
+    <Dragact
+        col={8}
+        width={800}
+        margin={[5, 5]}
+        rowHeight={40}
+        className='plant-layout'
+    >
+        <div key={0} data-set={{ GridX: 0, GridY: 0, w: 4, h: 2 }} className='layout-child'>0</div>
+        <div key={1} data-set={{ GridX: 0, GridY: 0, w: 1, h: 2 }} className='layout-child'>1</div>
+        <div key={2} data-set={{ GridX: 0, GridY: 0, w: 3, h: 2 }} className='layout-child'>2</div>
+    </Dragact>,
+    document.getElementById('root')
+);
+```
 
-# Demo
-[Live Demo](http://htmlpreview.github.io/?https://github.com/215566435/React-dragger-layout/blob/master/build/index.html)
-
+```css
+/** index.css */
+.plant-layout {
+    border: 1px solid black;
+}
+.layout-child {
+    height: 100%;
+    background: #ef4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+```
 
-# Feature
-- [x] auto sorted layout
-- [x] mobile device supported
-- [x] auto height fixed
-- [x] static component
-- [x] Draggable component
+# 特点
+- [x] 自动布局的网格系统
+- [x] 手机上也可以操作
+- [x] 高度自适应
+- [x] 静态组件([Live Demo(预览地址)](http://htmlpreview.github.io/?https://github.com/215566435/React-dragger-layout/blob/master/build/index.html))
+- [x] Draggable component([Live Demo(预览地址)](http://htmlpreview.github.io/?https://github.com/215566435/React-dragger-layout/blob/master/build/index.html))
 
 
 # Dragact 提供的属性
@@ -89,14 +127,14 @@ interface DragactProps {
 
 
 
-# Contribute
+# 贡献
 
-### Want a new feature?
-1. If you have a feature request, please add it as an issue or make a pull request.
-2. After adding some awesome feature, please run the test and make sure it will pass all tests before you make a PR.
+### 想要一个新的特色、功能?
+1. 如果你想添加一些新功能或者一些非常棒的点子,请发起issue告诉我,谢谢!
+2. 如果你已经阅读过源代码,并且添加了一些非常牛X🐂的点子,请发起你的PR.
 
-### A bug?
-If you have a bug to report, please reproduce the bug in Github issue with a sample code to help us easily isolate it.
+### bug?
+如果你发现了本项目的Bug,请务必马上告诉我。添加一个issue,并且帮忙给出最最简单重现的例子,这能让我快速定位到Bug帮你解决,谢谢!