mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
github-actions[bot]
GitHub
commit
bac876a14d
99
.github/ISSUE_TEMPLATE/template-1-bug-report.yml
vendored
Normal file
99
.github/ISSUE_TEMPLATE/template-1-bug-report.yml
vendored
Normal file
@ -0,0 +1,99 @@
|
||||
name: 🇨🇳 报告缺陷（beta）
|
||||
description: 使用中文 Bug 报告模板提交一个缺陷，当然你也可以用 https://new-issue.ant.design
|
||||
title: "[Bug] 请替换成合适的标题"
|
||||
labels: ["🐛+Bug"]
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
除了此表单，你也可以使用 [Ant Design Issue Helper](https://new-issue.ant.design/) 来新建 issue。
|
||||
|
||||
Ant Design 的 issue 列表只接受 [Bug 报告](https://github.com/ant-design/ant-design/issues/new?assignees=&labels=%F0%9F%90%9B+Bug&template=template-1-bug-report.yml&title=%5BBug%5D+) 或是 [新功能请求](https://github.com/ant-design/ant-design/issues/new?assignees=&labels=%F0%9F%92%A1%2BFeature%2BRequest&template=template-2-feature-request.yml&title=%5BFeature+Request%5D+) (Feature Request)。这意味着我们不接受用法问题（How to 类问题）。如果你开的 issue 不符合规定，它将会被立刻关闭。[为什么要这么严格？](https://github.com/ant-design/antd-issue-helper/blob/master/src/locales/zh/introModal.md)
|
||||
|
||||
对于使用中遇到的问题，请使用以下资源：
|
||||
|
||||
- 将用法类问题发到 [GitHub 讨论区](https://github.com/ant-design/ant-design/discussions) 而不是 Issue。
|
||||
- 仔细阅读 [使用文档](https://ant.design/docs/react/introduce-cn) 和 [组件文档](https://ant.design/components/overview-cn/)。
|
||||
- 提问前确保你在 [常见问题](https://ant.design/docs/react/faq-cn) 和 [更新日志](https://ant.design/changelog-cn) 中搜索过。
|
||||
- 在 [StackOverflow](https://stackoverflow.com/questions/tagged/antd) (英文) 或是 [SegmentFault](https://segmentfault.com/t/antd)（中文）搜索和提问。
|
||||
|
||||
最后，在开 issue 前，可以先搜索一下以往的旧 issue - 你遇到的问题可能已经有人提了，也可能已经在最新版本中被修正。注意：如果你发现一个已经关闭的旧 issue 在最新版本中仍然存在，请不要在旧 issue 下面留言，而应该用下面的表单开一个新的 issue。
|
||||
|
||||
---
|
||||
- type: input
|
||||
id: reproduce
|
||||
attributes:
|
||||
label: 重现链接
|
||||
description: 请提供一个尽可能精简的 [codesandbox](https://u.ant.design/codesandbox-repro) 或 [GitHub 仓库](https://github.com/ant-design/create-react-app-antd/) 的链接。[什么是最小化重现，为什么这是必需的？](https://github.com/ant-design/antd-issue-helper/blob/master/src/locales/zh/reproModal.md)
|
||||
validations:
|
||||
required: true
|
||||
- type: input
|
||||
id: version
|
||||
attributes:
|
||||
label: antd 版本
|
||||
description: 你正在使用的 antd 版本是多少？（注意不是 package.json 里的版本，而是 node_modules/antd 里实际安装的版本）
|
||||
placeholder: 如 4.16.13
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: reproduce-steps
|
||||
attributes:
|
||||
label: 重现步骤
|
||||
description: 请提供一个傻瓜式的操作步骤，方便我们无脑重现问题。
|
||||
placeholder: |
|
||||
比如：
|
||||
1. 点击重现链接里的主按钮
|
||||
2. 等待五秒钟
|
||||
3. 观察按钮的边框
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: expected
|
||||
attributes:
|
||||
label: 期望的结果是什么？
|
||||
placeholder: 比如：按钮样式正常，边框一直存在
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: reality
|
||||
attributes:
|
||||
label: 实际的结果是什么？
|
||||
placeholder: 比如：按钮样式异常，边框突然丢失
|
||||
validations:
|
||||
required: true
|
||||
- type: dropdown
|
||||
id: browsers
|
||||
attributes:
|
||||
label: 浏览器
|
||||
description: 在哪些浏览器上能重现这个问题？
|
||||
multiple: true
|
||||
options:
|
||||
- Firefox
|
||||
- Chrome
|
||||
- Safari
|
||||
- Edge
|
||||
- Internet Explorer
|
||||
- Others
|
||||
- type: input
|
||||
id: browsers-version
|
||||
attributes:
|
||||
label: 浏览器版本
|
||||
placeholder: 如：版本 95.0.4638.69（正式版本） (x86_64)
|
||||
- type: dropdown
|
||||
id: os
|
||||
attributes:
|
||||
label: 操作系统
|
||||
description: 使用的操作系统是？
|
||||
options:
|
||||
- Windows
|
||||
- MacOS
|
||||
- iOS
|
||||
- Android
|
||||
- Others
|
||||
- type: input
|
||||
id: hidden-tag
|
||||
attributes:
|
||||
label: 其他
|
||||
description: 不要删除预填内容，否则 issue 会被自动关闭。
|
||||
value: <!-- generated by ant-design-issue-helper. DO NOT REMOVE -->
|
||||
|
||||
50
.github/ISSUE_TEMPLATE/template-2-feature-request.yml
vendored
Normal file
50
.github/ISSUE_TEMPLATE/template-2-feature-request.yml
vendored
Normal file
@ -0,0 +1,50 @@
|
||||
name: 🇨🇳 功能需求（beta）
|
||||
description: 使用中文 Bug 报告模板提交一个功能需求，当然你也可以用 https://new-issue.ant.design
|
||||
title: "[Feature Request] 请替换成合适的标题"
|
||||
labels: ["💡+Feature+Request"]
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
除了此表单，你也可以使用 [Ant Design Issue Helper](https://new-issue.ant.design/) 来新建 issue。
|
||||
|
||||
Ant Design 的 issue 列表只接受 [Bug 报告](https://github.com/ant-design/ant-design/issues/new?assignees=&labels=%F0%9F%90%9B+Bug&template=template-1-bug-report.yml&title=%5BBug%5D+) 或是 [新功能请求](https://github.com/ant-design/ant-design/issues/new?assignees=&labels=%F0%9F%92%A1%2BFeature%2BRequest&template=template-2-feature-request.yml&title=%5BFeature+Request%5D+) (Feature Request)。这意味着我们不接受用法问题（How to 类问题）。如果你开的 issue 不符合规定，它将会被立刻关闭。[为什么要这么严格？](https://github.com/ant-design/antd-issue-helper/blob/master/src/locales/zh/introModal.md)
|
||||
|
||||
对于使用中遇到的问题，请使用以下资源：
|
||||
|
||||
- 将用法类问题发到 [GitHub 讨论区](https://github.com/ant-design/ant-design/discussions) 而不是 Issue。
|
||||
- 仔细阅读 [使用文档](https://ant.design/docs/react/introduce-cn) 和 [组件文档](https://ant.design/components/overview-cn/)。
|
||||
- 提问前确保你在 [常见问题](https://ant.design/docs/react/faq-cn) 和 [更新日志](https://ant.design/changelog-cn) 中搜索过。
|
||||
- 在 [StackOverflow](https://stackoverflow.com/questions/tagged/antd) (英文) 或是 [SegmentFault](https://segmentfault.com/t/antd)（中文）搜索和提问。
|
||||
|
||||
最后，在开 issue 前，可以先搜索一下以往的旧 issue - 你遇到的问题可能已经有人提了，也可能已经在最新版本中被修正。注意：如果你发现一个已经关闭的旧 issue 在最新版本中仍然存在，请不要在旧 issue 下面留言，而应该用下面的表单开一个新的 issue。
|
||||
|
||||
---
|
||||
- type: textarea
|
||||
id: needs
|
||||
attributes:
|
||||
label: 这个功能解决了什么问题？
|
||||
description: |
|
||||
请尽可能详尽地说明这个需求的用例和场景。最重要的是：解释清楚是怎样的用户体验需求催生了这个功能上的需求。
|
||||
Ant Design 的一个重要设计原则是保持 API 的简洁和直接。通常来说，我们只考虑添加在现有的 API 下无法轻松实现的功能。新功能的用例也应当足够常见。
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: api
|
||||
attributes:
|
||||
label: 你期望的 API 是怎样的？
|
||||
description: |
|
||||
描述一下你期望这个新功能的 API 是如何使用的，并提供一些代码示例。请用 Markdown 格式化你的代码片段。
|
||||
如果有新的 UI 界面，最好截图展示你期望的界面是什么样的？
|
||||
placeholder: |
|
||||
```jsx
|
||||
<Drawer extra={<Button />} {...props} />
|
||||
```
|
||||
validations:
|
||||
required: true
|
||||
- type: input
|
||||
id: hidden-tag
|
||||
attributes:
|
||||
label: 其他
|
||||
description: 不要删除预填内容，否则 issue 会被自动关闭。
|
||||
value: <!-- generated by ant-design-issue-helper. DO NOT REMOVE -->
|
||||
@ -15,6 +15,19 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 4.17.0-alpha.10
|
||||
|
||||
`2021-11-7`
|
||||
|
||||
- 🚧 Move part `mixins` related less file to `themes` instead since it requires theme variable. We do not recommend use internal file but please note this if you already use it. [#32763](https://github.com/ant-design/ant-design/pull/32763)
|
||||
- 🐞 Fix the problem that the bottom Drawer component has no animation. [#32761](https://github.com/ant-design/ant-design/pull/32761) [@solitia7125](https://github.com/solitia7125)
|
||||
- 💄 Fix Steps `progressDot` style when it is `vertical`. [#32742](https://github.com/ant-design/ant-design/pull/32742)
|
||||
- 💄 Fix Input set to `disabled` still keep focused style. [#32739](https://github.com/ant-design/ant-design/pull/32739)
|
||||
- 🐞 Fix Typography ellipsis with `rows: 1` doesn't wrap after expanding. [#32735](https://github.com/ant-design/ant-design/pull/32735) [@hydraZty](https://github.com/hydraZty)
|
||||
- 💄 Fix Table `loading` jumpy style when set `sticky`. [#32703](https://github.com/ant-design/ant-design/pull/32703) [@miloudbelaabed](https://github.com/miloudbelaabed)
|
||||
- TypeScript
|
||||
- 🤖 Modify the type of Spin `tip` to ReactNode.. [#32733](https://github.com/ant-design/ant-design/pull/32733) [@tychenjiajun](https://github.com/tychenjiajun)
|
||||
|
||||
## 4.17.0-alpha.9
|
||||
|
||||
`2021-10-31`
|
||||
|
||||
@ -15,6 +15,19 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 4.17.0-alpha.10
|
||||
|
||||
`2021-11-7`
|
||||
|
||||
- 🚧 移动部分 `mixins` less 文件到 `themes` 文件下，因为它们依赖于主题相关变量。我们不推荐直接引用底层 less 文件，但是如果你使用了请注意这部分变更。[#32763](https://github.com/ant-design/ant-design/pull/32763)
|
||||
- 🐞 修复底部 Drawer 组件没有动画的问题。[#32761](https://github.com/ant-design/ant-design/pull/32761) [@solitia7125](https://github.com/solitia7125)
|
||||
- 💄 修复 Steps 垂直 `progressDot` 的对齐样式问题。[#32742](https://github.com/ant-design/ant-design/pull/32742)
|
||||
- 💄 修复 Input 设置 `disabled` 时仍然保留聚焦样式的问题。[#32739](https://github.com/ant-design/ant-design/pull/32739)
|
||||
- 🐞 修复 Typography 在单行折叠时展开后不换行。[#32735](https://github.com/ant-design/ant-design/pull/32735) [@hydraZty](https://github.com/hydraZty)
|
||||
- 💄 修复 Table 设置 `sticky` 的时候 `loading` 样式跳动的问题。[#32703](https://github.com/ant-design/ant-design/pull/32703) [@miloudbelaabed](https://github.com/miloudbelaabed)
|
||||
- TypeScript
|
||||
- 🤖 修改 Spin `tip` 的类型为 ReactNode。[#32733](https://github.com/ant-design/ant-design/pull/32733) [@tychenjiajun](https://github.com/tychenjiajun)
|
||||
|
||||
## 4.17.0-alpha.9
|
||||
|
||||
`2021-10-31`
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('breadcrumb', { skip: ['router.md', 'router-4.md'] });
|
||||
demoTest('breadcrumb', { skip: ['react-router.md'] });
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { imageDemoTest } from '../../../tests/shared/imageTest';
|
||||
|
||||
describe('Breadcrumb image', () => {
|
||||
imageDemoTest('breadcrumb', { skip: ['router-4.md'] });
|
||||
imageDemoTest('breadcrumb', { skip: ['react-router.md'] });
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Route, Switch, Link, withRouter, MemoryRouter } from 'react-router-dom';
|
||||
import { Route, Routes, Link, useLocation, useNavigate, MemoryRouter } from 'react-router-dom';
|
||||
import { mount } from 'enzyme';
|
||||
import Breadcrumb from '../index';
|
||||
|
||||
@ -32,12 +32,10 @@ describe('react router', () => {
|
||||
});
|
||||
|
||||
// https://github.com/airbnb/enzyme/issues/875
|
||||
it('react router 4', () => {
|
||||
if (process.env.REACT === '15') {
|
||||
return;
|
||||
}
|
||||
const Home = withRouter(props => {
|
||||
const { location, history } = props;
|
||||
it('react router 6', () => {
|
||||
const Home = () => {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const pathSnippets = location.pathname.split('/').filter(i => i);
|
||||
const extraBreadcrumbItems = pathSnippets.map((_, index) => {
|
||||
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
|
||||
@ -55,17 +53,17 @@ describe('react router', () => {
|
||||
return (
|
||||
<div className="demo">
|
||||
<div className="demo-nav">
|
||||
<a onClick={() => history.push('/')}>Home</a>
|
||||
<a onClick={() => history.push('/apps')}>Application List</a>
|
||||
<a onClick={() => navigate('/')}>Home</a>
|
||||
<a onClick={() => navigate('/apps')}>Application List</a>
|
||||
</div>
|
||||
<Switch>
|
||||
<Routes>
|
||||
<Route path="/apps" component={Apps} />
|
||||
<Route render={() => <span>Home Page</span>} />
|
||||
</Switch>
|
||||
</Routes>
|
||||
<Breadcrumb>{breadcrumbItems}</Breadcrumb>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
const wrapper = mount(
|
||||
<MemoryRouter initialEntries={['/']} initialIndex={0}>
|
||||
<Home />
|
||||
|
||||
@ -3,20 +3,20 @@ order: 3
|
||||
iframe: 200
|
||||
reactRouter: react-router-dom
|
||||
title:
|
||||
zh-CN: 其它路由
|
||||
en-US: Other Router Integration
|
||||
zh-CN: react-router V6
|
||||
en-US: react-router V6
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
和 `react-router@4+`，或其他路由进行结合使用。
|
||||
与 `react-router@6+` 结合使用，生成和路由绑定的面包屑。
|
||||
|
||||
## en-US
|
||||
|
||||
Used together with `react-router@4+` or other router.
|
||||
Used together with `react-router@6+`.
|
||||
|
||||
```jsx
|
||||
import { HashRouter as Router, Route, Switch, Link, withRouter } from 'react-router-dom';
|
||||
import { HashRouter, Route, Routes, Link, useLocation } from 'react-router-dom';
|
||||
import { Breadcrumb, Alert } from 'antd';
|
||||
|
||||
const Apps = () => (
|
||||
@ -37,8 +37,8 @@ const breadcrumbNameMap = {
|
||||
'/apps/1/detail': 'Detail',
|
||||
'/apps/2/detail': 'Detail',
|
||||
};
|
||||
const Home = withRouter(props => {
|
||||
const { location } = props;
|
||||
const Home = props => {
|
||||
const location = useLocation();
|
||||
const pathSnippets = location.pathname.split('/').filter(i => i);
|
||||
const extraBreadcrumbItems = pathSnippets.map((_, index) => {
|
||||
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
|
||||
@ -59,20 +59,20 @@ const Home = withRouter(props => {
|
||||
<Link to="/">Home</Link>
|
||||
<Link to="/apps">Application List</Link>
|
||||
</div>
|
||||
<Switch>
|
||||
<Routes>
|
||||
<Route path="/apps" component={Apps} />
|
||||
<Route render={() => <span>Home Page</span>} />
|
||||
</Switch>
|
||||
</Routes>
|
||||
<Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
|
||||
<Breadcrumb>{breadcrumbItems}</Breadcrumb>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<Router>
|
||||
<HashRouter>
|
||||
<Home />
|
||||
</Router>,
|
||||
</HashRouter>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
order: 5.1
|
||||
version: 4.17.0
|
||||
title:
|
||||
zh-CN: 多选
|
||||
en-US: Multiple
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
order: 5
|
||||
version: 4.17.0
|
||||
title:
|
||||
zh-CN: 全局样式
|
||||
en-US: Global Theme
|
||||
|
||||
@ -64,18 +64,18 @@ The following APIs are shared by DatePicker, RangePicker.
|
||||
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | |
|
||||
| locale | Localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
|
||||
| mode | The picker panel mode（ [Cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) ) | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
|
||||
| nextIcon | The custom next icon | ReactNode | - | |
|
||||
| nextIcon | The custom next icon | ReactNode | - | 4.17.0 |
|
||||
| open | The open state of picker | boolean | - | |
|
||||
| panelRender | Customize panel render | (panelNode) => ReactNode | - | 4.5.0 |
|
||||
| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 |
|
||||
| placeholder | The placeholder of date input | string \| \[string,string] | - | |
|
||||
| popupStyle | To customize the style of the popup calendar | CSSProperties | {} | |
|
||||
| prevIcon | The custom prev icon | ReactNode | - | |
|
||||
| prevIcon | The custom prev icon | ReactNode | - | 4.17.0 |
|
||||
| size | To 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` | - | |
|
||||
| style | To customize the style of the input box | CSSProperties | {} | |
|
||||
| suffixIcon | The custom suffix icon | ReactNode | - | |
|
||||
| superNextIcon | The custom super next icon | ReactNode | - | |
|
||||
| superPrevIcon | The custom super prev icon | ReactNode | - | |
|
||||
| superNextIcon | The custom super next icon | ReactNode | - | 4.17.0 |
|
||||
| superPrevIcon | The custom super prev icon | ReactNode | - | 4.17.0 |
|
||||
| onOpenChange | 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) | - | |
|
||||
|
||||
|
||||
@ -65,18 +65,18 @@ import locale from 'antd/lib/locale/zh_CN';
|
||||
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
||||
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
|
||||
| mode | 日期面板的状态（[设置后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)） | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
|
||||
| nextIcon | 自定义下一个图标 | ReactNode | - | |
|
||||
| nextIcon | 自定义下一个图标 | ReactNode | - | 4.17.0 |
|
||||
| open | 控制弹层是否展开 | boolean | - | |
|
||||
| panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 |
|
||||
| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 |
|
||||
| placeholder | 输入框提示文字 | string \| \[string, string] | - | |
|
||||
| popupStyle | 额外的弹出日历样式 | CSSProperties | {} | |
|
||||
| prevIcon | 自定义上一个图标 | ReactNode | - | |
|
||||
| prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 |
|
||||
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - | |
|
||||
| style | 自定义输入框样式 | CSSProperties | {} | |
|
||||
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
||||
| superNextIcon | 自定义 `<<` 切换图标 | ReactNode | - | |
|
||||
| superPrevIcon | 自定义 `>>` 切换图标 | ReactNode | - | |
|
||||
| superNextIcon | 自定义 `<<` 切换图标 | ReactNode | - | 4.17.0 |
|
||||
| superPrevIcon | 自定义 `>>` 切换图标 | ReactNode | - | 4.17.0 |
|
||||
| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - | |
|
||||
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | |
|
||||
|
||||
|
||||
@ -87,6 +87,7 @@
|
||||
}
|
||||
&.@{drawer-prefix-cls}-open {
|
||||
height: 100%;
|
||||
transition: transform @animation-duration-slow @drawer-animation-ease;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -8275,9 +8275,6 @@ exports[`renders ./components/form/demo/warning-only.md correctly 1`] = `
|
||||
autocomplete="off"
|
||||
class="ant-form ant-form-vertical"
|
||||
>
|
||||
<div
|
||||
style="overflow:hidden"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
@ -8312,7 +8309,6 @@ exports[`renders ./components/form/demo/warning-only.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
order: 3.2
|
||||
version: 4.17.0
|
||||
title:
|
||||
zh-CN: 非阻塞校验
|
||||
en-US: No block rule
|
||||
@ -42,19 +43,13 @@ const Demo = () => {
|
||||
onFinishFailed={onFinishFailed}
|
||||
autoComplete="off"
|
||||
>
|
||||
<div style={{ overflow: 'hidden' }}>
|
||||
<Form.Item
|
||||
name="url"
|
||||
label="URL"
|
||||
rules={[
|
||||
{ required: true },
|
||||
{ type: 'url', warningOnly: true },
|
||||
{ type: 'string', min: 6 },
|
||||
]}
|
||||
rules={[{ required: true }, { type: 'url', warningOnly: true }, { type: 'string', min: 6 }]}
|
||||
>
|
||||
<Input placeholder="input placeholder" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" htmlType="submit">
|
||||
|
||||
@ -9,5 +9,7 @@
|
||||
}
|
||||
.@{form-item-prefix-cls}-control {
|
||||
flex: 1 1 0;
|
||||
// https://github.com/ant-design/ant-design/issues/32777
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -193,6 +193,9 @@ class Input extends React.Component<InputProps, InputState> {
|
||||
if (nextProps.value !== undefined || prevValue !== nextProps.value) {
|
||||
newState.value = nextProps.value;
|
||||
}
|
||||
if (nextProps.disabled) {
|
||||
newState.focused = false;
|
||||
}
|
||||
return newState;
|
||||
}
|
||||
|
||||
|
||||
@ -1453,6 +1453,60 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="ant-input-group ant-input-group-compact"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
style="width:calc(100% - 200px)"
|
||||
type="text"
|
||||
value="https://ant.design"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Sumbit
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="ant-input-group ant-input-group-compact"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
style="width:calc(100% - 200px)"
|
||||
type="text"
|
||||
value="git@github.com:ant-design/ant-design.git"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
class="anticon anticon-copy"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="copy"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="ant-input-group ant-input-group-compact"
|
||||
>
|
||||
@ -1523,123 +1577,6 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="ant-input-group ant-input-group-compact"
|
||||
>
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
style="width:40%"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value="0571"
|
||||
/>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
style="width:40%"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value="26888888"
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-input-clear-icon"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="ant-input-group ant-input-group-compact"
|
||||
>
|
||||
|
||||
@ -55,4 +55,13 @@ describe('Input.Focus', () => {
|
||||
expect(focus).toHaveBeenCalled();
|
||||
expect(setSelectionRange).toHaveBeenCalledWith(expect.anything(), 0, 5);
|
||||
});
|
||||
|
||||
it('disabled should reset focus', () => {
|
||||
const wrapper = mount(<Input allowClear />);
|
||||
wrapper.find('input').simulate('focus');
|
||||
expect(wrapper.exists('.ant-input-affix-wrapper-focused')).toBeTruthy();
|
||||
|
||||
wrapper.setProps({ disabled: true });
|
||||
expect(wrapper.exists('.ant-input-affix-wrapper-focused')).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -18,7 +18,19 @@ Input.Group example.
|
||||
Note: You don't need `Col` to control the width in the `compact` mode.
|
||||
|
||||
```jsx
|
||||
import { Input, Col, Row, Select, InputNumber, DatePicker, AutoComplete, Cascader } from 'antd';
|
||||
import {
|
||||
Input,
|
||||
Button,
|
||||
Col,
|
||||
Row,
|
||||
Select,
|
||||
InputNumber,
|
||||
DatePicker,
|
||||
AutoComplete,
|
||||
Cascader,
|
||||
Tooltip,
|
||||
} from 'antd';
|
||||
import { CopyOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
@ -75,6 +87,18 @@ const App = () => (
|
||||
<Input style={{ width: '30%' }} defaultValue="26888888" />
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Input style={{ width: 'calc(100% - 200px)' }} defaultValue="https://ant.design" />
|
||||
<Button type="primary">Sumbit</Button>
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Input style={{ width: 'calc(100% - 200px)' }} defaultValue="git@github.com:ant-design/ant-design.git" />
|
||||
<Tooltip title="copy git url">
|
||||
<Button icon={<CopyOutlined />} />
|
||||
</Tooltip>
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Select defaultValue="Zhejiang">
|
||||
<Option value="Zhejiang">Zhejiang</Option>
|
||||
@ -83,11 +107,6 @@ const App = () => (
|
||||
<Input style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Input.Search style={{ width: '40%' }} defaultValue="0571" />
|
||||
<Input.Search allowClear style={{ width: '40%' }} defaultValue="26888888" />
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Input.Search allowClear style={{ width: '40%' }} defaultValue="0571" />
|
||||
<Input.Search allowClear style={{ width: '40%' }} defaultValue="26888888" />
|
||||
|
||||
@ -64,16 +64,16 @@ notification.config({
|
||||
});
|
||||
```
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 |
|
||||
| closeIcon | Custom close icon | ReactNode | - |
|
||||
| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |
|
||||
| getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |
|
||||
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
|
||||
| rtl | Whether to enable RTL mode | boolean | false |
|
||||
| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 |
|
||||
| maxCount | Max Notification show, drop oldest if exceed limit | number | - | |
|
||||
| bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 | |
|
||||
| closeIcon | Custom close icon | ReactNode | - | |
|
||||
| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 | |
|
||||
| getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body | |
|
||||
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | |
|
||||
| rtl | Whether to enable RTL mode | boolean | false | |
|
||||
| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 | |
|
||||
| maxCount | Max Notification show, drop oldest if exceed limit | number | - | 4.17.0 |
|
||||
|
||||
## FAQ
|
||||
|
||||
|
||||
@ -65,16 +65,16 @@ notification.config({
|
||||
});
|
||||
```
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 |
|
||||
| closeIcon | 自定义关闭图标 | ReactNode | - |
|
||||
| duration | 默认自动关闭延时，单位秒 | number | 4.5 |
|
||||
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |
|
||||
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
|
||||
| rtl | 是否开启 RTL 模式 | boolean | false |
|
||||
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |
|
||||
| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | |
|
||||
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
||||
| closeIcon | 自定义关闭图标 | ReactNode | - | |
|
||||
| duration | 默认自动关闭延时，单位秒 | number | 4.5 | |
|
||||
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
|
||||
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | |
|
||||
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
||||
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
||||
| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
||||
|
||||
## FAQ
|
||||
|
||||
|
||||
@ -73,6 +73,11 @@ describe('PageHeader', () => {
|
||||
expect(wrapper.find('.ant-page-header-back')).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('pageHeader support breadcrumbRender return false', () => {
|
||||
const wrapper = mount(<PageHeader title="Page Title" breadcrumbRender={() => false} />);
|
||||
expect(wrapper.find('.ant-page-header-back')).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('pageHeader do not has title', () => {
|
||||
const routes = [
|
||||
{
|
||||
|
||||
@ -159,7 +159,7 @@ const PageHeader: React.FC<PageHeaderProps> = props => {
|
||||
const isBreadcrumbComponent = breadcrumb && 'props' in breadcrumb;
|
||||
// support breadcrumbRender function
|
||||
const breadcrumbRenderDomFromProps =
|
||||
breadcrumbRender?.(props, defaultBreadcrumbDom) || defaultBreadcrumbDom;
|
||||
breadcrumbRender?.(props, defaultBreadcrumbDom) ?? defaultBreadcrumbDom;
|
||||
|
||||
const breadcrumbDom = isBreadcrumbComponent ? breadcrumb : breadcrumbRenderDomFromProps;
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
order: 7
|
||||
version: 4.17.0
|
||||
title:
|
||||
zh-CN: 基于 Promise 的异步关闭
|
||||
en-US: Asynchronously close on Promise
|
||||
|
||||
@ -51,12 +51,12 @@ Provide a placeholder while you wait for content to load, or to visualise conten
|
||||
|
||||
### SkeletonButtonProps
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| active | Show animation effect | boolean | false |
|
||||
| block | Option to fit button width to its parent width | boolean | false |
|
||||
| shape | Set the shape of button | `circle` \| `round` \| `default` | - |
|
||||
| size | Set the size of button | `large` \| `small` \| `default` | - |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| active | Show animation effect | boolean | false | |
|
||||
| block | Option to fit button width to its parent width | boolean | false | 4.17.0 |
|
||||
| shape | Set the shape of button | `circle` \| `round` \| `default` | - | |
|
||||
| size | Set the size of button | `large` \| `small` \| `default` | - | |
|
||||
|
||||
### SkeletonInputProps
|
||||
|
||||
|
||||
@ -52,12 +52,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
|
||||
|
||||
### SkeletonButtonProps
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ------------------------------ | -------------------------------- | ------ |
|
||||
| active | 是否展示动画效果 | boolean | false |
|
||||
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false |
|
||||
| shape | 指定按钮的形状 | `circle` \| `round` \| `default` | - |
|
||||
| size | 设置按钮的大小 | `large` \| `small` \| `default` | - |
|
||||
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------ | ------------------------------ | -------------------------------- | ------ | ------ |
|
||||
| active | 是否展示动画效果 | boolean | false | |
|
||||
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
|
||||
| shape | 指定按钮的形状 | `circle` \| `round` \| `default` | - | |
|
||||
| size | 设置按钮的大小 | `large` \| `small` \| `default` | - | |
|
||||
|
||||
### SkeletonInputProps
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ When part of the page is waiting for asynchronous data or during a rendering pro
|
||||
| indicator | React node of the spinning indicator | ReactNode | - |
|
||||
| size | The size of Spin, options: `small`, `default` and `large` | string | `default` |
|
||||
| spinning | Whether Spin is spinning | boolean | true |
|
||||
| tip | Customize description content when Spin has children | string | - |
|
||||
| tip | Customize description content when Spin has children | ReactNode | - |
|
||||
| wrapperClassName | The className of wrapper when Spin has children | string | - |
|
||||
|
||||
### Static Method
|
||||
|
||||
@ -16,7 +16,7 @@ export interface SpinProps {
|
||||
spinning?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
size?: SpinSize;
|
||||
tip?: string;
|
||||
tip?: React.ReactNode;
|
||||
delay?: number;
|
||||
wrapperClassName?: string;
|
||||
indicator?: SpinIndicator;
|
||||
|
||||
@ -20,7 +20,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/LBcJqCPRv/Spin.svg
|
||||
| indicator | 加载指示符 | ReactNode | - |
|
||||
| size | 组件大小，可选值为 `small` `default` `large` | string | `default` |
|
||||
| spinning | 是否为加载中状态 | boolean | true |
|
||||
| tip | 当作为包裹元素时，可以自定义描述文案 | string | - |
|
||||
| tip | 当作为包裹元素时，可以自定义描述文案 | ReactNode | - |
|
||||
| wrapperClassName | 包装器的类属性 | string | - |
|
||||
|
||||
### 静态方法
|
||||
|
||||
@ -99,7 +99,6 @@
|
||||
|
||||
&-blur {
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
opacity: 0.5;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
|
||||
@ -72,13 +72,13 @@
|
||||
|
||||
.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
|
||||
.@{steps-prefix-cls}-item-icon {
|
||||
margin-top: 8px;
|
||||
margin-top: 13px;
|
||||
margin-left: 0;
|
||||
background: none;
|
||||
}
|
||||
// https://github.com/ant-design/ant-design/issues/18354
|
||||
.@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
|
||||
top: 2px;
|
||||
top: 6.5px;
|
||||
left: -9px;
|
||||
margin: 0;
|
||||
padding: 22px 0 4px;
|
||||
@ -93,6 +93,7 @@
|
||||
.@{steps-prefix-cls}-item-container
|
||||
.@{steps-prefix-cls}-item-icon
|
||||
.@{steps-prefix-cls}-icon-dot {
|
||||
left: -2px;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../mixins/motion';
|
||||
// @import '../mixins/motion'; This has moved to theme/xxx inside.
|
||||
@import 'motion/fade';
|
||||
@import 'motion/move';
|
||||
@import 'motion/other';
|
||||
|
||||
@ -4,10 +4,12 @@
|
||||
@import 'compatibility';
|
||||
@import 'clearfix';
|
||||
@import 'iconfont';
|
||||
@import 'motion';
|
||||
@import 'reset';
|
||||
@import 'operation-unit';
|
||||
@import 'typography';
|
||||
@import 'customize';
|
||||
@import 'box';
|
||||
@import 'modal-mask';
|
||||
|
||||
// Note: These mixins require theme variables. Let's move to theme file instead:
|
||||
// @import 'motion';
|
||||
// @import 'reset';
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
@import '../color/colors';
|
||||
@import './mixins/index';
|
||||
|
||||
@theme: default;
|
||||
|
||||
|
||||
2
components/style/themes/mixins/index.less
Normal file
2
components/style/themes/mixins/index.less
Normal file
@ -0,0 +1,2 @@
|
||||
@import 'motion';
|
||||
@import 'reset';
|
||||
@ -1,5 +1,3 @@
|
||||
@import '../themes/index';
|
||||
|
||||
.motion-common(@duration: @animation-duration-base) {
|
||||
animation-duration: @duration;
|
||||
animation-fill-mode: both;
|
||||
@ -1,5 +1,3 @@
|
||||
@import '../themes/index';
|
||||
|
||||
.reset-component() {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -1,5 +1,6 @@
|
||||
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
||||
@import '../color/colors';
|
||||
@import './mixins/index';
|
||||
|
||||
@theme: variable;
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
order: 6.1
|
||||
version: 4.17.0
|
||||
title:
|
||||
en-US: Filter in Tree
|
||||
zh-CN: 树型筛选菜单
|
||||
|
||||
@ -123,7 +123,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
||||
| defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - | |
|
||||
| editable | Whether column can be edited | boolean | false | |
|
||||
| ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 |
|
||||
| filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - | |
|
||||
| filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => ReactNode | - | |
|
||||
| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | |
|
||||
| filtered | Whether the `dataSource` is filtered | boolean | false | |
|
||||
| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | |
|
||||
|
||||
@ -130,7 +130,7 @@ const columns = [
|
||||
| defaultSortOrder | 默认排序顺序 | `ascend` \| `descend` | - | |
|
||||
| editable | 是否可编辑 | boolean | false | |
|
||||
| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
|
||||
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - | |
|
||||
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \| (props: [FilterDropdownProps](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => ReactNode | - | |
|
||||
| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - | |
|
||||
| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false | |
|
||||
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - | |
|
||||
|
||||
@ -88,9 +88,11 @@ class EditableTagGroup extends React.Component {
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
duration: 100,
|
||||
onComplete: e => {
|
||||
e.target.style = '';
|
||||
},
|
||||
}}
|
||||
onEnd={e => {
|
||||
if (e.type === 'appear' || e.type === 'enter') {
|
||||
e.target.style = 'display: inline-block';
|
||||
}
|
||||
}}
|
||||
leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
|
||||
appear={false}
|
||||
|
||||
@ -292,7 +292,8 @@
|
||||
background: @component-background;
|
||||
|
||||
&-line-icon {
|
||||
vertical-align: -0.225em;
|
||||
// https://github.com/ant-design/ant-design/issues/32813
|
||||
vertical-align: -0.15em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -544,7 +544,7 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
|
||||
[`${prefixCls}-${type}`]: type,
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
[`${prefixCls}-ellipsis`]: rows,
|
||||
[`${prefixCls}-single-line`]: rows === 1,
|
||||
[`${prefixCls}-single-line`]: rows === 1 && !isEllipsis,
|
||||
[`${prefixCls}-ellipsis-single-line`]: cssTextOverflow,
|
||||
[`${prefixCls}-ellipsis-multiple-line`]: cssLineClamp,
|
||||
},
|
||||
|
||||
@ -72,3 +72,9 @@ Since prefix modified. Origin `antd.variable.css` should also be replaced:
|
||||
```bash
|
||||
lessc --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css
|
||||
```
|
||||
|
||||
### Related changes
|
||||
|
||||
In order to implement CSS Variable and maintain original usage compatibility, we added `@root-entry-name: xxx;` entry injection to the `dist/antd.xxx.less` file to support less dynamic loading of the corresponding less file. Under normal circumstances, you do not need to pay attention to this change. However, if your project directly references the less file in the `lib|es` directory. You need to configure `@root-entry-name: default;` (or `@root-entry-name: variable;`) at the entry of less so that less can find the correct entry.
|
||||
|
||||
In addition, we migrated `@import'motion'` and `@import'reset'` in `lib|es/style/minxins/index.less` to `lib|es/style/themes/xxx.less` In, because these two files rely on theme-related variables. If you use the relevant internal method, please adjust it yourself. Of course, we still recommend using the `antd.less` files in the `dist` directory directly instead of calling internal files, because they are often affected by refactoring.
|
||||
|
||||
@ -3,11 +3,12 @@ order: 7.1
|
||||
title: 动态主题（实验性）
|
||||
---
|
||||
|
||||
除了 [less 定制主题外](/docs/react/customize-theme) 外，我们还提供了 CSS Variable 版本以支持动态切换主题能力。你可以在 [ConfigProvider](/components/config-provider/#components-config-provider-demo-theme) 进行体验。
|
||||
除了 [less 定制主题](/docs/react/customize-theme) 外，我们还提供了 CSS Variable 版本以支持动态切换主题能力。你可以在 [ConfigProvider](/components/config-provider/#components-config-provider-demo-theme) 进行体验。
|
||||
|
||||
## 注意事项
|
||||
|
||||
该功能通过动态修改 CSS Variable 实现，因而在 IE 中页面将无法正常展示。请先确认你的用户环境是否需要支持 IE。
|
||||
- 该功能通过动态修改 CSS Variable 实现，因而在 IE 中页面将无法正常展示。请先确认你的用户环境是否需要支持 IE。
|
||||
- 该功能在 `antd@4.17.0-alpha.0` 版本起支持。
|
||||
|
||||
## 如何使用
|
||||
|
||||
@ -72,3 +73,9 @@ ConfigProvider.config({
|
||||
```bash
|
||||
lessc --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css
|
||||
```
|
||||
|
||||
### 相关变更
|
||||
|
||||
为了实现 CSS Variable 并保持原始用法兼容性，我们于 `dist/antd.xxx.less` 文件中添加了 `@root-entry-name: xxx;` 入口注入以支持 less 动态加载对应的 less 文件。一般情况下，你不需要关注该变化。但是，如果你的项目中直接引用了 `lib|es` 目录下的 less 文件。你需要在 less 入口处配置 `@root-entry-name: default;` （或者 `@root-entry-name: variable;`）以使 less 可以找到正确的入口。
|
||||
|
||||
此外，我们将 `lib|es/style/minxins/index.less` 中的 `@import 'motion'` 和 `@import 'reset'` 迁移至了 `lib|es/style/themes/xxx.less` 中，因为这两个文件依赖了主题相关变量。如果你使用了相关内部方法，请自行调整。当然，我们还是建议直接使用 `dist` 目录下的 `antd.less` 文件而非调用内部文件，因为它们经常会受重构影响。
|
||||
|
||||
12
package.json
12
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "4.17.0-alpha.9",
|
||||
"version": "4.17.0-alpha.10",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"title": "Ant Design",
|
||||
"keywords": [
|
||||
@ -152,7 +152,7 @@
|
||||
"scroll-into-view-if-needed": "^2.2.25"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ant-design/bisheng-plugin": "^2.3.0",
|
||||
"@ant-design/bisheng-plugin": "^3.0.0",
|
||||
"@ant-design/hitu": "^0.0.0-alpha.13",
|
||||
"@ant-design/tools": "^14.0.0-alpha.3",
|
||||
"@docsearch/css": "^3.0.0-alpha.39",
|
||||
@ -161,7 +161,7 @@
|
||||
"@stackblitz/sdk": "^1.3.0",
|
||||
"@types/classnames": "^2.2.8",
|
||||
"@types/enzyme": "^3.10.5",
|
||||
"@types/gtag.js": "^0.0.7",
|
||||
"@types/gtag.js": "^0.0.8",
|
||||
"@types/jest": "^27.0.0",
|
||||
"@types/jest-environment-puppeteer": "^4.4.0",
|
||||
"@types/jest-image-snapshot": "^4.1.0",
|
||||
@ -209,7 +209,7 @@
|
||||
"eslint-plugin-markdown": "^2.0.0",
|
||||
"eslint-plugin-react": "^7.20.6",
|
||||
"eslint-plugin-react-hooks": "^4.1.2",
|
||||
"eslint-plugin-unicorn": "^37.0.1",
|
||||
"eslint-plugin-unicorn": "^38.0.0",
|
||||
"fetch-jsonp": "^1.1.3",
|
||||
"fs-extra": "^10.0.0",
|
||||
"full-icu": "^1.3.0",
|
||||
@ -238,7 +238,7 @@
|
||||
"pretty-quick": "^3.0.0",
|
||||
"querystring": "^0.2.0",
|
||||
"rc-footer": "^0.6.6",
|
||||
"rc-tween-one": "^2.4.1",
|
||||
"rc-tween-one": "^3.0.3",
|
||||
"rc-virtual-list": "^3.2.4",
|
||||
"react": "^17.0.1",
|
||||
"react-color": "^2.17.3",
|
||||
@ -254,7 +254,7 @@
|
||||
"react-infinite-scroll-component": "^6.1.0",
|
||||
"react-intl": "^5.20.4",
|
||||
"react-resizable": "^3.0.1",
|
||||
"react-router-dom": "^5.0.1",
|
||||
"react-router-dom": "^6.0.2",
|
||||
"react-sortable-hoc": "^2.0.0",
|
||||
"react-sticky": "^6.0.3",
|
||||
"react-test-renderer": "^17.0.1",
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
&-card {
|
||||
cursor: pointer;
|
||||
transition: all @animation-duration-base @ease-in-out;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: @shadow-1-down;
|
||||
|
||||
@ -5,7 +5,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import classNames from 'classnames';
|
||||
import LZString from 'lz-string';
|
||||
import { Tooltip, Alert } from 'antd';
|
||||
import { Tooltip, Alert, Badge } from 'antd';
|
||||
import { SnippetsOutlined, CheckOutlined, ThunderboltOutlined } from '@ant-design/icons';
|
||||
import stackblitzSdk from '@stackblitz/sdk';
|
||||
import CodePreview from './CodePreview';
|
||||
@ -209,6 +209,7 @@ class Demo extends React.Component {
|
||||
title: `${localizedTitle} - antd@${dependencies.antd}`,
|
||||
html,
|
||||
js: sourceCode
|
||||
.replace(/import\s+(?:React,\s+)?{(\s+[^}]*\s+)}\s+from\s+'react'/, `const { $1 } = React;`)
|
||||
.replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'antd';/, 'const { $1 } = antd;')
|
||||
.replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'@ant-design\/icons';/, 'const { $1 } = icons;')
|
||||
.replace("import moment from 'moment';", '')
|
||||
@ -315,7 +316,8 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
|
||||
'index.html': html,
|
||||
},
|
||||
};
|
||||
return (
|
||||
|
||||
let codeBox = (
|
||||
<section className={codeBoxClass} id={meta.id}>
|
||||
<section className="code-box-demo">
|
||||
<ErrorBoundary>{this.liveDemo}</ErrorBoundary>
|
||||
@ -457,6 +459,12 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
|
||||
</section>
|
||||
</section>
|
||||
);
|
||||
|
||||
if (meta.version) {
|
||||
codeBox = <Badge.Ribbon text={meta.version}>{codeBox}</Badge.Ribbon>;
|
||||
}
|
||||
|
||||
return codeBox;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user