+
66.66%
-
@@ -69,7 +69,7 @@ english: Layout
* 通过`row`在水平方向建立一组`column`（简写col）
* 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素
-* 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建
+* 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.ant-col-8`来创建
* 如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列
## Flex 布局
diff --git a/components/layout/row.jsx b/components/layout/row.jsx
index 54dd0c7245..a7f93b0357 100644
--- a/components/layout/row.jsx
+++ b/components/layout/row.jsx
@@ -16,10 +16,10 @@ export default class Row extends React.Component {
render() {
const { type, justify, align, className, gutter, style, children, ...others } = this.props;
const classes = classNames({
- row: !type,
- [`row-${type}`]: type,
- [`row-${type}-${justify}`]: justify,
- [`row-${type}-${align}`]: align,
+ 'ant-row': !type,
+ [`ant-row-${type}`]: type,
+ [`ant-row-${type}-${justify}`]: justify,
+ [`ant-row-${type}-${align}`]: align,
[className]: className,
});
const rowStyle = gutter > 0 ? {
diff --git a/components/layout/style/index.less b/components/layout/style/index.less
index 1cea82b039..0b105d50c4 100644
--- a/components/layout/style/index.less
+++ b/components/layout/style/index.less
@@ -3,12 +3,12 @@
@import "./mixin";
// Grid system
-.row {
+.ant-row {
.make-row();
display: block;
}
-.row-flex {
+.ant-row-flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@@ -20,46 +20,46 @@
}
// x轴原点
-.row-flex-start {
+.ant-row-flex-start {
justify-content: flex-start;
}
// x轴居中
-.row-flex-center {
+.ant-row-flex-center {
justify-content: center;
}
// x轴反方向
-.row-flex-end {
+.ant-row-flex-end {
justify-content: flex-end;
}
// x轴平分
-.row-flex-space-between {
+.ant-row-flex-space-between {
justify-content: space-between;
}
// x轴有间隔地平分
-.row-flex-space-around {
+.ant-row-flex-space-around {
justify-content: space-around;
}
// 顶部对齐
-.row-flex-top {
+.ant-row-flex-top {
align-items: flex-start;
}
// 居中对齐
-.row-flex-middle {
+.ant-row-flex-middle {
align-items: center;
}
// 底部对齐
-.row-flex-bottom {
+.ant-row-flex-bottom {
align-items: flex-end;
}
-.col {
+.ant-col {
position: relative;
display: block;
}
diff --git a/components/layout/style/mixin.less b/components/layout/style/mixin.less
index 1ce82101e1..d238ad7b8c 100644
--- a/components/layout/style/mixin.less
+++ b/components/layout/style/mixin.less
@@ -12,11 +12,11 @@
.make-grid-columns() {
.col(@index) {
- @item: ~".col-@{index}, .col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+ @item: ~".ant-col-@{index}, .ant-col-xs-@{index}, .ant-col-sm-@{index}, .ant-col-md-@{index}, .ant-col-lg-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) {
- @item: ~".col-@{index}, .col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+ @item: ~".ant-col-@{index}, .ant-col-xs-@{index}, .ant-col-sm-@{index}, .ant-col-md-@{index}, .ant-col-lg-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) {
@@ -33,11 +33,11 @@
.float-grid-columns(@class) {
.col(@index) { // initial
- @item: ~".col@{class}-@{index}";
+ @item: ~".ant-col@{class}-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general
- @item: ~".col@{class}-@{index}";
+ @item: ~".ant-col@{class}-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@@ -51,33 +51,33 @@
// lesshint false
.loop-grid-columns(@index, @class) when (@index > 0) {
- .col@{class}-@{index} {
+ .ant-col@{class}-@{index} {
display: block;
width: percentage((@index / @grid-columns));
}
- .col@{class}-push-@{index} {
+ .ant-col@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
- .col@{class}-pull-@{index} {
+ .ant-col@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
- .col@{class}-offset-@{index} {
+ .ant-col@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
- .col@{class}-order-@{index} {
+ .ant-col@{class}-order-@{index} {
order: @index;
}
.loop-grid-columns((@index - 1), @class);
}
.loop-grid-columns(@index, @class) when (@index = 0) {
- .col@{class}-@{index} {
+ .ant-col@{class}-@{index} {
display: none;
}
- .col-push-@{index} {
+ .ant-col-push-@{index} {
left: auto;
}
- .col-pull-@{index} {
+ .ant-col-pull-@{index} {
right: auto;
}
}
diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less
index 2209bc32a9..ed6a7a1c65 100644
--- a/site/theme/static/markdown.less
+++ b/site/theme/static/markdown.less
@@ -188,14 +188,14 @@
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;
}
- .row-flex,
- .code-box-demo .row-flex {
+ .ant-row-flex,
+ .code-box-demo .ant-row-flex {
background: #F5F5F5;
}
- .row > div,
- .code-box-demo .row > div,
- .row-flex > div,
- .code-box-demo .row-flex > div {
+ .ant-row > div,
+ .code-box-demo .ant-row > div,
+ .ant-row-flex > div,
+ .code-box-demo .ant-row-flex > div {
padding: 5px 0;
text-align: center;
border-radius: 6px;
@@ -204,13 +204,13 @@
margin-bottom: 10px;
color: #fff;
}
- .code-box-demo .row > div:not(.gutter-row),
- .code-box-demo .row-flex > div:not(.gutter-row) {
+ .code-box-demo .ant-row > div:not(.gutter-row),
+ .code-box-demo .ant-row-flex > div:not(.gutter-row) {
background: #6AC2F5;
border: 1px solid rgba(0, 0, 0, 0.1);
}
- .row .demo-col,
- .code-box-demo .row .demo-col {
+ .ant-row .demo-col,
+ .code-box-demo .ant-row .demo-col {
text-align: center;
padding: 40px 0;
color: #fff;
@@ -219,25 +219,25 @@
margin-top: 0;
margin-bottom: 0;
}
- .row .demo-col-1,
- .row .demo-col-1 {
+ .ant-row .demo-col-1,
+ .ant-row .demo-col-1 {
background: rgba(29, 128, 211, 0.7);
}
- .row .demo-col-2,
- .code-box-demo .row .demo-col-2 {
+ .ant-row .demo-col-2,
+ .code-box-demo .ant-row .demo-col-2 {
background: rgba(29, 128, 211, 0.5);
}
- .row .demo-col-3,
- .code-box-demo .row .demo-col-3{
+ .ant-row .demo-col-3,
+ .code-box-demo .ant-row .demo-col-3{
background: rgba(255, 255, 255, 0.2);
color: #999;
}
- .row .demo-col-4,
- .code-box-demo .row .demo-col-4 {
+ .ant-row .demo-col-4,
+ .code-box-demo .ant-row .demo-col-4 {
background: rgba(29, 128, 211, 0.6);
}
- .row .demo-col-5,
- .code-box-demo .row .demo-col-5 {
+ .ant-row .demo-col-5,
+ .code-box-demo .ant-row .demo-col-5 {
background: rgba(255, 255, 255, 0.5);
color: #999;
}
diff --git a/tests/layout.test.js b/tests/layout.test.js
index 32a0a6e816..22b1c5c93d 100644
--- a/tests/layout.test.js
+++ b/tests/layout.test.js
@@ -15,13 +15,13 @@ describe('Layout', function() {
);
const colNode = TestUtils.findRenderedDOMComponentWithTag(col, 'DIV');
- expect(colNode.className).toBe('col-2');
+ expect(colNode.className).toBe('ant-col-2');
});
it('should render Row', () => {
const row = TestUtils.renderIntoDocument(
|
);
const rowNode = TestUtils.findRenderedDOMComponentWithTag(row, 'DIV');
- expect(rowNode.className).toBe('row');
+ expect(rowNode.className).toBe('ant-row');
});
});