docs: updatedoc

build/dev.js

@@ -28,7 +28,6 @@ let { componentName } = require('./config').dev;
 const componentsInPrototype = ['Modal', 'message', 'notification'];
 
 const MAIN_TEMPLATE = `import 'babel-polyfill';
-import './index.less';
 import 'highlight.js/styles/solarized-light.css';
 import Vue from 'vue';
 import Vuex from 'vuex';
@@ -38,6 +37,7 @@ import VueClipboard from 'vue-clipboard2';
 import Md from './components/md';
 import Api from './components/api';
 import demoBox from './components/demoBox';
+import demoSort from './components/demoSort';
 import demoContainer from './components/demoContainer';
 import Modal from '../components/modal';
 import message from '../components/message';
@@ -50,6 +50,7 @@ import '../components/notification/style';
 import Test from '../components/{{name}}/demo/index.vue';
 import zhCN from './theme/zh-CN';
 import enUS from './theme/en-US';
+import './index.less';
 
 Vue.use(Vuex);
 Vue.use(VueClipboard);
@@ -58,6 +59,7 @@ Vue.use(VueI18n);
 Vue.component(Md.name, Md);
 Vue.component(Api.name, Api);
 Vue.component('demo-box', demoBox);
+Vue.component('demo-sort', demoSort);
 Vue.component('demo-container', demoContainer);
 
 Vue.prototype.$message = message;

components/tree/demo/index.vue

@@ -37,16 +37,18 @@ export default {
     return (
       <div>
         <md cn={md.cn} us={md.us} />
-        <BasicControlled />
-        <Basic />
-        <ReplaceFields />
-        <CustomizedIcon />
-        <Draggable />
-        <Dynamic />
-        <Line />
-        <Search />
-        <Directory />
-        <SwitcherIcon />
+        <demo-sort cols="2">
+          <BasicControlled />
+          <Basic />
+          <ReplaceFields />
+          <CustomizedIcon />
+          <Draggable />
+          <Dynamic />
+          <Line />
+          <Search />
+          <Directory />
+          <SwitcherIcon />
+        </demo-sort>
         <api>
           <template slot="cn">
             <CN />

site/components/api.vue

@@ -9,10 +9,10 @@
 import { isZhCN } from '../util';
 import GoogleAds from './GoogleAds';
 export default {
+  name: 'Api',
   components: {
     GoogleAds,
   },
-  name: 'Api',
   inject: {
     demoContext: { default: {} },
   },

site/components/demoBox.vue

@@ -106,6 +106,7 @@ export default {
       sourceCode,
       id,
       iframeDemoKey,
+      isDemo: true,
     };
   },
   methods: {

site/components/demoSort.jsx

@@ -0,0 +1,49 @@
+import { Col, Row } from '../../components/grid';
+import '../../components/grid/style';
+function isEmptyElement(c) {
+  return !(c.tag || (c.text && c.text.trim() !== ''));
+}
+
+function filterEmpty(children = []) {
+  return children.filter(c => !isEmptyElement(c));
+}
+export default {
+  props: {
+    cols: {
+      type: [Number, String],
+      default: 1,
+    },
+  },
+  inject: {
+    demoContext: { default: {} },
+  },
+  render() {
+    const { cols, $slots } = this;
+    const isSingleCol = cols === 1;
+    const leftChildren = [];
+    const rightChildren = [];
+    const children = filterEmpty($slots.default);
+    children.forEach((demo, index) => {
+      if (index % 2 === 0 || isSingleCol) {
+        leftChildren.push(demo);
+      } else {
+        rightChildren.push(demo);
+      }
+    });
+    return (
+      <Row gutter={16}>
+        <Col
+          span={isSingleCol ? 24 : 12}
+          class={isSingleCol ? 'code-boxes-col-1-1' : 'code-boxes-col-2-1'}
+        >
+          {leftChildren}
+        </Col>
+        {isSingleCol ? null : (
+          <Col class="code-boxes-col-2-1" span={12}>
+            {rightChildren}
+          </Col>
+        )}
+      </Row>
+    );
+  },
+};

site/components/layout.vue

@@ -29,11 +29,7 @@ const docsList = [
   { key: 'download', enTitle: 'Download Design Resources', title: '下载设计资源' },
 ];
 
-let isMobile = false;
 const isGitee = window.location.host.indexOf('gitee.io') > -1;
-enquireScreen(b => {
-  isMobile = b;
-});
 const showAd = location.host.indexOf('antdv.com') > -1;
 export default {
   props: {
@@ -50,7 +46,7 @@ export default {
       showSideBars: true,
       currentSubMenu: [],
       sidebarHeight: document.documentElement.offsetHeight,
-      isMobile,
+      isMobile: false,
     };
   },
   provide() {

site/index.js

@@ -15,6 +15,7 @@ import Api from './components/api';
 import './components';
 import demoBox from './components/demoBox';
 import demoContainer from './components/demoContainer';
+import demoSort from './components/demoSort';
 import zhCN from './theme/zh-CN';
 import enUS from './theme/en-US';
 import { isZhCN } from './util';
@@ -38,6 +39,7 @@ Vue.component(Md.name, Md);
 Vue.component(Api.name, Api);
 Vue.component('demo-box', demoBox);
 Vue.component('demo-container', demoContainer);
+Vue.component('demo-sort', demoSort);
 
 const i18n = new VueI18n({
   locale: isZhCN(location.pathname) ? zhCN.locale : enUS.locale,

site/theme/static/responsive.less

@@ -28,7 +28,7 @@
   }
 }
 
-@media only screen and (max-width: 767.99px) {
+@media only screen and (max-width: 992px) {
   #header {
     text-align: center;
     #logo {