mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
merge master
This commit is contained in:
zombiej
commit
2c531a827d
@ -61,15 +61,14 @@ function finalizeCompile() {
|
||||
|
||||
function buildThemeFile(theme, vars) {
|
||||
// Build less entry file: dist/antd.${theme}.less
|
||||
fs.writeFileSync(
|
||||
path.join(process.cwd(), 'dist', `antd.${theme}.less`),
|
||||
`@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`,
|
||||
);
|
||||
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(`Built a entry less file to dist/antd.${theme}.less`);
|
||||
|
||||
if (theme === 'default') {
|
||||
if (theme !== 'default') {
|
||||
fs.writeFileSync(
|
||||
path.join(process.cwd(), 'dist', `antd.${theme}.less`),
|
||||
`@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`,
|
||||
);
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(`Built a entry less file to dist/antd.${theme}.less`);
|
||||
} else {
|
||||
fs.writeFileSync(
|
||||
path.join(process.cwd(), 'dist', `default-theme.js`),
|
||||
`module.exports = ${JSON.stringify(vars, null, 2)};\n`,
|
||||
|
||||
12
.github/workflows/rebase.yml
vendored
12
.github/workflows/rebase.yml
vendored
@ -8,11 +8,13 @@ jobs:
|
||||
if: github.event.issue.pull_request != '' && contains(github.event.comment.body, '/rebase')
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@master
|
||||
- name: Automatic Rebase
|
||||
uses: cirrus-actions/rebase@master
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
- uses: actions/checkout@master
|
||||
with:
|
||||
fetch-depth: 0
|
||||
- name: Automatic Rebase
|
||||
uses: cirrus-actions/rebase@1.2
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
# https://github.community/t5/GitHub-Actions/Workflow-is-failing-if-no-job-can-be-ran-due-to-condition/m-p/38186#M3250
|
||||
always_job:
|
||||
name: Always run job
|
||||
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -25,6 +25,7 @@ nohup.out
|
||||
_site
|
||||
_data
|
||||
dist
|
||||
report.html
|
||||
/lib
|
||||
/es
|
||||
elasticsearch-*
|
||||
@ -55,4 +56,4 @@ site/theme/template/Content/EditButton.jsx
|
||||
site/theme/template/Resources/*.jsx
|
||||
site/theme/template/Resources/**/*.jsx
|
||||
site/theme/template/NotFound.jsx
|
||||
scripts/previewEditor/index.html
|
||||
scripts/previewEditor/index.html
|
||||
|
||||
@ -1,2 +1 @@
|
||||
~*
|
||||
dist/report.html
|
||||
@ -9,6 +9,12 @@
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&&-no-icon {
|
||||
.@{alert-prefix-cls}-rtl& {
|
||||
padding: @alert-no-icon-padding-vertical 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&&-closable {
|
||||
.@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
|
||||
padding-right: 37px;
|
||||
|
||||
@ -65,7 +65,7 @@ function spaceChildren(children: React.ReactNode, needInserted: boolean) {
|
||||
);
|
||||
}
|
||||
|
||||
const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'danger', 'link');
|
||||
const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'link');
|
||||
export type ButtonType = typeof ButtonTypes[number];
|
||||
const ButtonShapes = tuple('circle', 'circle-outline', 'round');
|
||||
export type ButtonShape = typeof ButtonShapes[number];
|
||||
|
||||
@ -54,12 +54,15 @@ Following the Ant Design specification, we will add one space between if Button
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="Button with two Chinese characters" />
|
||||
|
||||
|
||||
<style>
|
||||
[id^=components-button-demo-] .ant-btn {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
[id^="components-button-demo-"] .ant-btn-rtl {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
[id^=components-button-demo-] .ant-btn-group > .ant-btn,
|
||||
[id^=components-button-demo-] .ant-btn-group > span > .ant-btn {
|
||||
margin-right: 0;
|
||||
|
||||
@ -62,6 +62,10 @@ subtitle: 按钮
|
||||
margin-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
[id^="components-button-demo-"] .ant-btn-rtl {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
[id^="components-button-demo-"] .ant-btn-group > .ant-btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@ -23,8 +23,8 @@ A card can be used to display content related to a single subject. The content c
|
||||
| --- | --- | --- | --- | --- |
|
||||
| actions | The action list, shows at the bottom of the Card. | Array<ReactNode> | - | |
|
||||
| activeTabKey | Current TabPane's key | string | - | |
|
||||
| headStyle | Inline style to apply to the card head | object | - | |
|
||||
| bodyStyle | Inline style to apply to the card content | object | - | |
|
||||
| headStyle | Inline style to apply to the card head | CSSProperties | - | |
|
||||
| bodyStyle | Inline style to apply to the card content | CSSProperties | - | |
|
||||
| bordered | Toggles rendering of the border around the card | boolean | `true` | |
|
||||
| cover | Card cover | ReactNode | - | |
|
||||
| defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set. | string | - | |
|
||||
@ -41,18 +41,18 @@ A card can be used to display content related to a single subject. The content c
|
||||
|
||||
### Card.Grid
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --------- | ------------------------------- | ------- | ------- | ------- |
|
||||
| className | className of container | string | - | |
|
||||
| hoverable | Lift up when hovering card grid | boolean | true | |
|
||||
| style | style object of container | object | - | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --------- | ------------------------------- | ------------- | ------- | ------- |
|
||||
| className | className of container | string | - | |
|
||||
| hoverable | Lift up when hovering card grid | boolean | true | |
|
||||
| style | style object of container | CSSProperties | - | |
|
||||
|
||||
### Card.Meta
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ----------- | ------------------------- | --------- | ------- | ------- |
|
||||
| avatar | avatar or icon | ReactNode | - | |
|
||||
| className | className of container | string | - | |
|
||||
| description | description content | ReactNode | - | |
|
||||
| style | style object of container | object | - | |
|
||||
| title | title content | ReactNode | - | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ----------- | ------------------------- | ------------- | ------- | ------- |
|
||||
| avatar | avatar or icon | ReactNode | - | |
|
||||
| className | className of container | string | - | |
|
||||
| description | description content | ReactNode | - | |
|
||||
| style | style object of container | CSSProperties | - | |
|
||||
| title | title content | ReactNode | - | |
|
||||
|
||||
@ -24,8 +24,8 @@ cols: 1
|
||||
| --- | --- | --- | --- | --- |
|
||||
| actions | 卡片操作组，位置在卡片底部 | Array<ReactNode> | - | |
|
||||
| activeTabKey | 当前激活页签的 key | string | - | |
|
||||
| headStyle | 自定义标题区域样式 | object | - | |
|
||||
| bodyStyle | 内容区域自定义样式 | object | - | |
|
||||
| headStyle | 自定义标题区域样式 | CSSProperties | - | |
|
||||
| bodyStyle | 内容区域自定义样式 | CSSProperties | - | |
|
||||
| bordered | 是否有边框 | boolean | true | |
|
||||
| cover | 卡片封面 | ReactNode | - | |
|
||||
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签 | |
|
||||
@ -42,18 +42,18 @@ cols: 1
|
||||
|
||||
### Card.Grid
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------- | ---------------------- | ------- | ------ | ---- |
|
||||
| className | 网格容器类名 | string | - | |
|
||||
| hoverable | 鼠标移过时可浮起 | boolean | true | |
|
||||
| style | 定义网格容器类名的样式 | object | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------- | ---------------------- | ------------- | ------ | ---- |
|
||||
| className | 网格容器类名 | string | - | |
|
||||
| hoverable | 鼠标移过时可浮起 | boolean | true | |
|
||||
| style | 定义网格容器类名的样式 | CSSProperties | - | |
|
||||
|
||||
### Card.Meta
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----------- | ------------------ | --------- | ------ | ---- |
|
||||
| avatar | 头像/图标 | ReactNode | - | |
|
||||
| className | 容器类名 | string | - | |
|
||||
| description | 描述内容 | ReactNode | - | |
|
||||
| style | 定义容器类名的样式 | object | - | |
|
||||
| title | 标题内容 | ReactNode | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----------- | ------------------ | ------------- | ------ | ---- |
|
||||
| avatar | 头像/图标 | ReactNode | - | |
|
||||
| className | 容器类名 | string | - | |
|
||||
| description | 描述内容 | ReactNode | - | |
|
||||
| style | 定义容器类名的样式 | CSSProperties | - | |
|
||||
| title | 标题内容 | ReactNode | - | |
|
||||
|
||||
@ -40,7 +40,7 @@ Cascade selection box.
|
||||
| popupVisible | set visible of cascader popup | boolean | - | |
|
||||
| showSearch | Whether show search input in single mode. | boolean\|object | false | |
|
||||
| size | input size | `large` \| `middle` \| `small` | | |
|
||||
| style | additional style | string | - | |
|
||||
| style | additional style | CSSProperties | - | |
|
||||
| suffixIcon | The custom suffix icon | ReactNode | - | |
|
||||
| value | selected value | string\[] | - | |
|
||||
| onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - | |
|
||||
|
||||
@ -41,7 +41,7 @@ subtitle: 级联选择
|
||||
| popupVisible | 控制浮层显隐 | boolean | - | |
|
||||
| showSearch | 在选择框中显示搜索框 | boolean | false | |
|
||||
| size | 输入框大小 | `large` \| `middle` \| `small` | 无 | |
|
||||
| style | 自定义样式 | string | - | |
|
||||
| style | 自定义样式 | CSSProperties | - | |
|
||||
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
||||
| value | 指定选中项 | string\[] | - | |
|
||||
| onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - | |
|
||||
|
||||
@ -658,6 +658,7 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
|
||||
</span>
|
||||
<div
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
style="margin:0 8px"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
|
||||
@ -69,7 +69,11 @@ class Demo extends React.Component {
|
||||
</Collapse>
|
||||
<br />
|
||||
<span>Expand Icon Position: </span>
|
||||
<Select value={expandIconPosition} onChange={this.onPositionChange}>
|
||||
<Select
|
||||
value={expandIconPosition}
|
||||
style={{ margin: '0 8px' }}
|
||||
onChange={this.onPositionChange}
|
||||
>
|
||||
<Option value="left">left</Option>
|
||||
<Option value="right">right</Option>
|
||||
</Select>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import Tag, { TagProps } from '../tag';
|
||||
|
||||
export default function PickerButton(props: TagProps) {
|
||||
export default function PickerTag(props: TagProps) {
|
||||
return <Tag color="blue" {...props} />;
|
||||
}
|
||||
|
||||
@ -75,4 +75,19 @@ describe('RangePicker', () => {
|
||||
expect(value[0].isSame(value[1], 'date')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('ranges', () => {
|
||||
it('RangePicker support presetted ranges with Tags', () => {
|
||||
const wrapper = mount(
|
||||
<RangePicker
|
||||
ranges={{
|
||||
Today: [moment(), moment()],
|
||||
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
||||
}}
|
||||
open
|
||||
/>,
|
||||
);
|
||||
expect(wrapper).toMatchRenderedSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -59,11 +59,11 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke
|
||||
| open | open state of picker | boolean | - | |
|
||||
| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` (4.1.0) \| `year` | `date` | |
|
||||
| placeholder | placeholder of date input | string\|RangePicker\[] | - | |
|
||||
| popupStyle | to customize the style of the popup calendar | object | {} | |
|
||||
| popupStyle | to customize the style of the popup calendar | CSSProperties | {} | |
|
||||
| size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | |
|
||||
| bordered | whether has border style | Boolean | true | |
|
||||
| suffixIcon | The custom suffix icon | ReactNode | - | |
|
||||
| style | to customize the style of the input box | object | {} | |
|
||||
| style | to customize the style of the input box | CSSProperties | {} | |
|
||||
| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - | |
|
||||
| onPanelChange | callback when picker panel mode is changed | function(value, mode) | - | |
|
||||
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | |
|
||||
|
||||
@ -61,11 +61,11 @@ import 'moment/locale/zh-cn';
|
||||
| open | 控制弹层是否展开 | boolean | - | |
|
||||
| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` (4.1.0) \| `year` | `date` | |
|
||||
| placeholder | 输入框提示文字 | string\|RangePicker\[] | - | |
|
||||
| popupStyle | 额外的弹出日历样式 | object | {} | |
|
||||
| popupStyle | 额外的弹出日历样式 | CSSProperties | {} | |
|
||||
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | 无 | |
|
||||
| bordered | 是否有边框 | Boolean | true | |
|
||||
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
||||
| style | 自定义输入框样式 | object | {} | |
|
||||
| style | 自定义输入框样式 | CSSProperties | {} | |
|
||||
| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | 无 | |
|
||||
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | |
|
||||
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
||||
|
||||
@ -242,7 +242,11 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.@{picker-prefix-cls}-preset span {
|
||||
// https://github.com/ant-design/ant-design/issues/23687
|
||||
.@{picker-prefix-cls}-preset > .@{ant-prefix}-tag-blue {
|
||||
color: @primary-color;
|
||||
background: @primary-1;
|
||||
border-color: @primary-3;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@ -20,6 +20,6 @@ A divider line separates different content.
|
||||
| className | className of container | string | - | |
|
||||
| dashed | whether line is dashed | boolean | false | |
|
||||
| orientation | position of title inside divider | `left` \| `right` \| `center` | `center` | |
|
||||
| style | style object of container | object | - | |
|
||||
| style | style object of container | CSSProperties | - | |
|
||||
| type | direction type of divider | `horizontal` \| `vertical` | `horizontal` | |
|
||||
| plain | divider text show as plain style | boolean | true | 4.2.0 |
|
||||
|
||||
@ -15,7 +15,7 @@ export interface DividerProps {
|
||||
|
||||
const Divider: React.FC<DividerProps> = props => (
|
||||
<ConfigConsumer>
|
||||
{({ getPrefixCls }: ConfigConsumerProps) => {
|
||||
{({ getPrefixCls, direction }: ConfigConsumerProps) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
type = 'horizontal',
|
||||
@ -34,6 +34,7 @@ const Divider: React.FC<DividerProps> = props => (
|
||||
[`${prefixCls}-with-text${orientationPrefix}`]: hasChildren,
|
||||
[`${prefixCls}-dashed`]: !!dashed,
|
||||
[`${prefixCls}-plain`]: !!plain,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
});
|
||||
return (
|
||||
<div className={classString} {...restProps} role="separator">
|
||||
|
||||
@ -19,6 +19,6 @@ subtitle: 分割线
|
||||
| className | 分割线样式类 | string | - | |
|
||||
| dashed | 是否虚线 | boolean | false | |
|
||||
| orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center` | |
|
||||
| style | 分割线样式对象 | object | - | |
|
||||
| style | 分割线样式对象 | CSSProperties | - | |
|
||||
| type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` | |
|
||||
| plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 |
|
||||
|
||||
@ -101,3 +101,5 @@
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
|
||||
36
components/divider/style/rtl.less
Normal file
36
components/divider/style/rtl.less
Normal file
@ -0,0 +1,36 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@divider-prefix-cls: ~'@{ant-prefix}-divider';
|
||||
|
||||
.@{divider-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-left {
|
||||
&::before {
|
||||
.@{divider-prefix-cls}-rtl& {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
.@{divider-prefix-cls}-rtl& {
|
||||
width: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-right {
|
||||
&::before {
|
||||
.@{divider-prefix-cls}-rtl& {
|
||||
width: 5%;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
.@{divider-prefix-cls}-rtl& {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -21,12 +21,12 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
|
||||
| --- | --- | --- | --- |
|
||||
| closable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | boolean | true |
|
||||
| destroyOnClose | Whether to unmount child components on closing drawer or not. | boolean | false |
|
||||
| forceRender | Prerender Drawer component forcely | boolean | false |
|
||||
| forceRender | Prerender Drawer component forcely | boolean | false |
|
||||
| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| Selectors \| false | 'body' |
|
||||
| mask | Whether to show mask or not. | Boolean | true |
|
||||
| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | boolean | true |
|
||||
| maskStyle | Style for Drawer's mask element. | object | {} |
|
||||
| style | Style of wrapper element which **contains mask** compare to `drawerStyle` | object | - |
|
||||
| maskStyle | Style for Drawer's mask element. | CSSProperties | {} |
|
||||
| style | Style of wrapper element which **contains mask** compare to `drawerStyle` | CSSProperties | - |
|
||||
| drawerStyle | Style of the popup layer element | object | - |
|
||||
| headerStyle | Style of the drawer header part | object | - |
|
||||
| bodyStyle | Style of the drawer content part | object | - |
|
||||
|
||||
@ -24,11 +24,11 @@ title: Drawer
|
||||
| getContainer | 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| `() => HTMLElement` \| Selectors \| false | 'body' |
|
||||
| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
|
||||
| mask | 是否展示遮罩 | boolean | true |
|
||||
| maskStyle | 遮罩样式 | object | {} |
|
||||
| style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | object | - |
|
||||
| drawerStyle | 用于设置 Drawer 弹出层的样式 | object | - |
|
||||
| headerStyle | 用于设置 Drawer 头部的样式 | object | - |
|
||||
| bodyStyle | 可用于设置 Drawer 内容部分的样式 | object | - |
|
||||
| maskStyle | 遮罩样式 | CSSProperties | {} |
|
||||
| style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | CSSProperties | - |
|
||||
| drawerStyle | 用于设置 Drawer 弹出层的样式 | CSSProperties | - |
|
||||
| headerStyle | 用于设置 Drawer 头部的样式 | CSSProperties | - |
|
||||
| bodyStyle | 可用于设置 Drawer 内容部分的样式 | CSSProperties | - |
|
||||
| title | 标题 | string \| ReactNode | - |
|
||||
| visible | Drawer 是否可见 | boolean | - |
|
||||
| width | 宽度 | string \| number | 256 |
|
||||
|
||||
@ -1147,7 +1147,9 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<pre>
|
||||
<pre
|
||||
class="demo-code"
|
||||
>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={6} />
|
||||
<Col span={6} />
|
||||
@ -1155,7 +1157,9 @@ Array [
|
||||
<Col span={6} />
|
||||
</Row>
|
||||
</pre>,
|
||||
<pre>
|
||||
<pre
|
||||
class="demo-code"
|
||||
>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={6} />
|
||||
<Col span={6} />
|
||||
|
||||
@ -103,8 +103,8 @@ class App extends React.Component {
|
||||
</div>
|
||||
<Row gutter={[this.gutters[gutterKey], this.vgutters[vgutterKey]]}>{cols}</Row>
|
||||
<Row gutter={[this.gutters[gutterKey], this.vgutters[vgutterKey]]}>{cols}</Row>
|
||||
<pre>{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
|
||||
<pre>{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
|
||||
<pre className="demo-code">{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
|
||||
<pre className="demo-code">{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -131,6 +131,9 @@ ReactDOM.render(<App />, mountNode);
|
||||
background: #f9f9f9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
#components-grid-demo-playground pre.demo-code {
|
||||
direction: ltr;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
|
||||
35
components/icon/demo/scriptUrl.md
Normal file
35
components/icon/demo/scriptUrl.md
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 使用 iconfont.cn 的多个资源
|
||||
en-US: Multiple resources from iconfont.cn
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
`@ant-design/icons@4.1.0` 以后，`scriptUrl` 可引用多个资源，用户可灵活的管理 [iconfont.cn](http://iconfont.cn/) 图标。如果资源的图标出现重名，会按照数组顺序进行覆盖。
|
||||
|
||||
## en-US
|
||||
|
||||
You can use `scriptUrl` as an array after `@ant-design/icons@4.1.0`, manage icons in one `<Icon />` from multiple [iconfont.cn](http://iconfont.cn/) resources. If icon with a duplicate name in resources, it will overrided in array order.
|
||||
|
||||
```jsx
|
||||
import { createFromIconfontCN } from '@ant-design/icons';
|
||||
|
||||
const IconFont = createFromIconfontCN({
|
||||
scriptUrl: [
|
||||
'//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js', // icon-javascript, icon-java, icon-shoppingcart (overrided)
|
||||
'//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js', // icon-shoppingcart, icon-python
|
||||
],
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<div className="icons-list">
|
||||
<IconFont type="icon-javascript" />
|
||||
<IconFont type="icon-java" />
|
||||
<IconFont type="icon-shoppingcart" />
|
||||
<IconFont type="icon-python" />
|
||||
</div>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -24,7 +24,7 @@ ReactDOM.render(<IconDisplay />, mountNode);
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| className | className of Icon | `string` | - | |
|
||||
| className | className of Icon | `string` | - | |
|
||||
| style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
|
||||
| spin | Rotate icon with animation | boolean | false | |
|
||||
| rotate | Rotate by n degrees (not working in IE9) | number | - | |
|
||||
@ -111,7 +111,7 @@ The following options are available:
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. | string | - | |
|
||||
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. Support `string[]` after `@ant-design/icons@4.1.0`. | string \| string[] | - | |
|
||||
| extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} | |
|
||||
|
||||
The property `scriptUrl` should be set to import the SVG sprite symbols.
|
||||
|
||||
@ -106,7 +106,7 @@ ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址 | string | - | |
|
||||
| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，`@ant-design/icons@4.1.0` 之后支持 `string[]` 类型 | string \| string[] | - | |
|
||||
| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | `{ [key: string]: any }` | {} | |
|
||||
|
||||
在 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
|
||||
|
||||
@ -77,7 +77,7 @@ The wrapper.
|
||||
| --- | --- | --- | --- |
|
||||
| className | container className | string | - |
|
||||
| hasSider | whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
|
||||
| style | to customize the styles | object | - |
|
||||
| style | to customize the styles | CSSProperties | - |
|
||||
|
||||
> APIs of `Layout.Header` `Layout.Footer` `Layout.Content` are the same as that of `Layout`.
|
||||
|
||||
@ -94,7 +94,7 @@ The sidebar.
|
||||
| collapsible | whether can be collapsed | boolean | false |
|
||||
| defaultCollapsed | to set the initial status | boolean | false |
|
||||
| reverseArrow | reverse direction of arrow, for a sider that expands from the right | boolean | false |
|
||||
| style | to customize the styles | object | - |
|
||||
| style | to customize the styles | CSSProperties | - |
|
||||
| theme | color theme of the sidebar | `light` \| `dark` | `dark` |
|
||||
| trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode | - |
|
||||
| width | width of the sidebar | number\|string | 200 |
|
||||
|
||||
@ -78,7 +78,7 @@ title: Layout
|
||||
| --- | --- | --- | --- |
|
||||
| className | 容器 className | string | - |
|
||||
| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
|
||||
| style | 指定样式 | object | - |
|
||||
| style | 指定样式 | CSSProperties | - |
|
||||
|
||||
> `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同
|
||||
|
||||
@ -95,7 +95,7 @@ title: Layout
|
||||
| collapsible | 是否可收起 | boolean | false |
|
||||
| defaultCollapsed | 是否默认收起 | boolean | false |
|
||||
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |
|
||||
| style | 指定样式 | object | - |
|
||||
| style | 指定样式 | CSSProperties | - |
|
||||
| theme | 主题颜色 | `light` \| `dark` | `dark` |
|
||||
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - |
|
||||
| width | 宽度 | number\|string | 200 |
|
||||
|
||||
@ -934,88 +934,118 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
class="ant-list-item-action"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
<span
|
||||
aria-label="star"
|
||||
class="anticon anticon-star"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="star"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="star"
|
||||
class="anticon anticon-star"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
156
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="star"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
156
|
||||
</div>
|
||||
</div>
|
||||
<em
|
||||
class="ant-list-item-action-split"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<span
|
||||
aria-label="like"
|
||||
class="anticon anticon-like"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="like"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="like"
|
||||
class="anticon anticon-like"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 00-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 00471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0142.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
156
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="like"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 00-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 00471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0142.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
156
|
||||
</div>
|
||||
</div>
|
||||
<em
|
||||
class="ant-list-item-action-split"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<span
|
||||
aria-label="message"
|
||||
class="anticon anticon-message"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="message"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="message"
|
||||
class="anticon anticon-message"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
2
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="message"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -1073,88 +1103,118 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
class="ant-list-item-action"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
<span
|
||||
aria-label="star"
|
||||
class="anticon anticon-star"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="star"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="star"
|
||||
class="anticon anticon-star"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
156
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="star"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
156
|
||||
</div>
|
||||
</div>
|
||||
<em
|
||||
class="ant-list-item-action-split"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<span
|
||||
aria-label="like"
|
||||
class="anticon anticon-like"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="like"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="like"
|
||||
class="anticon anticon-like"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 00-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 00471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0142.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
156
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="like"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 00-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 00471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0142.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
156
|
||||
</div>
|
||||
</div>
|
||||
<em
|
||||
class="ant-list-item-action-split"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<span
|
||||
aria-label="message"
|
||||
class="anticon anticon-message"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="message"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="message"
|
||||
class="anticon anticon-message"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
2
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="message"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -1212,88 +1272,118 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
class="ant-list-item-action"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
<span
|
||||
aria-label="star"
|
||||
class="anticon anticon-star"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="star"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="star"
|
||||
class="anticon anticon-star"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
156
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="star"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
156
|
||||
</div>
|
||||
</div>
|
||||
<em
|
||||
class="ant-list-item-action-split"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<span
|
||||
aria-label="like"
|
||||
class="anticon anticon-like"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="like"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="like"
|
||||
class="anticon anticon-like"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 00-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 00471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0142.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
156
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="like"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 00-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 00471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0142.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
156
|
||||
</div>
|
||||
</div>
|
||||
<em
|
||||
class="ant-list-item-action-split"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<span
|
||||
aria-label="message"
|
||||
class="anticon anticon-message"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="message"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="message"
|
||||
class="anticon anticon-message"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
2
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="message"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -14,7 +14,7 @@ title:
|
||||
Set the `itemLayout` property to `vertical` to create a vertical list.
|
||||
|
||||
```jsx
|
||||
import { List, Avatar } from 'antd';
|
||||
import { List, Avatar, Space } from 'antd';
|
||||
import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';
|
||||
|
||||
const listData = [];
|
||||
@ -31,10 +31,10 @@ for (let i = 0; i < 23; i++) {
|
||||
}
|
||||
|
||||
const IconText = ({ icon, text }) => (
|
||||
<span>
|
||||
{React.createElement(icon, { style: { marginRight: 8 } })}
|
||||
<Space>
|
||||
{React.createElement(icon)}
|
||||
{text}
|
||||
</span>
|
||||
</Space>
|
||||
);
|
||||
|
||||
ReactDOM.render(
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
}
|
||||
|
||||
&-action {
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
.@{list-prefix-cls}-rtl& {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
@ -38,7 +38,7 @@ More layouts with navigation: [Layout](/components/layout).
|
||||
| openKeys | Array with the keys of currently opened sub-menus | string\[] | | |
|
||||
| selectable | Allows selecting menu items | boolean | true | |
|
||||
| selectedKeys | Array with the keys of currently selected menu items | string\[] | | |
|
||||
| style | Style of the root node | object | | |
|
||||
| style | Style of the root node | CSSProperties | | |
|
||||
| subMenuCloseDelay | Delay time to hide submenu when mouse leaves (in seconds) | number | 0.1 | |
|
||||
| subMenuOpenDelay | Delay time to show submenu when mouse enters, (in seconds) | number | 0 | |
|
||||
| theme | Color theme of the menu | `light` \| `dark` | `light` | |
|
||||
|
||||
@ -39,7 +39,7 @@ subtitle: 导航菜单
|
||||
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | | |
|
||||
| selectable | 是否允许选中 | boolean | true | |
|
||||
| selectedKeys | 当前选中的菜单项 key 数组 | string\[] | | |
|
||||
| style | 根节点样式 | object | | |
|
||||
| style | 根节点样式 | CSSProperties | | |
|
||||
| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 | |
|
||||
| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 | |
|
||||
| theme | 主题颜色 | `light` \| `dark` | `light` | |
|
||||
|
||||
@ -15,7 +15,7 @@ When requiring users to interact with the application, but without jumping to a
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| afterClose | Specify a function that will be called when modal is closed completely. | function | - |
|
||||
| bodyStyle | Body style for modal body element. Such as height, padding etc. | object | {} |
|
||||
| bodyStyle | Body style for modal body element. Such as height, padding etc. | CSSProperties | {} |
|
||||
| cancelText | Text of the Cancel button | string\|ReactNode | `Cancel` |
|
||||
| centered | Centered Modal | Boolean | `false` |
|
||||
| closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | true |
|
||||
@ -32,7 +32,7 @@ When requiring users to interact with the application, but without jumping to a
|
||||
| okType | Button `type` of the OK button | string | `primary` |
|
||||
| okButtonProps | The ok button props | [ButtonProps](/components/button) | - |
|
||||
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - |
|
||||
| style | Style of floating layer, typically used at least for adjusting the position. | object | - |
|
||||
| style | Style of floating layer, typically used at least for adjusting the position. | CSSProperties | - |
|
||||
| title | The modal dialog's title | string\|ReactNode | - |
|
||||
| visible | Whether the modal dialog is visible or not | boolean | false |
|
||||
| width | Width of the modal dialog | string\|number | 520 |
|
||||
|
||||
@ -23,7 +23,7 @@ title: Modal
|
||||
| centered | 垂直居中展示 Modal | Boolean | `false` |
|
||||
| closable | 是否显示右上角的关闭按钮 | boolean | true |
|
||||
| closeIcon | 自定义关闭图标 | ReactNode | - |
|
||||
| confirmLoading | 确定按钮 loading | boolean | - |
|
||||
| confirmLoading | 确定按钮 loading | boolean | false |
|
||||
| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |
|
||||
| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | string\|ReactNode | 确定取消按钮 |
|
||||
| forceRender | 强制渲染 Modal | boolean | false |
|
||||
@ -36,7 +36,7 @@ title: Modal
|
||||
| okType | 确认按钮类型 | string | primary |
|
||||
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - |
|
||||
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - |
|
||||
| style | 可用于设置浮层的样式，调整浮层位置等 | object | - |
|
||||
| style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - |
|
||||
| title | 标题 | string\|ReactNode | - |
|
||||
| visible | 对话框是否可见 | boolean | - |
|
||||
| width | 宽度 | string\|number | 520 |
|
||||
|
||||
@ -4,7 +4,7 @@ import ArrowLeftOutlined from '@ant-design/icons/ArrowLeftOutlined';
|
||||
import ArrowRightOutlined from '@ant-design/icons/ArrowRightOutlined';
|
||||
import ResizeObserver from 'rc-resize-observer';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import Tag from '../tag';
|
||||
import { TagType } from '../tag';
|
||||
import Breadcrumb, { BreadcrumbProps } from '../breadcrumb';
|
||||
import Avatar, { AvatarProps } from '../avatar';
|
||||
import TransButton from '../_util/transButton';
|
||||
@ -17,7 +17,7 @@ export interface PageHeaderProps {
|
||||
subTitle?: React.ReactNode;
|
||||
style?: React.CSSProperties;
|
||||
breadcrumb?: BreadcrumbProps;
|
||||
tags?: typeof Tag | typeof Tag[];
|
||||
tags?: React.ReactElement<TagType> | React.ReactElement<TagType>[];
|
||||
footer?: React.ReactNode;
|
||||
extra?: React.ReactNode;
|
||||
avatar?: AvatarProps;
|
||||
|
||||
@ -45,19 +45,10 @@ export interface PaginationProps {
|
||||
showLessItems?: boolean;
|
||||
}
|
||||
|
||||
export type PaginationPosition =
|
||||
| 'top'
|
||||
| 'bottom'
|
||||
| 'both'
|
||||
| 'topLeft'
|
||||
| 'topCenter'
|
||||
| 'topRight'
|
||||
| 'bottomLeft'
|
||||
| 'bottomCenter'
|
||||
| 'bottomRight';
|
||||
export type PaginationPosition = 'top' | 'bottom' | 'both';
|
||||
|
||||
export interface PaginationConfig extends PaginationProps {
|
||||
position?: PaginationPosition[] | PaginationPosition;
|
||||
position?: PaginationPosition;
|
||||
}
|
||||
|
||||
export type PaginationLocale = any;
|
||||
@ -68,7 +59,7 @@ export default class Pagination extends React.Component<PaginationProps, {}> {
|
||||
private inferredSmall: boolean = false;
|
||||
|
||||
componentDidMount() {
|
||||
this.token = ResponsiveObserve.subscribe((screens) => {
|
||||
this.token = ResponsiveObserve.subscribe(screens => {
|
||||
const { xs } = screens;
|
||||
const { size, responsive } = this.props;
|
||||
const inferredSmall = !!(xs && !size && responsive);
|
||||
|
||||
@ -18,12 +18,12 @@ Rate component.
|
||||
| allowClear | whether to allow clear when click again | boolean | true |
|
||||
| allowHalf | whether to allow semi selection | boolean | false |
|
||||
| autoFocus | get focus when component mounted | boolean | false |
|
||||
| character | custom character of rate | ReactNode | `<Icon type="star" />` |
|
||||
| character | custom character of rate | ReactNode | [<StarFilled /\>](https://ant.design/components/icon/) |
|
||||
| className | custom class name of rate | string | |
|
||||
| count | star count | number | 5 |
|
||||
| defaultValue | default value | number | 0 |
|
||||
| disabled | read only, unable to interact | boolean | false |
|
||||
| style | custom style object of rate | object | |
|
||||
| style | custom style object of rate | CSSProperties | |
|
||||
| tooltips | Customize tooltip by each character | string\[] | |
|
||||
| value | current value | number | |
|
||||
| onBlur | callback when component lose focus | Function() | |
|
||||
|
||||
@ -14,24 +14,24 @@ title: Rate
|
||||
|
||||
## API
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ------------- | ------------------------ | ----------------------- | ---------------------- |
|
||||
| allowClear | 是否允许再次点击后清除 | boolean | true |
|
||||
| allowHalf | 是否允许半选 | boolean | false |
|
||||
| autoFocus | 自动获取焦点 | boolean | false |
|
||||
| character | 自定义字符 | ReactNode | `<Icon type="star" />` |
|
||||
| className | 自定义样式类名 | string | |
|
||||
| count | star 总数 | number | 5 |
|
||||
| defaultValue | 默认值 | number | 0 |
|
||||
| disabled | 只读，无法进行交互 | boolean | false |
|
||||
| style | 自定义样式对象 | object | |
|
||||
| tooltips | 自定义每项的提示信息 | string\[] | |
|
||||
| value | 当前数，受控值 | number | |
|
||||
| onBlur | 失去焦点时的回调 | Function() | |
|
||||
| onChange | 选择时的回调 | Function(value: number) | |
|
||||
| onFocus | 获取焦点时的回调 | Function() | |
|
||||
| onHoverChange | 鼠标经过时数值变化的回调 | Function(value: number) | |
|
||||
| onKeyDown | 按键回调 | Function(event) | |
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| allowClear | 是否允许再次点击后清除 | boolean | true |
|
||||
| allowHalf | 是否允许半选 | boolean | false |
|
||||
| autoFocus | 自动获取焦点 | boolean | false |
|
||||
| character | 自定义字符 | ReactNode | [<StarFilled /\>](https://ant.design/components/icon-cn/) |
|
||||
| className | 自定义样式类名 | string | |
|
||||
| count | star 总数 | number | 5 |
|
||||
| defaultValue | 默认值 | number | 0 |
|
||||
| disabled | 只读，无法进行交互 | boolean | false |
|
||||
| style | 自定义样式对象 | CSSProperties | |
|
||||
| tooltips | 自定义每项的提示信息 | string\[] | |
|
||||
| value | 当前数，受控值 | number | |
|
||||
| onBlur | 失去焦点时的回调 | Function() | |
|
||||
| onChange | 选择时的回调 | Function(value: number) | |
|
||||
| onFocus | 获取焦点时的回调 | Function() | |
|
||||
| onHoverChange | 鼠标经过时数值变化的回调 | Function(value: number) | |
|
||||
| onKeyDown | 按键回调 | Function(event) | |
|
||||
|
||||
## 方法
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ Select component to select value from options.
|
||||
| dropdownClassName | className of dropdown menu | string | - | |
|
||||
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. `false` will disable virtual scroll | boolean \| number | true | |
|
||||
| dropdownRender | Customize dropdown content | (menuNode: ReactNode, props) => ReactNode | - | |
|
||||
| dropdownStyle | style of dropdown menu | object | - | |
|
||||
| dropdownStyle | style of dropdown menu | CSSProperties | - | |
|
||||
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true | |
|
||||
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [Example](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |
|
||||
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: ReactNode}` | boolean | false | |
|
||||
|
||||
@ -33,7 +33,7 @@ title: Select
|
||||
| dropdownClassName | 下拉菜单的 className 属性 | string | - | |
|
||||
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`。`false` 时会关闭虚拟滚动 | boolean \| number | true | |
|
||||
| dropdownRender | 自定义下拉框内容 | (menuNode: ReactNode, props) => ReactNode | - | |
|
||||
| dropdownStyle | 下拉菜单的 style 属性 | object | - | |
|
||||
| dropdownStyle | 下拉菜单的 style 属性 | CSSProperties | - | |
|
||||
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true | |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | Function(triggerNode) | () => document.body | |
|
||||
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: ReactNode}` 的格式 | boolean | false | |
|
||||
|
||||
@ -25,7 +25,7 @@ Display statistic number.
|
||||
| suffix | suffix node of value | string \| ReactNode | - | |
|
||||
| title | Display title | string \| ReactNode | - | |
|
||||
| value | Display value | string \| number | - | |
|
||||
| valueStyle | Set value css style | style | - | |
|
||||
| valueStyle | Set value css style | CSSProperties | - | |
|
||||
|
||||
#### Statistic.Countdown
|
||||
|
||||
@ -37,4 +37,4 @@ Display statistic number.
|
||||
| suffix | suffix node of value | string \| ReactNode | - | |
|
||||
| title | Display title | string \| ReactNode | - | |
|
||||
| value | Set target countdown time | number \| moment | - | |
|
||||
| valueStyle | Set value css style | style | - | |
|
||||
| valueStyle | Set value css style | CSSProperties | - | |
|
||||
|
||||
@ -26,7 +26,7 @@ title: Statistic
|
||||
| suffix | 设置数值的后缀 | string \| ReactNode | - | |
|
||||
| title | 数值的标题 | string \| ReactNode | - | |
|
||||
| value | 数值内容 | string \| number | - | |
|
||||
| valueStyle | 设置数值的样式 | style | - | |
|
||||
| valueStyle | 设置数值的样式 | CSSProperties | - | |
|
||||
|
||||
#### Statistic.Countdown
|
||||
|
||||
@ -38,4 +38,4 @@ title: Statistic
|
||||
| suffix | 设置数值的后缀 | string \| ReactNode | - | |
|
||||
| title | 数值的标题 | string \| ReactNode | - | |
|
||||
| value | 数值内容 | number \| moment | - | |
|
||||
| valueStyle | 设置数值的样式 | style | - | |
|
||||
| valueStyle | 设置数值的样式 | CSSProperties | - | |
|
||||
|
||||
@ -73,7 +73,7 @@ class App extends React.Component {
|
||||
</Button>
|
||||
)}
|
||||
{current > 0 && (
|
||||
<Button style={{ margin: 8 }} onClick={() => this.prev()}>
|
||||
<Button style={{ margin: '0 8px' }} onClick={() => this.prev()}>
|
||||
Previous
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@ -37,6 +37,12 @@ describe('Table.pagination', () => {
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('not crash when pageSize is undefined', () => {
|
||||
expect(() => {
|
||||
mount(createTable({ pagination: { pageSIze: undefined } }));
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', () => {
|
||||
const wrapper = mount(createTable({ pagination: { pageSize: 3, hideOnSinglePage: true } }));
|
||||
expect(wrapper.find('.ant-pagination')).toHaveLength(1);
|
||||
|
||||
@ -2146,9 +2146,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
title="Pagination"
|
||||
title="Pagination Top"
|
||||
>
|
||||
Pagination
|
||||
Pagination Top
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
@ -2172,14 +2172,52 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
<input
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
value="top"
|
||||
value="topLeft"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-button-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Top
|
||||
TopLeft
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-button-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio-button"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
value="topCenter"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-button-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
TopCenter
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-button-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio-button"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
value="topRight"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-button-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
TopRight
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
@ -2192,14 +2230,63 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
checked=""
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
value="bottom"
|
||||
value="none"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-button-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Bottom
|
||||
None
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
title="Pagination Bottom"
|
||||
>
|
||||
Pagination Bottom
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-button-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio-button"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
value="bottomLeft"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-button-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
BottomLeft
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
@ -2211,14 +2298,34 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
<input
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
value="both"
|
||||
value="bottomCenter"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-button-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Both
|
||||
BottomCenter
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
|
||||
>
|
||||
<span
|
||||
class="ant-radio-button ant-radio-button-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
value="bottomRight"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-button-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
BottomRight
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
|
||||
@ -90,6 +90,8 @@ class Demo extends React.Component {
|
||||
scroll: undefined,
|
||||
hasData: true,
|
||||
tableLayout: undefined,
|
||||
top: 'none',
|
||||
bottom: 'bottomRight',
|
||||
};
|
||||
|
||||
handleToggle = prop => enable => {
|
||||
@ -140,13 +142,6 @@ class Demo extends React.Component {
|
||||
this.setState({ hasData });
|
||||
};
|
||||
|
||||
handlePaginationChange = e => {
|
||||
const { value } = e.target;
|
||||
this.setState({
|
||||
pagination: value === 'none' ? false : { position: value },
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { xScroll, yScroll, ...state } = this.state;
|
||||
|
||||
@ -221,20 +216,36 @@ class Demo extends React.Component {
|
||||
<Radio.Button value="fixed">Fixed</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="Pagination">
|
||||
<Form.Item label="Pagination Top">
|
||||
<Radio.Group
|
||||
value={state.pagination ? state.pagination.position : 'none'}
|
||||
onChange={this.handlePaginationChange}
|
||||
value={this.state.top}
|
||||
onChange={e => {
|
||||
this.setState({ top: e.target.value });
|
||||
}}
|
||||
>
|
||||
<Radio.Button value="top">Top</Radio.Button>
|
||||
<Radio.Button value="bottom">Bottom</Radio.Button>
|
||||
<Radio.Button value="both">Both</Radio.Button>
|
||||
<Radio.Button value="topLeft">TopLeft</Radio.Button>
|
||||
<Radio.Button value="topCenter">TopCenter</Radio.Button>
|
||||
<Radio.Button value="topRight">TopRight</Radio.Button>
|
||||
<Radio.Button value="none">None</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="Pagination Bottom">
|
||||
<Radio.Group
|
||||
value={this.state.bottom}
|
||||
onChange={e => {
|
||||
this.setState({ bottom: e.target.value });
|
||||
}}
|
||||
>
|
||||
<Radio.Button value="bottomLeft">BottomLeft</Radio.Button>
|
||||
<Radio.Button value="bottomCenter">BottomCenter</Radio.Button>
|
||||
<Radio.Button value="bottomRight">BottomRight</Radio.Button>
|
||||
<Radio.Button value="none">None</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Table
|
||||
{...this.state}
|
||||
pagination={{ position: [this.state.top, this.state.bottom] }}
|
||||
columns={tableColumns}
|
||||
dataSource={state.hasData ? data : null}
|
||||
scroll={scroll}
|
||||
|
||||
@ -11,6 +11,7 @@ import { ColumnType, ColumnFilterItem, Key, TableLocale, GetPopupContainer } fro
|
||||
import FilterDropdownMenuWrapper from './FilterWrapper';
|
||||
import { FilterState } from '.';
|
||||
import useSyncState from '../useSyncState';
|
||||
import { ConfigContext } from '../../../config-provider/context';
|
||||
|
||||
const { SubMenu, Item: MenuItem } = Menu;
|
||||
|
||||
@ -230,6 +231,8 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
|
||||
filterIcon = <FilterFilled />;
|
||||
}
|
||||
|
||||
const { direction } = React.useContext(ConfigContext);
|
||||
|
||||
return (
|
||||
<div className={classNames(`${prefixCls}-column`)}>
|
||||
<span className={`${prefixCls}-column-title`}>{children}</span>
|
||||
@ -248,7 +251,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
|
||||
visible={mergedVisible}
|
||||
onVisibleChange={onVisibleChange}
|
||||
getPopupContainer={getPopupContainer}
|
||||
placement="bottomRight"
|
||||
placement={direction === 'rtl' ? 'bottomLeft' : 'bottomRight'}
|
||||
>
|
||||
<span
|
||||
role="button"
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { useState } from 'react';
|
||||
import { PaginationProps, PaginationConfig } from '../../pagination';
|
||||
import { PaginationProps } from '../../pagination';
|
||||
import { TablePaginationConfig } from '../interface';
|
||||
|
||||
export const DEFAULT_PAGE_SIZE = 10;
|
||||
|
||||
export function getPaginationParam(
|
||||
pagination: PaginationConfig | boolean | undefined,
|
||||
mergedPagination: PaginationConfig,
|
||||
pagination: TablePaginationConfig | boolean | undefined,
|
||||
mergedPagination: TablePaginationConfig,
|
||||
) {
|
||||
const param: any = {
|
||||
current: mergedPagination.current,
|
||||
@ -25,6 +25,23 @@ export function getPaginationParam(
|
||||
return param;
|
||||
}
|
||||
|
||||
function extendsObject<T extends Object>(...list: T[]) {
|
||||
const result: T = {} as T;
|
||||
|
||||
list.forEach(obj => {
|
||||
if (obj) {
|
||||
Object.keys(obj).forEach(key => {
|
||||
const val = (obj as any)[key];
|
||||
if (val !== undefined) {
|
||||
(result as any)[key] = val;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
export default function usePagination(
|
||||
total: number,
|
||||
pagination: TablePaginationConfig | false | undefined,
|
||||
@ -42,11 +59,13 @@ export default function usePagination(
|
||||
});
|
||||
|
||||
// ============ Basic Pagination Config ============
|
||||
const mergedPagination = {
|
||||
...innerPagination,
|
||||
...paginationObj,
|
||||
total: paginationTotal > 0 ? paginationTotal : total,
|
||||
};
|
||||
const mergedPagination = extendsObject<Partial<TablePaginationConfig>>(
|
||||
innerPagination,
|
||||
paginationObj,
|
||||
{
|
||||
total: paginationTotal > 0 ? paginationTotal : total,
|
||||
},
|
||||
);
|
||||
|
||||
if (!paginationTotal) {
|
||||
// Reset `current` if data length changed. Only reset when paginationObj do not have total
|
||||
|
||||
@ -63,7 +63,7 @@ const columns = [
|
||||
| bordered | Whether to show all table borders | boolean | `false` |
|
||||
| columns | Columns of table | [ColumnProps](#Column)\[] | - |
|
||||
| components | Override default table elements | [TableComponents](https://git.io/fANxz) | - |
|
||||
| dataSource | Data record array to be displayed | any\[] | - |
|
||||
| dataSource | Data record array to be displayed | object\[] | - |
|
||||
| expandable | Config expandable content | [expandable](#expandable) | - |
|
||||
| footer | Table footer renderer | Function(currentPageData) | - |
|
||||
| loading | Loading status of table | boolean\|[object](/components/spin/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | `false` |
|
||||
|
||||
@ -68,7 +68,7 @@ const columns = [
|
||||
| bordered | 是否展示外边框和列边框 | boolean | false |
|
||||
| columns | 表格列的配置描述，具体项见下表 | [ColumnProps](#Column)\[] | - |
|
||||
| components | 覆盖默认的 table 元素 | [TableComponents](https://git.io/fANxz) | - |
|
||||
| dataSource | 数据数组 | any\[] | - |
|
||||
| dataSource | 数据数组 | object\[] | - |
|
||||
| expandable | 配置展开属性 | [expandable](#expandable) | - |
|
||||
| footer | 表格尾部 | Function(currentPageData) | - |
|
||||
| loading | 页面是否加载中 | boolean\|[object](/components/spin/#API) ([更多](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false |
|
||||
|
||||
@ -5,7 +5,7 @@ import {
|
||||
ExpandableConfig,
|
||||
} from 'rc-table/lib/interface';
|
||||
import { CheckboxProps } from '../checkbox';
|
||||
import { PaginationConfig } from '../pagination';
|
||||
import { PaginationProps } from '../pagination';
|
||||
import { Breakpoint } from '../_util/responsiveObserve';
|
||||
import { INTERNAL_SELECTION_ITEM } from './hooks/useSelection';
|
||||
|
||||
@ -165,6 +165,14 @@ export interface SorterResult<RecordType> {
|
||||
|
||||
export type GetPopupContainer = (triggerNode: HTMLElement) => HTMLElement;
|
||||
|
||||
export interface TablePaginationConfig extends PaginationConfig {
|
||||
// position?: 'top' | 'bottom' | 'both';
|
||||
type TablePaginationPosition =
|
||||
| 'topLeft'
|
||||
| 'topCenter'
|
||||
| 'topRight'
|
||||
| 'bottomLeft'
|
||||
| 'bottomCenter'
|
||||
| 'bottomRight';
|
||||
|
||||
export interface TablePaginationConfig extends PaginationProps {
|
||||
position?: TablePaginationPosition[];
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@table-prefix-cls: ~'@{ant-prefix}-table';
|
||||
@table-wrapepr-cls: ~'@{table-prefix-cls}-wrapper';
|
||||
@table-wrapepr-rtl-cls: ~'@{table-prefix-cls}-wrapper-rtl';
|
||||
|
||||
.@{table-prefix-cls}-wrapper {
|
||||
@ -51,10 +52,29 @@
|
||||
}
|
||||
|
||||
// ========================== Pagination ==========================
|
||||
&-pagination.@{ant-prefix}-pagination {
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
&-pagination {
|
||||
.@{table-wrapepr-cls}.@{table-wrapepr-rtl-cls} & {
|
||||
float: left;
|
||||
}
|
||||
|
||||
&-left {
|
||||
.@{table-wrapepr-cls}.@{table-wrapepr-rtl-cls} & {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
.@{table-wrapepr-cls}.@{table-wrapepr-rtl-cls} & {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&-center {
|
||||
.@{table-wrapepr-cls}.@{table-wrapepr-rtl-cls} & {
|
||||
float: initial;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ================================================================
|
||||
@ -106,8 +126,7 @@
|
||||
&-extra {
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
transform: translate(-100%, -50%);
|
||||
left: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -130,5 +149,23 @@
|
||||
margin-left: @padding-xs;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&-collapsed::before {
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&-collapsed::after {
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -202,23 +202,23 @@ exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tag/demo/checkable.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<span
|
||||
class="ant-tag ant-tag-checkable ant-tag-checkable-checked"
|
||||
class="ant-tag ant-tag-checkable"
|
||||
>
|
||||
Tag1
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-tag ant-tag-checkable ant-tag-checkable-checked"
|
||||
class="ant-tag ant-tag-checkable"
|
||||
>
|
||||
Tag2
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-tag ant-tag-checkable ant-tag-checkable-checked"
|
||||
class="ant-tag ant-tag-checkable"
|
||||
>
|
||||
Tag3
|
||||
</span>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
|
||||
@ -457,33 +457,33 @@ exports[`renders ./components/tag/demo/controlled.md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tag/demo/hot-tags.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<span
|
||||
style="margin-right:8px"
|
||||
>
|
||||
Categories:
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-tag ant-tag-checkable"
|
||||
>
|
||||
Movies
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-tag ant-tag-checkable"
|
||||
class="ant-tag ant-tag-checkable ant-tag-checkable-checked"
|
||||
>
|
||||
Books
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-tag ant-tag-checkable"
|
||||
>
|
||||
Music
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-tag ant-tag-checkable"
|
||||
>
|
||||
Sports
|
||||
</span>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tag/demo/icon.md correctly 1`] = `
|
||||
|
||||
@ -22,26 +22,12 @@ import { Tag } from 'antd';
|
||||
|
||||
const { CheckableTag } = Tag;
|
||||
|
||||
class MyTag extends React.Component {
|
||||
state = { checked: true };
|
||||
|
||||
handleChange = checked => {
|
||||
this.setState({ checked });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<CheckableTag {...this.props} checked={this.state.checked} onChange={this.handleChange} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<MyTag>Tag1</MyTag>
|
||||
<MyTag>Tag2</MyTag>
|
||||
<MyTag>Tag3</MyTag>
|
||||
</div>,
|
||||
<>
|
||||
<CheckableTag>Tag1</CheckableTag>
|
||||
<CheckableTag>Tag2</CheckableTag>
|
||||
<CheckableTag>Tag3</CheckableTag>
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -18,11 +18,11 @@ import { Tag } from 'antd';
|
||||
|
||||
const { CheckableTag } = Tag;
|
||||
|
||||
const tagsFromServer = ['Movies', 'Books', 'Music', 'Sports'];
|
||||
const tagsData = ['Movies', 'Books', 'Music', 'Sports'];
|
||||
|
||||
class HotTags extends React.Component {
|
||||
state = {
|
||||
selectedTags: [],
|
||||
selectedTags: ['Books'],
|
||||
};
|
||||
|
||||
handleChange(tag, checked) {
|
||||
@ -35,9 +35,9 @@ class HotTags extends React.Component {
|
||||
render() {
|
||||
const { selectedTags } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<span style={{ marginRight: 8 }}>Categories:</span>
|
||||
{tagsFromServer.map(tag => (
|
||||
{tagsData.map(tag => (
|
||||
<CheckableTag
|
||||
key={tag}
|
||||
checked={selectedTags.indexOf(tag) > -1}
|
||||
@ -46,7 +46,7 @@ class HotTags extends React.Component {
|
||||
{tag}
|
||||
</CheckableTag>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
|
||||
const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
|
||||
const PresetStatusColorRegex = new RegExp(`^(${PresetStatusColorTypes.join('|')})$`);
|
||||
|
||||
interface CompoundedComponent
|
||||
export interface TagType
|
||||
extends React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>> {
|
||||
CheckableTag: typeof CheckableTag;
|
||||
}
|
||||
@ -126,7 +126,7 @@ const InternalTag: React.ForwardRefRenderFunction<unknown, TagProps> = (props, r
|
||||
);
|
||||
};
|
||||
|
||||
const Tag = React.forwardRef<unknown, TagProps>(InternalTag) as CompoundedComponent;
|
||||
const Tag = React.forwardRef<unknown, TagProps>(InternalTag) as TagType;
|
||||
|
||||
Tag.displayName = 'Tag';
|
||||
|
||||
|
||||
@ -64,6 +64,7 @@
|
||||
&-checkable {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
cursor: pointer;
|
||||
&:not(&-checked):hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
@ -18,6 +18,7 @@ By clicking the input box, you can select a time from a popup panel.
|
||||
|
||||
```jsx
|
||||
import moment from 'moment';
|
||||
|
||||
<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />;
|
||||
```
|
||||
|
||||
@ -42,7 +43,7 @@ import moment from 'moment';
|
||||
| open | whether to popup panel | boolean | false | |
|
||||
| placeholder | display when there's no value | string | "Select a time" | |
|
||||
| popupClassName | className of panel | string | - | |
|
||||
| popupStyle | style of panel | object | - | |
|
||||
| popupStyle | style of panel | CSSProperties | - | |
|
||||
| secondStep | interval between seconds in picker | number | 1 | |
|
||||
| suffixIcon | The custom suffix icon | ReactNode | - | |
|
||||
| clearIcon | The custom clear icon | ReactNode | - | |
|
||||
|
||||
@ -33,7 +33,7 @@ One or more elements can be selected from either column, one click on the proper
|
||||
| selectedKeys | A set of keys of selected items. | string\[] | \[] | |
|
||||
| showSearch | If included, a search box is shown on each column. | boolean | false | |
|
||||
| showSelectAll | Show select all checkbox on the header | boolean | true | |
|
||||
| style | A custom CSS style used for rendering wrapper element. | object | | |
|
||||
| style | A custom CSS style used for rendering wrapper element. | CSSProperties | | |
|
||||
| targetKeys | A set of keys of elements that are listed on the right column. | string\[] | \[] | |
|
||||
| titles | A set of titles that are sorted from left to right. | ReactNode\[] | - | |
|
||||
| selectAllLabels | A set of customized labels for select all checkboxs on the header | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)[] | | |
|
||||
|
||||
@ -35,7 +35,7 @@ title: Transfer
|
||||
| selectedKeys | 设置哪些项应该被选中 | string\[] | \[] | |
|
||||
| showSearch | 是否显示搜索框 | boolean | false | |
|
||||
| showSelectAll | 是否展示全选勾选框 | boolean | true | |
|
||||
| style | 容器的自定义样式 | object | | |
|
||||
| style | 容器的自定义样式 | CSSProperties | | |
|
||||
| targetKeys | 显示在右侧框数据的 key 集合 | string\[] | \[] | |
|
||||
| titles | 标题集合，顺序从左至右 | ReactNode\[] | \['', ''] | |
|
||||
| selectAllLabels | 自定义顶部多选框标题的集合 | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)[] | | |
|
||||
|
||||
@ -182,6 +182,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-empty-image {
|
||||
max-height: @transfer-header-height / 2 - 22;
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
|
||||
@ -23,7 +23,7 @@ Tree selection control.
|
||||
| disabled | Disabled or not | boolean | false | |
|
||||
| dropdownClassName | className of dropdown menu | string | - | |
|
||||
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. `false` will disable virtual scroll | boolean \| number | true | |
|
||||
| dropdownStyle | To set the style of the dropdown menu | object | - | |
|
||||
| dropdownStyle | To set the style of the dropdown menu | CSSProperties | - | |
|
||||
| filterTreeNode | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default. | boolean\|Function(inputValue: string, treeNode: TreeNode) (should return boolean) | Function | |
|
||||
| getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body | |
|
||||
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{value: string, label: ReactNode, halfChecked: string[]}` | boolean | false | |
|
||||
|
||||
@ -97,7 +97,7 @@ Follow [Use in create-react-app](/docs/react/use-with-create-react-app).
|
||||
Another approach to customize theme is creating a `less` file within variables to override `antd.less`.
|
||||
|
||||
```css
|
||||
@import '~antd/es/style/themes/default.less';
|
||||
@import '~antd/lib/style/themes/default.less';
|
||||
@import '~antd/dist/antd.less'; // Import Ant Design styles by less entry
|
||||
@import 'your-theme-file.less'; // variables to override above
|
||||
```
|
||||
@ -117,7 +117,7 @@ It's possible to configure webpack to load an alternate less file:
|
||||
```ts
|
||||
new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/myStylesReplacement.less') )
|
||||
|
||||
#antd { @import '~antd/es/style/core/index.less'; @import '~antd/es/style/themes/default.less'; }
|
||||
#antd { @import '~antd/lib/style/core/index.less'; @import '~antd/lib/style/themes/default.less'; }
|
||||
```
|
||||
|
||||
Where the src/myStylesReplacement.less file loads the same files as the index.less file, but loads them within the scope of a top-level selector : the result is that all of the "global" styles are being applied with the #antd scope.
|
||||
@ -210,6 +210,7 @@ module.exports = {
|
||||
}],
|
||||
}],
|
||||
};
|
||||
```
|
||||
|
||||
## Related Articles
|
||||
|
||||
@ -218,4 +219,4 @@ module.exports = {
|
||||
- [Theming Ant Design with Sass and Webpack](https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7)
|
||||
- [Using Sass/Scss with React App (create-react-app)](https://medium.com/@mzohaib.qc/using-sass-scss-with-react-app-create-react-app-d03072083ef8)
|
||||
- [Dynamic Theming in Browser using Ant Design](https://medium.com/@mzohaib.qc/ant-design-dynamic-runtime-theme-1f9a1a030ba0)
|
||||
```
|
||||
|
||||
|
||||
@ -97,7 +97,7 @@ module.exports = {
|
||||
另外一种方式是建立一个单独的 `less` 变量文件，引入这个文件覆盖 `antd.less` 里的变量。
|
||||
|
||||
```css
|
||||
@import '~antd/es/style/themes/default.less';
|
||||
@import '~antd/lib/style/themes/default.less';
|
||||
@import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件
|
||||
@import 'your-theme-file.less'; // 用于覆盖上面定义的变量
|
||||
```
|
||||
|
||||
@ -32,6 +32,7 @@ This document will help you upgrade from antd `3.x` version to antd `4.x` versio
|
||||
|
||||
- The minimum supported version of IE is IE 11.
|
||||
- The minimum supported version of React is React 16.9, and some components have started to refactor using hooks.
|
||||
- Internal using `useMemo` for performance, do not use mutable data as props.
|
||||
|
||||
#### Remove deprecated API
|
||||
|
||||
|
||||
@ -32,6 +32,7 @@ title: 从 v3 到 v4
|
||||
|
||||
- IE 最低支持版本为 IE 11。
|
||||
- React 最低支持版本为 React 16.9，部分组件开始使用 hooks 进行重构。
|
||||
- 重构通过 `useMemo` 进行性能优化，请勿使用 mutable data 作为参数。
|
||||
|
||||
#### 移除废弃的 API
|
||||
|
||||
|
||||
@ -59,7 +59,9 @@ We provide Less and JavaScript usage for developers.
|
||||
- **Less**
|
||||
|
||||
```less
|
||||
@import '~antd/es/style/themes/default.less', .selector {
|
||||
@import '~antd/lib/style/themes/default.less';
|
||||
|
||||
.selector {
|
||||
color: @blue-5;
|
||||
background-color: @gold-2;
|
||||
}
|
||||
|
||||
@ -67,7 +67,9 @@ ReactDOM.render(<ColorPaletteTool />, mountNode);
|
||||
- **Less**
|
||||
|
||||
```less
|
||||
@import '~antd/es/style/themes/default.less', .selector {
|
||||
@import '~antd/lib/style/themes/default.less';
|
||||
|
||||
.selector {
|
||||
color: @blue-5;
|
||||
background-color: @gold-2;
|
||||
}
|
||||
|
||||
@ -96,7 +96,7 @@
|
||||
"ie >= 11"
|
||||
],
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^4.0.0",
|
||||
"@ant-design/icons": "^4.1.0",
|
||||
"@ant-design/react-slick": "~0.25.5",
|
||||
"array-tree-filter": "^2.1.0",
|
||||
"classnames": "~2.2.6",
|
||||
@ -248,7 +248,7 @@
|
||||
"reqwest": "^2.0.5",
|
||||
"rimraf": "^3.0.0",
|
||||
"scrollama": "^2.0.0",
|
||||
"simple-git": "^1.113.0",
|
||||
"simple-git": "^2.0.0",
|
||||
"stylelint": "^13.0.0",
|
||||
"stylelint-config-prettier": "^8.0.0",
|
||||
"stylelint-config-rational-order": "^0.1.2",
|
||||
|
||||
@ -108,10 +108,11 @@
|
||||
background: inherit;
|
||||
transform: scale(0.9);
|
||||
|
||||
.ant-row-rtl & {
|
||||
.ant-row.ant-row-rtl & {
|
||||
right: auto;
|
||||
left: -21px;
|
||||
padding-right: 0;
|
||||
left: -22px;
|
||||
margin-right: 0;
|
||||
padding-right: 8px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -74,6 +74,7 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
|
||||
new BundleAnalyzerPlugin({
|
||||
analyzerMode: 'static',
|
||||
openAnalyzer: false,
|
||||
reportFilename: '../report.html',
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user