VBoxLayout.jsx

ShadowEditor.UI/css/ShadowEditor.UI.css

@@ -17,6 +17,13 @@ body,
     flex-direction: row;
 }
 
+/* VBoxLayout */
+
+.VBox {
+    display: flex;
+    flex-direction: column;
+}
+
 /* Panel */
 
 .Panel {

ShadowEditor.UI/index.html

@@ -31,7 +31,7 @@
             region: 'center',
             key: 3
         });
-        var layout = React.createElement(Shadow.HBoxLayout, undefined, [
+        var layout = React.createElement(Shadow.VBoxLayout, undefined, [
             panel1,
             panel2,
             panel3,

ShadowEditor.UI/src/index.js

@@ -3,6 +3,7 @@ export { default as Button } from './form/Button.jsx';
 
 // layout
 export { default as HBoxLayout } from './layout/HBoxLayout.jsx';
+export { default as VBoxLayout } from './layout/VBoxLayout.jsx';
 
 // panel
 export { default as Panel } from './panel/Panel.jsx';

ShadowEditor.UI/src/layout/HBoxLayout.jsx

@@ -1,5 +1,11 @@
 import classNames from 'classnames/bind';
 
+/**
+ * 水平布局
+ * @author tengge / https://github.com/tengge1
+ * @property {String} className 样式类
+ * @property {String} children 内容
+ */
 class HBoxLayout extends React.Component {
     render() {
         const { className, children } = this.props;

ShadowEditor.UI/src/layout/VBoxLayout.jsx

@@ -0,0 +1,17 @@
+import classNames from 'classnames/bind';
+
+/**
+ * 竖直布局
+ * @author tengge / https://github.com/tengge1
+ * @property {String} className 样式类
+ * @property {String} children 内容
+ */
+class VBoxLayout extends React.Component {
+    render() {
+        const { className, children } = this.props;
+
+        return <div className={classNames('VBox', className)}>{children}</div>;
+    }
+}
+
+export default VBoxLayout;

ShadowEditor.UI/src/panel/Panel.jsx

@@ -5,14 +5,13 @@ import classNames from 'classnames/bind';
  * @author tengge / https://github.com/tengge1
  * @property {String} title 标题
  * @property {String} className 样式类
- * @property {String} region 在BorderLayout中的位置，west, east, north, south
  * @property {String} children 内容
  */
 class Panel extends React.Component {
     render() {
-        const { title, className, region, children } = this.props;
+        const { title, className, children } = this.props;
 
-        return <div className={classNames('Panel', region, className)}>
+        return <div className={classNames('Panel', className)}>
             <div className="wrap">
                 <div className="title">
                     <div className="icon">