CheckBox.jsx

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 */

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>;

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;

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';