From 256c60fe8a7a14978fb6da07f7d0e8825c2be8f6 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 9 Nov 2015 19:40:35 +0800
Subject: [PATCH] Add basic layout code

---
 spec/layout/demo/aside.md     | 59 ++++++++++++++++++++++++++---
 spec/layout/demo/top-aside.md | 70 ++++++++++++++++++++++++++++++++---
 spec/layout/demo/top.md       | 53 +++++++++++++++++++++++---
 3 files changed, 166 insertions(+), 16 deletions(-)

diff --git a/spec/layout/demo/aside.md b/spec/layout/demo/aside.md
index ade74b4092..eed08eb94a 100644
--- a/spec/layout/demo/aside.md
+++ b/spec/layout/demo/aside.md
@@ -1,20 +1,69 @@
 # 侧边导航
 
+- order: 2
+
 顶级导航在侧边栏。
 
 ---
 
 ````jsx
+import { Menu, Breadcrumb } from 'antd';
+
 ReactDOM.render(
-  <div className="ant-common-layout">
-  布局示例
+  <div className="ant-layout-aside">
+    <aside className="ant-layout-sider">
+    </aside>
+    <div className="ant-layout-main">
+      <div className="ant-layout-header"></div>
+      <div className="ant-layout-container">
+        <div className="ant-layout-breadcrumb">
+          <Breadcrumb>
+            <Breadcrumb.Item>首页</Breadcrumb.Item>
+            <Breadcrumb.Item>应用列表</Breadcrumb.Item>
+            <Breadcrumb.Item>某应用</Breadcrumb.Item>
+          </Breadcrumb>
+        </div>
+        <div className="ant-layout-content">
+          <div style={{ height: 290 }}></div>
+        </div>
+      </div>
+    </div>
   </div>
 , document.getElementById('spec-layout-demo-aside'));
 ````
 
 ````css
-.ant-common-layout {
-  background: #f9f9f9;
-  padding: 24px;
+.ant-layout-aside {
+  background: #f4f4f4;
+  height: 400px;
+  overflow: hidden;
+  position: relative;
+}
+
+.ant-layout-aside .ant-layout-sider {
+  width: 224px;
+  height: 100%;
+  position: absolute;
+  background: #373737;
+}
+
+.ant-layout-aside .ant-layout-header {
+  background: #fff;
+  height: 64px;
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.ant-layout-aside .ant-layout-breadcrumb {
+  margin-top: 7px;
+  margin-bottom: -17px;
+}
+
+.ant-layout-aside .ant-layout-container {
+  margin: 0 16px 16px 240px;
+}
+
+.ant-layout-aside .ant-layout-content {
+  background: #fff;
+  margin-top: 24px;
 }
 ````
diff --git a/spec/layout/demo/top-aside.md b/spec/layout/demo/top-aside.md
index 8cd30c68d4..1b567eb619 100644
--- a/spec/layout/demo/top-aside.md
+++ b/spec/layout/demo/top-aside.md
@@ -1,21 +1,79 @@
 # 顶部导航 + 侧边栏
 
+- order: 1
+
 顶级导航在头部，次级导航在侧边栏。
 
 ---
 
 ````jsx
+import { Menu, Breadcrumb } from 'antd';
+
 ReactDOM.render(
-  <div className="ant-common-layout">
-  布局示例
+  <div className="ant-layout-topaside">
+    <div className="ant-layout-header"></div>
+    <div className="ant-layout-subheader"></div>
+    <div className="ant-layout-main">
+      <div className="ant-layout-breadcrumb">
+        <Breadcrumb>
+          <Breadcrumb.Item>首页</Breadcrumb.Item>
+          <Breadcrumb.Item>应用列表</Breadcrumb.Item>
+          <Breadcrumb.Item>某应用</Breadcrumb.Item>
+        </Breadcrumb>
+      </div>
+      <div className="ant-layout-container">
+        <aside className="ant-layout-sider">
+        </aside>
+        <div className="ant-layout-content">
+          <div style={{ height: 240 }}></div>
+        </div>
+      </div>
+    </div>
   </div>
 , document.getElementById('spec-layout-demo-top-aside'));
 ````
 
 ````css
-.ant-common-layout {
-  background: #f9f9f9;
-  padding: 24px;
+.ant-layout-topaside {
+  background: #f4f4f4;
+  height: 400px;
+  overflow: hidden;
+}
+
+.ant-layout-topaside .ant-layout-header {
+  background: #373737;
+  height: 64px;
+}
+
+.ant-layout-topaside .ant-layout-subheader {
+  height: 48px;
+  border-bottom: 1px solid #e9e9e9;
+  background: #fff;
+}
+
+.ant-layout-topaside .ant-layout-breadcrumb {
+  margin-top: 7px;
+  margin-bottom: -17px;
+}
+
+.ant-layout-topaside .ant-layout-main {
+  padding: 0 50px;
+}
+
+.ant-layout-topaside .ant-layout-container {
+  background: #fff;
+  margin-top: 24px;
+  position: relative;
+}
+
+.ant-layout-topaside .ant-layout-sider {
+  width: 224px;
+  height: 100%;
+  position: absolute;
+}
+
+.ant-layout-topaside .ant-layout-content {
+  border-left: 1px solid #e9e9e9;
+  margin-left: 224px;
 }
 ````
-
diff --git a/spec/layout/demo/top.md b/spec/layout/demo/top.md
index 9e38c5e7de..08e1ba1926 100644
--- a/spec/layout/demo/top.md
+++ b/spec/layout/demo/top.md
@@ -1,20 +1,63 @@
 # 顶部导航
 
+- order: 0
+
 一二级导航都在顶部。
 
 ---
 
 ````jsx
+import { Menu, Breadcrumb } from 'antd';
+
 ReactDOM.render(
-  <div className="ant-common-layout">
-  布局示例
+  <div className="ant-layout-top">
+    <div className="ant-layout-header"></div>
+    <div className="ant-layout-subheader"></div>
+    <div className="ant-layout-main">
+      <div className="ant-layout-breadcrumb">
+        <Breadcrumb>
+          <Breadcrumb.Item>首页</Breadcrumb.Item>
+          <Breadcrumb.Item>应用列表</Breadcrumb.Item>
+          <Breadcrumb.Item>某应用</Breadcrumb.Item>
+        </Breadcrumb>
+      </div>
+      <div className="ant-layout-container">
+        <div style={{ height: 240 }}></div>
+      </div>
+    </div>
   </div>
 , document.getElementById('spec-layout-demo-top'));
 ````
 
 ````css
-.ant-common-layout {
-  background: #f9f9f9;
-  padding: 24px;
+.ant-layout-top {
+  background: #f4f4f4;
+  height: 400px;
+  overflow: hidden;
+}
+
+.ant-layout-top .ant-layout-header {
+  background: #373737;
+  height: 64px;
+}
+
+.ant-layout-top .ant-layout-subheader {
+  height: 48px;
+  border-bottom: 1px solid #e9e9e9;
+  background: #fff;
+}
+
+.ant-layout-top .ant-layout-breadcrumb {
+  margin-top: 7px;
+  margin-bottom: -17px;
+}
+
+.ant-layout-top .ant-layout-main {
+  padding: 0 50px;
+}
+
+.ant-layout-top .ant-layout-container {
+  background: #fff;
+  margin-top: 24px;
 }
 ````