mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 13:09:40 +08:00
Merge branch 'master' into feature-3.8.0
This commit is contained in:
afc163
commit
56fa8629b5
@ -21,6 +21,52 @@ references:
|
|||||||
environment:
|
environment:
|
||||||
REACT: 16
|
REACT: 16
|
||||||
|
|
||||||
|
workflow: &workflow
|
||||||
|
jobs:
|
||||||
|
- setup:
|
||||||
|
filters:
|
||||||
|
branches:
|
||||||
|
ignore: gh-pages
|
||||||
|
- dist:
|
||||||
|
requires:
|
||||||
|
- setup
|
||||||
|
- compile:
|
||||||
|
requires:
|
||||||
|
- setup
|
||||||
|
- lint:
|
||||||
|
requires:
|
||||||
|
- setup
|
||||||
|
- test_dist:
|
||||||
|
requires:
|
||||||
|
- dist
|
||||||
|
- test_lib:
|
||||||
|
requires:
|
||||||
|
- compile
|
||||||
|
- test_es:
|
||||||
|
requires:
|
||||||
|
- compile
|
||||||
|
- test_dom:
|
||||||
|
requires:
|
||||||
|
- setup
|
||||||
|
- test_node:
|
||||||
|
requires:
|
||||||
|
- setup
|
||||||
|
- test_dist_15:
|
||||||
|
requires:
|
||||||
|
- dist
|
||||||
|
- test_lib_15:
|
||||||
|
requires:
|
||||||
|
- compile
|
||||||
|
- test_es_15:
|
||||||
|
requires:
|
||||||
|
- compile
|
||||||
|
- test_dom_15:
|
||||||
|
requires:
|
||||||
|
- setup
|
||||||
|
- test_node_15:
|
||||||
|
requires:
|
||||||
|
- setup
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
setup:
|
setup:
|
||||||
<<: *container_config
|
<<: *container_config
|
||||||
@ -177,45 +223,14 @@ jobs:
|
|||||||
|
|
||||||
workflows:
|
workflows:
|
||||||
version: 2
|
version: 2
|
||||||
build-test:
|
build_test:
|
||||||
jobs:
|
<<: *workflow
|
||||||
- setup
|
nightly:
|
||||||
- dist:
|
<<: *workflow
|
||||||
requires:
|
triggers:
|
||||||
- setup
|
- schedule:
|
||||||
- compile:
|
cron: "0 0 * * *"
|
||||||
requires:
|
filters:
|
||||||
- setup
|
branches:
|
||||||
- lint:
|
only:
|
||||||
requires:
|
- master
|
||||||
- setup
|
|
||||||
- test_dist:
|
|
||||||
requires:
|
|
||||||
- dist
|
|
||||||
- test_lib:
|
|
||||||
requires:
|
|
||||||
- compile
|
|
||||||
- test_es:
|
|
||||||
requires:
|
|
||||||
- compile
|
|
||||||
- test_dom:
|
|
||||||
requires:
|
|
||||||
- setup
|
|
||||||
- test_node:
|
|
||||||
requires:
|
|
||||||
- setup
|
|
||||||
- test_dist_15:
|
|
||||||
requires:
|
|
||||||
- dist
|
|
||||||
- test_lib_15:
|
|
||||||
requires:
|
|
||||||
- compile
|
|
||||||
- test_es_15:
|
|
||||||
requires:
|
|
||||||
- compile
|
|
||||||
- test_dom_15:
|
|
||||||
requires:
|
|
||||||
- setup
|
|
||||||
- test_node_15:
|
|
||||||
requires:
|
|
||||||
- setup
|
|
||||||
|
|||||||
@ -9283,6 +9283,259 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
|
||||||
|
<div
|
||||||
|
class="ant-table-wrapper"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-spin-nested-loading"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-spin-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-table ant-table-default ant-table-bordered ant-table-scroll-position-left"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-table-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-table-body"
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
<colgroup>
|
||||||
|
<col
|
||||||
|
style="width:200px;min-width:200px"
|
||||||
|
/>
|
||||||
|
<col
|
||||||
|
style="width:100px;min-width:100px"
|
||||||
|
/>
|
||||||
|
<col
|
||||||
|
style="width:100px;min-width:100px"
|
||||||
|
/>
|
||||||
|
<col
|
||||||
|
style="width:100px;min-width:100px"
|
||||||
|
/>
|
||||||
|
<col />
|
||||||
|
</colgroup>
|
||||||
|
<thead
|
||||||
|
class="ant-table-thead"
|
||||||
|
>
|
||||||
|
<tr>
|
||||||
|
<th
|
||||||
|
class="react-resizable"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Date
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="react-resizable-handle"
|
||||||
|
style="touch-action:none"
|
||||||
|
/>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="react-resizable"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Amount
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="react-resizable-handle"
|
||||||
|
style="touch-action:none"
|
||||||
|
/>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="react-resizable"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Type
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="react-resizable-handle"
|
||||||
|
style="touch-action:none"
|
||||||
|
/>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="react-resizable"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Note
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="react-resizable-handle"
|
||||||
|
style="touch-action:none"
|
||||||
|
/>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Action
|
||||||
|
</span>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody
|
||||||
|
class="ant-table-tbody"
|
||||||
|
>
|
||||||
|
<tr
|
||||||
|
class="ant-table-row ant-table-row-level-0"
|
||||||
|
data-row-key="0"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-table-row-indent indent-level-0"
|
||||||
|
style="padding-left:0px"
|
||||||
|
/>
|
||||||
|
2018-02-11
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
120
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
income
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
transfer
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="javascript:;"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr
|
||||||
|
class="ant-table-row ant-table-row-level-0"
|
||||||
|
data-row-key="1"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-table-row-indent indent-level-0"
|
||||||
|
style="padding-left:0px"
|
||||||
|
/>
|
||||||
|
2018-03-11
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
243
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
income
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
transfer
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="javascript:;"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr
|
||||||
|
class="ant-table-row ant-table-row-level-0"
|
||||||
|
data-row-key="2"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-table-row-indent indent-level-0"
|
||||||
|
style="padding-left:0px"
|
||||||
|
/>
|
||||||
|
2018-04-11
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
98
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
income
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
transfer
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="javascript:;"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
class="ant-pagination ant-table-pagination"
|
||||||
|
unselectable="unselectable"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
aria-disabled="true"
|
||||||
|
class="ant-pagination-disabled ant-pagination-prev"
|
||||||
|
title="Previous Page"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="ant-pagination-item-link"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||||
|
tabindex="0"
|
||||||
|
title="1"
|
||||||
|
>
|
||||||
|
<a>
|
||||||
|
1
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
aria-disabled="true"
|
||||||
|
class="ant-pagination-disabled ant-pagination-next"
|
||||||
|
title="Next Page"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="ant-pagination-item-link"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
|
exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-table-wrapper"
|
class="ant-table-wrapper"
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
order: 26
|
order: 27
|
||||||
title:
|
title:
|
||||||
en-US: Dynamic Settings
|
en-US: Dynamic Settings
|
||||||
zh-CN: 动态控制表格属性
|
zh-CN: 动态控制表格属性
|
||||||
|
|||||||
135
components/table/demo/resizable-column.md
Normal file
135
components/table/demo/resizable-column.md
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
---
|
||||||
|
order: 26
|
||||||
|
title:
|
||||||
|
en-US: Resizable column
|
||||||
|
zh-CN: 可伸缩列
|
||||||
|
---
|
||||||
|
|
||||||
|
## zh-CN
|
||||||
|
|
||||||
|
集成 react-resizable 来实现可伸缩列。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Implement resizable column by integrate with react-resizable.
|
||||||
|
|
||||||
|
````jsx
|
||||||
|
import { Table } from 'antd';
|
||||||
|
import { Resizable } from 'react-resizable';
|
||||||
|
|
||||||
|
const ResizeableTitle = (props) => {
|
||||||
|
const { onResize, width, ...restProps } = props;
|
||||||
|
|
||||||
|
if (!width) {
|
||||||
|
return <th {...restProps} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Resizable width={width} height={0} onResize={onResize}>
|
||||||
|
<th {...restProps} />
|
||||||
|
</Resizable>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
class Demo extends React.Component {
|
||||||
|
state = {
|
||||||
|
columns: [{
|
||||||
|
title: 'Date',
|
||||||
|
dataIndex: 'date',
|
||||||
|
width: 200,
|
||||||
|
}, {
|
||||||
|
title: 'Amount',
|
||||||
|
dataIndex: 'amount',
|
||||||
|
width: 100,
|
||||||
|
}, {
|
||||||
|
title: 'Type',
|
||||||
|
dataIndex: 'type',
|
||||||
|
width: 100,
|
||||||
|
}, {
|
||||||
|
title: 'Note',
|
||||||
|
dataIndex: 'note',
|
||||||
|
width: 100,
|
||||||
|
}, {
|
||||||
|
title: 'Action',
|
||||||
|
key: 'action',
|
||||||
|
render: () => (
|
||||||
|
<a href="javascript:;">Delete</a>
|
||||||
|
),
|
||||||
|
}],
|
||||||
|
};
|
||||||
|
|
||||||
|
components = {
|
||||||
|
header: {
|
||||||
|
cell: ResizeableTitle,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
data = [{
|
||||||
|
key: 0,
|
||||||
|
date: '2018-02-11',
|
||||||
|
amount: 120,
|
||||||
|
type: 'income',
|
||||||
|
note: 'transfer',
|
||||||
|
}, {
|
||||||
|
key: 1,
|
||||||
|
date: '2018-03-11',
|
||||||
|
amount: 243,
|
||||||
|
type: 'income',
|
||||||
|
note: 'transfer',
|
||||||
|
}, {
|
||||||
|
key: 2,
|
||||||
|
date: '2018-04-11',
|
||||||
|
amount: 98,
|
||||||
|
type: 'income',
|
||||||
|
note: 'transfer',
|
||||||
|
}];
|
||||||
|
|
||||||
|
handleResize = index => (e, { size }) => {
|
||||||
|
this.setState(({ columns }) => {
|
||||||
|
const nextColumns = [...columns];
|
||||||
|
nextColumns[index] = {
|
||||||
|
...nextColumns[index],
|
||||||
|
width: size.width,
|
||||||
|
};
|
||||||
|
return { columns: nextColumns };
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const columns = this.state.columns.map((col, index) => ({
|
||||||
|
...col,
|
||||||
|
onHeaderCell: column => ({
|
||||||
|
width: column.width,
|
||||||
|
onResize: this.handleResize(index),
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Table
|
||||||
|
bordered
|
||||||
|
components={this.components}
|
||||||
|
columns={columns}
|
||||||
|
dataSource={this.data}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
ReactDOM.render(<Demo />, mountNode);
|
||||||
|
````
|
||||||
|
|
||||||
|
````css
|
||||||
|
#components-table-demo-resizable-column .react-resizable {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#components-table-demo-resizable-column .react-resizable-handle {
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
right: -5px;
|
||||||
|
cursor: col-resize;
|
||||||
|
}
|
||||||
|
````
|
||||||
@ -31,10 +31,11 @@
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
border-top: 2px transparent solid;
|
border-top: 2px transparent solid;
|
||||||
border-bottom: 2px transparent solid;
|
border-bottom: 2px transparent solid;
|
||||||
margin-top: -2px;
|
|
||||||
/* Required to make elements draggable in old WebKit */
|
/* Required to make elements draggable in old WebKit */
|
||||||
-khtml-user-drag: element;
|
-khtml-user-drag: element;
|
||||||
-webkit-user-drag: element;
|
-webkit-user-drag: element;
|
||||||
|
|
||||||
|
line-height: @tree-title-height - 4px;
|
||||||
}
|
}
|
||||||
&.drag-over {
|
&.drag-over {
|
||||||
> span[draggable] {
|
> span[draggable] {
|
||||||
|
|||||||
@ -30,6 +30,8 @@ ReactDOM.render(<ColorPalettes />, mountNode);
|
|||||||
|
|
||||||
Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序员的精心调制，结合了色彩自然变化的规律，我们得出了一套色彩生成工具，当有进一步色彩设计需求时，设计者只需按照一定规则定义完毕主色，便可以自动获得一系列完整的衍生色。
|
Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序员的精心调制，结合了色彩自然变化的规律，我们得出了一套色彩生成工具，当有进一步色彩设计需求时，设计者只需按照一定规则定义完毕主色，便可以自动获得一系列完整的衍生色。
|
||||||
|
|
||||||
|
> Ant Design 三代色板的历史可以参看社区文章：[Ant Design 色板生成算法演进之路](https://zhuanlan.zhihu.com/p/32422584)。
|
||||||
|
|
||||||
### 中性色板
|
### 中性色板
|
||||||
|
|
||||||
中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理的选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。Ant Design 的中性色板一共包含了从白到黑的 10 个颜色。
|
中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理的选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。Ant Design 的中性色板一共包含了从白到黑的 10 个颜色。
|
||||||
|
|||||||
@ -158,6 +158,7 @@
|
|||||||
"react-github-button": "^0.1.1",
|
"react-github-button": "^0.1.1",
|
||||||
"react-infinite-scroller": "^1.0.15",
|
"react-infinite-scroller": "^1.0.15",
|
||||||
"react-intl": "^2.0.1",
|
"react-intl": "^2.0.1",
|
||||||
|
"react-resizable": "^1.7.5",
|
||||||
"react-router-dom": "^4.2.2",
|
"react-router-dom": "^4.2.2",
|
||||||
"react-sublime-video": "^0.2.0",
|
"react-sublime-video": "^0.2.0",
|
||||||
"react-virtualized": "~9.20.0",
|
"react-virtualized": "~9.20.0",
|
||||||
@ -196,7 +197,7 @@
|
|||||||
"start": "rimraf _site && mkdir _site && node ./scripts/generateColorLess.js && cross-env NODE_ENV=development bisheng start -c ./site/bisheng.config.js",
|
"start": "rimraf _site && mkdir _site && node ./scripts/generateColorLess.js && cross-env NODE_ENV=development bisheng start -c ./site/bisheng.config.js",
|
||||||
"start:preact": "node ./scripts/generateColorLess.js && cross-env NODE_ENV=development REACT_ENV=preact bisheng start -c ./site/bisheng.config.js",
|
"start:preact": "node ./scripts/generateColorLess.js && cross-env NODE_ENV=development REACT_ENV=preact bisheng start -c ./site/bisheng.config.js",
|
||||||
"site": "cross-env NODE_ENV=production bisheng build --ssr -c ./site/bisheng.config.js && node ./scripts/generateColorLess.js",
|
"site": "cross-env NODE_ENV=production bisheng build --ssr -c ./site/bisheng.config.js && node ./scripts/generateColorLess.js",
|
||||||
"predeploy": "antd-tools run clean && npm run site && cp netlify.toml _site",
|
"predeploy": "antd-tools run clean && npm run site && cp netlify.toml _site && cp -r .circleci _site",
|
||||||
"deploy": "bisheng gh-pages --push-only",
|
"deploy": "bisheng gh-pages --push-only",
|
||||||
"pub": "antd-tools run pub",
|
"pub": "antd-tools run pub",
|
||||||
"prepublish": "antd-tools run guard",
|
"prepublish": "antd-tools run guard",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user