diff --git a/components/layout/demo/flex-align.md b/components/layout/demo/flex-align.md index 0c20d1dd46..b7835e6b75 100644 --- a/components/layout/demo/flex-align.md +++ b/components/layout/demo/flex-align.md @@ -1,6 +1,6 @@ --- order: 5 -title: Flex对齐 +title: Flex 对齐 --- Flex 子元素垂直对齐。 @@ -8,15 +8,7 @@ Flex 子元素垂直对齐。 ````jsx import { Row, Col } from 'antd'; -const DemoBox = React.createClass({ - render() { - const { value } = this.props; - const className = `hight-${value}`; - return ( -

{this.props.children}

- ); - } -}); +const DemoBox = props =>

{props.children}

; ReactDOM.render(
diff --git a/components/layout/demo/flex-order.md b/components/layout/demo/flex-order.md index 4642142bca..e35e47e3b6 100644 --- a/components/layout/demo/flex-order.md +++ b/components/layout/demo/flex-order.md @@ -1,6 +1,6 @@ --- order: 6 -title: Flex排序 +title: Flex 排序 --- 通过 Flex 布局的 Order 来改变元素的排序。 diff --git a/components/layout/demo/flex.md b/components/layout/demo/flex.md index 55089979fe..34e9b550af 100644 --- a/components/layout/demo/flex.md +++ b/components/layout/demo/flex.md @@ -1,6 +1,6 @@ --- order: 4 -title: Flex布局 +title: Flex 布局 --- Flex 布局基础。 diff --git a/site/common/styles/markdown.less b/site/common/styles/markdown.less index aa9dc1efb5..5d189ede53 100644 --- a/site/common/styles/markdown.less +++ b/site/common/styles/markdown.less @@ -180,76 +180,78 @@ font-size: 13px; } -.markdown .demo-row, -.code-box-demo .demo-row { - background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%); - overflow: hidden; -} -.markdown .row-flex, -.code-box-demo .row-flex { - background: #F5F5F5; -} -.markdown .row > div, -.code-box-demo .row > div, -.markdown .row-flex > div, -.code-box-demo .row-flex > div { - padding: 5px 0; - text-align: center; - border-radius: 6px; - min-height: 30px; - margin-top: 10px; - margin-bottom: 10px; - color: #fff; -} -.code-box-demo .row > div:not(.gutter-row) { - background: #6AC2F5; - border: 1px solid rgba(0, 0, 0, 0.1); -} -.markdown .row .demo-col, -.code-box-demo .row .demo-col { - text-align: center; - padding: 40px 0; - color: #fff; - font-size: 18px; - border: none; - margin-top: 0; - margin-bottom: 0; -} -.markdown .row .demo-col-1, -.code-box-demo .row .demo-col-1 { - background: rgba(29, 128, 211, 0.7); -} -.markdown .row .demo-col-2, -.code-box-demo .row .demo-col-2 { - background: rgba(29, 128, 211, 0.5); -} -.markdown .row .demo-col-3, -.code-box-demo .row .demo-col-3{ - background: rgba(255, 255, 255, 0.2); - color: #999; -} -.markdown .row .demo-col-4, -.code-box-demo .row .demo-col-4 { - background: rgba(29, 128, 211, 0.6); -} -.markdown .row .demo-col-5, -.code-box-demo .row .demo-col-5 { - background: rgba(255, 255, 255, 0.5); - color: #999; -} -.markdown .hight-100, -.code-box-demo .hight-100 { - height: 100px; -} -.markdown .hight-50, -.code-box-demo .hight-50 { - height: 50px; -} -.markdown .hight-120, -.code-box-demo .hight-120 { - height: 120px; +[id^="components-layout-demo-"] { + .markdown .demo-row, + .code-box-demo .demo-row { + background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%); + overflow: hidden; + } + .markdown .row-flex, + .code-box-demo .row-flex { + background: #F5F5F5; + } + .markdown .row > div, + .code-box-demo .row > div, + .markdown .row-flex > div, + .code-box-demo .row-flex > div { + padding: 5px 0; + text-align: center; + border-radius: 6px; + min-height: 30px; + margin-top: 10px; + margin-bottom: 10px; + color: #fff; + } + .code-box-demo .row > div:not(.gutter-row) { + background: #6AC2F5; + border: 1px solid rgba(0, 0, 0, 0.1); + } + .markdown .row .demo-col, + .code-box-demo .row .demo-col { + text-align: center; + padding: 40px 0; + color: #fff; + font-size: 18px; + border: none; + margin-top: 0; + margin-bottom: 0; + } + .markdown .row .demo-col-1, + .code-box-demo .row .demo-col-1 { + background: rgba(29, 128, 211, 0.7); + } + .markdown .row .demo-col-2, + .code-box-demo .row .demo-col-2 { + background: rgba(29, 128, 211, 0.5); + } + .markdown .row .demo-col-3, + .code-box-demo .row .demo-col-3{ + background: rgba(255, 255, 255, 0.2); + color: #999; + } + .markdown .row .demo-col-4, + .code-box-demo .row .demo-col-4 { + background: rgba(29, 128, 211, 0.6); + } + .markdown .row .demo-col-5, + .code-box-demo .row .demo-col-5 { + background: rgba(255, 255, 255, 0.5); + color: #999; + } + .markdown .height-100, + .code-box-demo .height-100 { + height: 100px; + } + .markdown .height-50, + .code-box-demo .height-50 { + height: 50px; + } + .markdown .height-120, + .code-box-demo .height-120 { + height: 120px; + } + .markdown .height-80, + .code-box-demo .height-80 { + height: 80px; + } } -.markdown .hight-80, -.code-box-demo .hight-80 { - height: 80px; -} \ No newline at end of file