From af2619a12526d4ec9cb0ab2dbb69dda18924ebe9 Mon Sep 17 00:00:00 2001
From: tengge1 <930372551@qq.com>
Date: Thu, 9 May 2019 21:21:57 +0800
Subject: [PATCH] CheckBox.jsx

---
 ShadowEditor.UI/css/ShadowEditor.UI.css |  8 ++++----
 ShadowEditor.UI/src/Example.jsx         |  9 +++++++++
 ShadowEditor.UI/src/form/CheckBox.jsx   | 16 ++++++++++++++++
 ShadowEditor.UI/src/index.js            |  1 +
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/ShadowEditor.UI/css/ShadowEditor.UI.css b/ShadowEditor.UI/css/ShadowEditor.UI.css
index b7e99a90..30b5c02c 100644
--- a/ShadowEditor.UI/css/ShadowEditor.UI.css
+++ b/ShadowEditor.UI/css/ShadowEditor.UI.css
@@ -16,9 +16,9 @@ body,
     height: 20px;
     margin: 0 2px;
     padding: 0 8px;
-    color: #555;
+    color: #8a8a8a;
     background-color: #fff;
-    border: 1px solid #555;
+    border: 1px solid #8a8a8a;
     box-sizing: border-box;
     cursor: pointer;
 }
@@ -48,8 +48,8 @@ body,
 }
 
 .Button.disabled {
-    color: #ccc;
-    border: 1px solid #ccc;
+    color: #bebebe;
+    border: 1px solid #bebebe;
 }
 
 /* CheckBox */
diff --git a/ShadowEditor.UI/src/Example.jsx b/ShadowEditor.UI/src/Example.jsx
index 7aeb4391..a699b15e 100644
--- a/ShadowEditor.UI/src/Example.jsx
+++ b/ShadowEditor.UI/src/Example.jsx
@@ -1,5 +1,6 @@
 // form
 import Button from './form/Button.jsx';
+import CheckBox from './form/CheckBox.jsx';
 import Form from './form/Form.jsx';
 import FormControl from './form/FormControl.jsx';
 import Input from './form/Input.jsx';
@@ -105,6 +106,14 @@ class Example {
                             <Button className={'danger'}>Danger</Button>
                             <Button className={'disabled'}>Disabled</Button>
                         </FormControl>
+                        <FormControl>
+                            <CheckBox>Default</CheckBox>
+                            <CheckBox className={'primary'}>Primary</CheckBox>
+                            <CheckBox className={'success'}>Success</CheckBox>
+                            <CheckBox className={'warn'}>Warn</CheckBox>
+                            <CheckBox className={'danger'}>Danger</CheckBox>
+                            <CheckBox className={'disabled'}>Disabled</CheckBox>
+                        </FormControl>
                     </Form>
                 </HBoxLayout>
             </VBoxLayout>;
diff --git a/ShadowEditor.UI/src/form/CheckBox.jsx b/ShadowEditor.UI/src/form/CheckBox.jsx
index e69de29b..cb25c5ae 100644
--- a/ShadowEditor.UI/src/form/CheckBox.jsx
+++ b/ShadowEditor.UI/src/form/CheckBox.jsx
@@ -0,0 +1,16 @@
+import classNames from 'classnames/bind';
+
+/**
+ * 复选框
+ * @author tengge / https://github.com/tengge1
+ * @property {String} className 样式类
+ * @property {Object} style 样式
+ */
+class CheckBox extends React.Component {
+    render() {
+        const { className, style, children } = this.props;
+        return <input type={'checkbox'} className={classNames('CheckBox', className)} style={style} />;
+    }
+}
+
+export default CheckBox;
\ No newline at end of file
diff --git a/ShadowEditor.UI/src/index.js b/ShadowEditor.UI/src/index.js
index 3b6e60ea..a8f5e0a0 100644
--- a/ShadowEditor.UI/src/index.js
+++ b/ShadowEditor.UI/src/index.js
@@ -1,5 +1,6 @@
 // form
 export { default as Button } from './form/Button.jsx';
+export { default as CheckBox } from './form/CheckBox.jsx';
 export { default as Form } from './form/Form.jsx';
 export { default as FormControl } from './form/FormControl.jsx';
 export { default as Input } from './form/Input.jsx';