mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
github-actions[bot]
GitHub
commit
c83c5876fc
@ -7,7 +7,9 @@ version: 2.1
|
||||
jobs:
|
||||
test-argos-ci:
|
||||
docker:
|
||||
- image: cimg/node:16.20-browsers
|
||||
- image: cimg/node:18.17-browsers
|
||||
environment:
|
||||
NODE_OPTIONS: --openssl-legacy-provider
|
||||
steps:
|
||||
- checkout
|
||||
- run:
|
||||
|
||||
@ -63,6 +63,10 @@ export default () => {
|
||||
html {
|
||||
scroll-padding-top: ${headerHeight + margin}px;
|
||||
}
|
||||
|
||||
[data-prefers-color='dark'] {
|
||||
color-scheme: dark;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -11,7 +11,13 @@ import { HappyProvider } from '@ant-design/happy-work-theme';
|
||||
import { getSandpackCssText } from '@codesandbox/sandpack-react';
|
||||
import { theme as antdTheme, App } from 'antd';
|
||||
import type { DirectionType } from 'antd/es/config-provider';
|
||||
import { createSearchParams, useOutlet, useSearchParams, useServerInsertedHTML } from 'dumi';
|
||||
import {
|
||||
createSearchParams,
|
||||
useOutlet,
|
||||
useSearchParams,
|
||||
useServerInsertedHTML,
|
||||
usePrefersColor,
|
||||
} from 'dumi';
|
||||
|
||||
import { DarkContext } from '../../hooks/useDark';
|
||||
import useLayoutState from '../../hooks/useLayoutState';
|
||||
@ -47,6 +53,7 @@ const GlobalLayout: React.FC = () => {
|
||||
const outlet = useOutlet();
|
||||
const { pathname } = useLocation();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [, , setPrefersColor] = usePrefersColor();
|
||||
const [{ theme = [], direction, isMobile }, setSiteState] = useLayoutState<SiteState>({
|
||||
isMobile: false,
|
||||
direction: 'ltr',
|
||||
@ -70,10 +77,12 @@ const GlobalLayout: React.FC = () => {
|
||||
}
|
||||
}
|
||||
if (key === 'theme') {
|
||||
const _theme = value.filter((t) => t !== 'light');
|
||||
nextSearchParams = createSearchParams({
|
||||
...nextSearchParams,
|
||||
theme: value.filter((t) => t !== 'light'),
|
||||
theme: _theme,
|
||||
});
|
||||
setPrefersColor(_theme.includes('dark') ? 'dark' : 'light');
|
||||
}
|
||||
});
|
||||
|
||||
@ -95,6 +104,8 @@ const GlobalLayout: React.FC = () => {
|
||||
setSiteState({ theme: _theme, direction: _direction === 'rtl' ? 'rtl' : 'ltr' });
|
||||
// Handle isMobile
|
||||
updateMobileMode();
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
|
||||
setPrefersColor(_theme.includes('dark') ? 'dark' : 'light');
|
||||
|
||||
window.addEventListener('resize', updateMobileMode);
|
||||
return () => {
|
||||
|
||||
@ -16,12 +16,35 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 5.8.6
|
||||
|
||||
`2023-09-02`
|
||||
|
||||
- 🛠 Optimize some styles size in document.head by extracting unused styles.
|
||||
- 🛠 Notification and Message only generate styles when displayed. [#44488](https://github.com/ant-design/ant-design/pull/44488)
|
||||
- 🛠 Extract Tag status & preset color style which will only generate by needed. [#44512](https://github.com/ant-design/ant-design/pull/44512)
|
||||
- 🛠 Extract Button compact style, now only the corresponding style will be generated when Space.Compact is used. [#44475](https://github.com/ant-design/ant-design/pull/44475)
|
||||
- 📦 Remove `lodash/camelCase` from `@ant-design/icons` dependencies to reduce bundle size. [ant-design-icons#595](https://github.com/ant-design/ant-design-icons/pull/595)
|
||||
- Form
|
||||
- 🐞 Fix Form.Item children not hidden when `wrapperCol.span` is `0`. [#44485](https://github.com/ant-design/ant-design/pull/44485) [#44472](https://github.com/ant-design/ant-design/pull/44472) [@crazyair](https://github.com/crazyair)
|
||||
- 🐞 Fix Form `wrapperCol` to be 24 not working when `labelCol` is set to 24. [#44541](https://github.com/ant-design/ant-design/pull/44541)
|
||||
- 🐞 Fix Watermark that would crash if `content` is empty string. [#44501](https://github.com/ant-design/ant-design/pull/44501)
|
||||
- 🐞 Fix ColorPicker popup still working when `disabled` is `true`. [#44466](https://github.com/ant-design/ant-design/pull/44466) [@RedJue](https://github.com/RedJue)
|
||||
- 🐞 Fix Transfer trigger `onSelectChange` twice sometimes when click checkbox. [#44471](https://github.com/ant-design/ant-design/pull/44471) [@kovsu](https://github.com/kovsu)
|
||||
- 🐞 Fix Typography scrollbar flush problem when enable `ellipsis`. [#43058](https://github.com/ant-design/ant-design/pull/43058) [@bbb169](https://github.com/bbb169)
|
||||
- Slider
|
||||
- 🐞 Fix Slider draggable track unpredictable behavior. [#44503](https://github.com/ant-design/ant-design/pull/44503) [@BoyYangzai](https://github.com/BoyYangzai) [@yoyo837](https://github.com/yoyo837)
|
||||
- ⌨️ Improve Slider a11y behavior by adding `aria-orientation`. [react-component/slider#859](https://github.com/react-component/slider/pull/859) [@5im0n](https://github.com/5im0n)
|
||||
- 🐞 Fix Steps `type="nav"` last item did not hide arrow properly. [#44582](https://github.com/ant-design/ant-design/pull/44582) [@ohhoney1](https://github.com/ohhoney1)
|
||||
- TypeScript
|
||||
- 🤖 Fix Upload file `status` definition to remove unused success status. [#44468](https://github.com/ant-design/ant-design/pull/44468)
|
||||
|
||||
## 5.8.5
|
||||
|
||||
`2023-08-28`
|
||||
|
||||
- 🛠 Refactor Badge style logic and take Ribbon style out to reduce SSR inline style size. [#44451](https://github.com/ant-design/ant-design/pull/44451)
|
||||
- 🐞 Fix the issue of abnormal icon styling when using `@ant-design/icons`` within App. [#41208](https://github.com/ant-design/ant-design/pull/41208) [@Wxh16144](https://github.com/Wxh16144)
|
||||
- 🐞 Fix the issue of abnormal icon styling when using `@ant-design/icons` within App. [#41208](https://github.com/ant-design/ant-design/pull/41208) [@Wxh16144](https://github.com/Wxh16144)
|
||||
- 🐞 Fix the issue of vertical dragging malfunction in Carousel. [#44460](https://github.com/ant-design/ant-design/pull/44460) [@RedJue](https://github.com/RedJue)
|
||||
- 🐞 Fix Tour panel use wrong design token. [#44428](https://github.com/ant-design/ant-design/pull/44428)
|
||||
- 🐞 Fix Form `wrapperCol` with responsive `xs` config not working. [#44388](https://github.com/ant-design/ant-design/pull/44388)
|
||||
@ -104,7 +127,7 @@ tag: vVERSION
|
||||
- 🆕 Descriptions support `items` prop. [#43483](https://github.com/ant-design/ant-design/pull/43483) [@RedJue](https://github.com/RedJue)
|
||||
- 🆕 ColorPicker support `disabledAlpha` prop. [#43355](https://github.com/ant-design/ant-design/pull/43355) [@RedJue](https://github.com/RedJue)
|
||||
- 🆕 Avatar.Group support `shape` prop. [#43817](https://github.com/ant-design/ant-design/pull/43817) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- 🆕 AutoComplete/Cascader/DatePicker/Input.Textarea/TimePicker/TreeSelect support `allowClear` prop to customize clear button。[#43582](https://github.com/ant-design/ant-design/discussions/43582) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 🆕 AutoComplete/Cascader/DatePicker/Input.Textarea/TimePicker/TreeSelect support `allowClear` prop to customize clear button. [#43582](https://github.com/ant-design/ant-design/discussions/43582) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 🆕 DatePicker.RangePicker `presets` support callback functions. [#43476](https://github.com/ant-design/ant-design/pull/43476) [@Wxh16144](https://github.com/Wxh16144)
|
||||
- 🆕 Added the `preview={{ movable: Boolean }}` prop to the Image component to support dragging and dropping into folders. [#43823](https://github.com/ant-design/ant-design/pull/43823) [@linxianxi](https://github.com/linxianxi)
|
||||
- 🆕 Slider `tooltip` support `autoAdjustOverflow` prop. [#43788](https://github.com/ant-design/ant-design/pull/43788)
|
||||
@ -196,7 +219,7 @@ tag: vVERSION
|
||||
- 🐞 MISC: Fixed an issue where some browsers had scroll bars that were not redrawn when style feature support was detected. [#43358](https://github.com/ant-design/ant-design/pull/43358) [@LeeeeeeM](https://github.com/LeeeeeeM)
|
||||
- 🐞 Fixed an issue where the Tab component of Card would not be displayed at all when tabList is empty. [#43416](https://github.com/ant-design/ant-design/pull/43416) [@linxianxi](https://github.com/linxianxi)
|
||||
- 🐞 Fixed an issue where the `form.validateMessages` configuration would be lost when using ConfigProvider nestedly. [#43239](https://github.com/ant-design/ant-design/pull/43239) [@Wxh16144](https://github.com/Wxh16144)
|
||||
- 🐞 Fixed an issue where the ripple effect of Tag click would sometimes be offset from the Tag element .[#43402](https://github.com/ant-design/ant-design/pull/43402)
|
||||
- 🐞 Fixed an issue where the ripple effect of Tag click would sometimes be offset from the Tag element. [#43402](https://github.com/ant-design/ant-design/pull/43402)
|
||||
- 🐞 Fixed an issue where clicking "now" in DatePicker when switching to the year-month panel would not work. [#43367](https://github.com/ant-design/ant-design/pull/43367) [@Yuiai01](https://github.com/Yuiai01)
|
||||
- 🐞 Fixed an issue where the height set for the Input.TextArea component would become invalid when the screen size changed. [#43169](https://github.com/ant-design/ant-design/pull/43169) [@MadCcc](https://github.com/MadCcc)
|
||||
- 💄 In Slider, the `tooltip` should be centered when there is little content. [#43430](https://github.com/ant-design/ant-design/pull/43430) [@Jomorx](https://github.com/Jomorx)
|
||||
@ -656,7 +679,7 @@ tag: vVERSION
|
||||
`2023-02-27`
|
||||
|
||||
- 🐞 Fix for setting `percent` and `success.percent` at the same time for `Progress`, the progress text does not change as `percent` changes. [#40922](https://github.com/ant-design/ant-design/pull/40922)
|
||||
- 🐞 Fixed Image preview icon was misaligned.[#40911](https://github.com/ant-design/ant-design/pull/40911)
|
||||
- 🐞 Fixed Image preview icon was misaligned. [#40911](https://github.com/ant-design/ant-design/pull/40911)
|
||||
- 🐞 Fix ConfigProvider validation message template override Form configure template sometime. [#40533](https://github.com/ant-design/ant-design/pull/40533) [@Wxh16144](https://github.com/Wxh16144)
|
||||
- 🐞 Fixed Confirm Modal `onOk` event could be triggered twice when close. [#40719](https://github.com/ant-design/ant-design/pull/40719) [@Rafael-Martins](https://github.com/Rafael-Martins)
|
||||
- 🛠 Rewrote the `useLocale` method and exposed `localeCode` to the public. [#40884](https://github.com/ant-design/ant-design/pull/40884) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
@ -666,10 +689,10 @@ tag: vVERSION
|
||||
- 🐞 Fixed where Descriptions did not accept `data-_` and `aria-_` attributes. [#40859](https://github.com/ant-design/ant-design/pull/40859) [@goveo](https://github.com/goveo)
|
||||
- 🛠 Changed the Breadcrumb Separator's DOM element from `span` to `li`. [#40867](https://github.com/ant-design/ant-design/pull/40867) [@heiyu4585](https://github.com/heiyu4585)
|
||||
- 🐞 Fix token of `Layout.colorBgHeader` not work when single use Layout.Header directly. [#40933](https://github.com/ant-design/ant-design/pull/40933)
|
||||
- 💄 Changed Design Token the component's focus `outline` to the default `4px`.[#40839](https://github.com/ant-design/ant-design/pull/40839)
|
||||
- 💄 Changed Design Token the component's focus `outline` to the default `4px`. [#40839](https://github.com/ant-design/ant-design/pull/40839)
|
||||
- 🐞 Fixed the Badge color was displayed abnormally. [#40848](https://github.com/ant-design/ant-design/pull/40848) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 🐞 Fixed an issue with the Timeline item's `className`. [#40835](https://github.com/ant-design/ant-design/pull/40835) [@Yuiai01](https://github.com/Yuiai01)
|
||||
- 💄 Fixed the interaction style of the Rate component in the disabled state.[#40836](https://github.com/ant-design/ant-design/pull/40836) [@Yuiai01](https://github.com/Yuiai01)
|
||||
- 💄 Fixed the interaction style of the Rate component in the disabled state. [#40836](https://github.com/ant-design/ant-design/pull/40836) [@Yuiai01](https://github.com/Yuiai01)
|
||||
- 🇮🇷 Added Iranian localization. [#40895](https://github.com/ant-design/ant-design/pull/40895) [@majidsadr](https://github.com/majidsadr)
|
||||
|
||||
## 5.2.2
|
||||
@ -878,8 +901,8 @@ tag: vVERSION
|
||||
|
||||
`2022-12-26`
|
||||
|
||||
- 📦 Remove IE and other legacy browsers from browserslist to reduce bundle size.[#38779](https://github.com/ant-design/ant-design/pull/38779)
|
||||
- ⚡️ Improve Transfer performance when selecting and moving nodes with large data.[#39465](https://github.com/ant-design/ant-design/pull/39465) [@wqs576222103](https://github.com/wqs576222103)
|
||||
- 📦 Remove IE and other legacy browsers from browserslist to reduce bundle size. [#38779](https://github.com/ant-design/ant-design/pull/38779)
|
||||
- ⚡️ Improve Transfer performance when selecting and moving nodes with large data. [#39465](https://github.com/ant-design/ant-design/pull/39465) [@wqs576222103](https://github.com/wqs576222103)
|
||||
- 🐞 Fix Design Token wrong `font-family` of components. [#39806](https://github.com/ant-design/ant-design/pull/39806)
|
||||
- 🐞 Fix Drawer default props not working when `placement` `open` `width` are `undefined`. [#39782](https://github.com/ant-design/ant-design/pull/39782)
|
||||
- 🐞 Fix Menu icon animation when collapse it. [#39800](https://github.com/ant-design/ant-design/pull/39800) [@JarvisArt](https://github.com/JarvisArt)
|
||||
|
||||
@ -16,6 +16,29 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 5.8.6
|
||||
|
||||
`2023-09-02`
|
||||
|
||||
- 🛠 针对 CSSInJS 加载 styles 大小进行了优化。
|
||||
- 🛠 Notification 和 Message 组件只有在展示时才会插入对应样式。[#44488](https://github.com/ant-design/ant-design/pull/44488)
|
||||
- 🛠 剥离 Tag 状态与预设颜色样式，现在只有当使用的使用才会生成它们。[#44512](https://github.com/ant-design/ant-design/pull/44512)
|
||||
- 🛠 剥离 Button 紧凑模式样式，现在只有当使用了 Space.Compact 才会生成对应样式。[#44475](https://github.com/ant-design/ant-design/pull/44475)
|
||||
- 📦 移除 `@ant-design/icons` 依赖 `lodash/camelCase` 以优化 bundle size。[ant-design-icons#595](https://github.com/ant-design/ant-design-icons/pull/595)
|
||||
- Form
|
||||
- 🐞 修复 Form.Item 设置 `wrapperCol.span` 为 `0` 时，子元素不隐藏的问题。[#44485](https://github.com/ant-design/ant-design/pull/44485) [#44472](https://github.com/ant-design/ant-design/pull/44472) [@crazyair](https://github.com/crazyair)
|
||||
- 🐞 修复 Form `labelCol` 设置为 24 时，会使 `wrapperCol` 设置 24 失效的问题。[#44541](https://github.com/ant-design/ant-design/pull/44541)
|
||||
- 🐞 修复 Watermark 组件在 `content` 是空字符串时报错的问题。[#44501](https://github.com/ant-design/ant-design/pull/44501)
|
||||
- 🐞 修复 ColorPicker 禁用时依然能弹出选择窗口的问题。[#44466](https://github.com/ant-design/ant-design/pull/44466) [@RedJue](https://github.com/RedJue)
|
||||
- 🐞 修复 Transfer 点击 Checkbox 时有时会触发两次选择行为的问题。[#44471](https://github.com/ant-design/ant-design/pull/44471) [@kovsu](https://github.com/kovsu)
|
||||
- 🐞 修复 Typography 使用 `ellipsis` 时滚动条闪动的问题。[#43058](https://github.com/ant-design/ant-design/pull/43058) [@bbb169](https://github.com/bbb169)
|
||||
- Slider
|
||||
- 🐞 修复 Slider 滑块可拖拽区域范围异常的问题。[#44503](https://github.com/ant-design/ant-design/pull/44503) [@BoyYangzai](https://github.com/BoyYangzai) [@yoyo837](https://github.com/yoyo837)
|
||||
- ⌨️ 优化 Slider `aria-orientation` 可访问性属性。[react-component/slider#859](https://github.com/react-component/slider/pull/859) [@5im0n](https://github.com/5im0n)
|
||||
- 🐞 修复 Steps `type="nav"` 垂直导航步骤条的最后一项箭头没隐藏的问题。[#44582](https://github.com/ant-design/ant-design/pull/44582) [@ohhoney1](https://github.com/ohhoney1)
|
||||
- TypeScript
|
||||
- 🤖 修复 Upload 文件状态定义，移除未使用过的 `success` 状态。[#44468](https://github.com/ant-design/ant-design/pull/44468)
|
||||
|
||||
## 5.8.5
|
||||
|
||||
`2023-08-28`
|
||||
@ -68,7 +91,7 @@ tag: vVERSION
|
||||
- 🐞 修复 `@ant-design/cssinjs` 版本小于 `1.15.0` 时 Design Token 部分丢失的问题。[#44091](https://github.com/ant-design/ant-design/pull/44091) [@MadCcc](https://github.com/MadCcc)
|
||||
- 💄 修复 Badge `status="processing"` 和 `dot` 配合使用时，波纹样式异常的问题。[#44153](https://github.com/ant-design/ant-design/pull/44153)
|
||||
- 💄 修复 Descriptions 组件自行嵌套时的边框样式问题。[#43454](https://github.com/ant-design/ant-design/pull/43454) [@Yuiai01](https://github.com/Yuiai01)
|
||||
- 💄 修复 Pagination 上下页切换按钮 `transition`` 丢失的问题。[#44030](https://github.com/ant-design/ant-design/pull/44030)
|
||||
- 💄 修复 Pagination 上下页切换按钮 `transition` 丢失的问题。[#44030](https://github.com/ant-design/ant-design/pull/44030)
|
||||
- 💄 修复 Popconfirm 按钮组意外换行的问题。[#44022](https://github.com/ant-design/ant-design/pull/44022) [@MuxinFeng](https://github.com/MuxinFeng)
|
||||
- 💄 优化 Image 组件预览操作图标的样式。[#44141](https://github.com/ant-design/ant-design/pull/44141) [@MadCcc](https://github.com/MadCcc)
|
||||
- 💄 优化 Input 和 InputNumber 在大尺寸下的字体大小。[#44000](https://github.com/ant-design/ant-design/pull/44000) [@MuxinFeng](https://github.com/MuxinFeng)
|
||||
@ -183,13 +206,13 @@ tag: vVERSION
|
||||
- 🆕 ColorPicker 支持 `onChangeComplete`。[#43370](https://github.com/ant-design/ant-design/pull/43370) [@RedJue](https://github.com/RedJue)
|
||||
- 🆕 ColorPicker 支持 `panelRender`。[#43134](https://github.com/ant-design/ant-design/pull/43134) [@RedJue](https://github.com/RedJue)
|
||||
- 🆕 ColorPicker 支持 `size`。[#43116](https://github.com/ant-design/ant-design/pull/43116) [@RedJue](https://github.com/RedJue)
|
||||
- 🆕 Alert、Drawer、Modal、Notifaction、Tag、Tabs 均已支持通过设置 `closeIcon` 为 null 或 false 隐藏关闭按钮。 [#42828](https://github.com/ant-design/ant-design/discussions/42828) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 🆕 Alert、Drawer、Modal、Notifaction、Tag、Tabs 均已支持通过设置 `closeIcon` 为 null 或 false 隐藏关闭按钮。[#42828](https://github.com/ant-design/ant-design/discussions/42828) [@kiner-tang](https://github.com/kiner-tang)
|
||||
- 🆕 Anchor 添加 `replace` 属性。[#43006](https://github.com/ant-design/ant-design/pull/43006) [@ds1371dani](https://github.com/ds1371dani)
|
||||
- 🆕 Image 支持 `imageRender`、`toolbarRender` 属性以支持预览图和工具栏的自定义渲染，还支持了 `onTransform`、`minScale`、`maxScale` 等新属性，Image.PreviewGroup 支持 `items` 属性传入列表数据，并修复了 img 标签的原生属性没有传递给预览图的问题。[#43075](https://github.com/ant-design/ant-design/pull/43075) [@linxianxi](https://github.com/linxianxi)
|
||||
- 🆕 修改 Image 预览图的布局风格，`preview` 属性支持 `closeIcon`，Image.PreviewGroup 支持 `fallback` 属性，修复加载预览资源提前加载的问题。[#43167](https://github.com/ant-design/ant-design/pull/43167) [@linxianxi](https://github.com/linxianxi)
|
||||
- 🛠 InputNumber 使用 rc-input 进行重构。[#43000](https://github.com/ant-design/ant-design/pull/43000) [@MuxinFeng](https://github.com/MuxinFeng)
|
||||
- 🛠 解决 vite、rollup、meteor、microbundle 等构建工具中遇到的循环依赖问题，并增加相关的检测。[#42750](https://github.com/ant-design/ant-design/pull/42750)，感谢 [@jrr997](https://github.com/jrr997)、[@kiner-tang](https://github.com/kiner-tang) 和 [@MuxinFeng](https://github.com/MuxinFeng) 的贡献。
|
||||
- 🐞 移除 Anchor/CollapsePanel/Input.Group 组件中 `className` 属性的默认值（空字符串）。 [#43481](https://github.com/ant-design/ant-design/pull/43481) [@thinkasany](https://github.com/thinkasany)
|
||||
- 🐞 移除 Anchor/CollapsePanel/Input.Group 组件中 `className` 属性的默认值（空字符串）。[#43481](https://github.com/ant-design/ant-design/pull/43481) [@thinkasany](https://github.com/thinkasany)
|
||||
- 🐞 修复 Upload 上传进度条延迟消失且丢失动画效果的问题。[#43471](https://github.com/ant-design/ant-design/pull/43471)
|
||||
- 🐞 为 Menu 中组件 Token `colorItemBgSelected` 添加废弃警告。[#43461](https://github.com/ant-design/ant-design/pull/43461) [@MadCcc](https://github.com/MadCcc)
|
||||
- 🐞 杂项：修复样式特性支持检测时部分浏览器因为未重绘导致出现滚动条的问题。[#43358](https://github.com/ant-design/ant-design/pull/43358) [@LeeeeeeM](https://github.com/LeeeeeeM)
|
||||
@ -482,7 +505,7 @@ tag: vVERSION
|
||||
`2023-04-19`
|
||||
|
||||
- 🐞 修复 FloatButton 警告: findDOMNode is deprecated in StrictMode.。[#41833](https://github.com/ant-design/ant-design/pull/41833) [@fourcels](https://github.com/fourcels)
|
||||
- 🐞 杂项：箭头元素兼容旧版本不支持 `clip-path: path()` 的浏览器。 [#41872](https://github.com/ant-design/ant-design/pull/41872)
|
||||
- 🐞 杂项：箭头元素兼容旧版本不支持 `clip-path: path()` 的浏览器。[#41872](https://github.com/ant-design/ant-design/pull/41872)
|
||||
- 🐞 修复 Layout.Sider 切换主题时存在背景切换延迟的问题。[#41828](https://github.com/ant-design/ant-design/pull/41828)
|
||||
- 🐞 修复 Tour 的 `type="primary"` 时箭头的颜色仍为白色的问题。[#41761](https://github.com/ant-design/ant-design/pull/41761)
|
||||
- 🐞 优化 Form 字段绑定，现在会忽略在 Form.Item 内的注释不再作为子组件进行绑定。[#41771](https://github.com/ant-design/ant-design/pull/41771)
|
||||
@ -810,7 +833,7 @@ tag: vVERSION
|
||||
|
||||
`2023-01-15`
|
||||
|
||||
- 🐞 修复 Checkbox 组件 label 不对齐的问题。 [#40208](https://github.com/ant-design/ant-design/pull/40208)
|
||||
- 🐞 修复 Checkbox 组件 label 不对齐的问题。[#40208](https://github.com/ant-design/ant-design/pull/40208)
|
||||
- 🐞 修复 Button 水波纹效果有时会使得布局抖动的问题。[#40192](https://github.com/ant-design/ant-design/pull/40192)
|
||||
- 🐞 修复 Select 组件会卡住的问题。[#40158](https://github.com/ant-design/ant-design/pull/40158) [@helloqian12138](https://github.com/helloqian12138)
|
||||
- 🐞 修复 Timeline 组件自定义颜色显示错误类名和对齐溢出的问题。[#39394](https://github.com/ant-design/ant-design/pull/39394) [@Wxh16144](https://github.com/Wxh16144)
|
||||
@ -897,7 +920,7 @@ tag: vVERSION
|
||||
- 🐞 修复 Card 只有 `extra` 时标题栏高度不足的问题。[#39646](https://github.com/ant-design/ant-design/pull/39646) [@JarvisArt](https://github.com/JarvisArt)
|
||||
- 🐞 修复 Row 组件 `justify` 和 `align` 属性，动态改变不生效的问题。[#39704](https://github.com/ant-design/ant-design/pull/39704) [@candy4290](https://github.com/candy4290)
|
||||
- 🐞 修复 App 中 `children` 使用相同 key 的警告。[#39695](https://github.com/ant-design/ant-design/pull/39695) [@Kamahl19](https://github.com/Kamahl19)，[#39701](https://github.com/ant-design/ant-design/pull/39701) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- 💄 Image 组件预览交互优化. [#39812](https://github.com/ant-design/ant-design/pull/39812) [@JarvisArt](https://github.com/JarvisArt)
|
||||
- 💄 Image 组件预览交互优化。[#39812](https://github.com/ant-design/ant-design/pull/39812) [@JarvisArt](https://github.com/JarvisArt)
|
||||
- 💄 修复 Table 筛选菜单选中背景色和菜单阴影样式。[#39805](https://github.com/ant-design/ant-design/pull/39805)
|
||||
- TypeScript
|
||||
- 🤖 修复部分 Design Token 缺少类型提示的问题。[#39754](https://github.com/ant-design/ant-design/pull/39754)
|
||||
|
||||
155
README-ar_EG.md
155
README-ar_EG.md
@ -1,155 +0,0 @@
|
||||
<p align="center">
|
||||
<a href="https://ant.design">
|
||||
<img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h1 align="center">Ant Design</h1>
|
||||
|
||||
<div align="center">
|
||||
|
||||
لغة تصميم واجهة المستخدم على مستوى المؤسسات ومكتبة React UI.
|
||||
|
||||
[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
|
||||
|
||||
[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
|
||||
|
||||
[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
|
||||
|
||||
[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
|
||||
[npm-url]: http://npmjs.org/package/antd
|
||||
[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
|
||||
[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
|
||||
[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
|
||||
[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
|
||||
[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
|
||||
[download-url]: https://npmjs.org/package/antd
|
||||
[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
|
||||
[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
|
||||
[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
|
||||
[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
|
||||
[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
|
||||
[twitter-url]: https://twitter.com/AntDesignUI
|
||||
[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
|
||||
[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
|
||||
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
|
||||
[bundlephobia-url]: https://bundlephobia.com/package/antd
|
||||
[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square
|
||||
[issues-helper-url]: https://github.com/actions-cool/issues-helper
|
||||
[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
|
||||
[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
|
||||
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
|
||||
[dumi-url]: https://github.com/umijs/dumi
|
||||
|
||||
</div>
|
||||
|
||||
[](https://ant.design)
|
||||
|
||||
[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | العربية
|
||||
|
||||
## ✨ الميزات
|
||||
|
||||
- 🌈 واجهة مستخدم من فئة المؤسسات مصممة لتطبيقات الويب.
|
||||
- 📦 مجموعة من مكونات React عالية الجودة خارج الصندوق.
|
||||
- 🛡 مكتوب في TypeScript بأنواع ثابتة يمكن التنبؤ بها.
|
||||
- ⚙️ مجموعة كاملة من موارد التصميم وأدوات التطوير.
|
||||
- 🌍 دعم التدويل لعشرات اللغات.
|
||||
- 🎨 تخصيص موضوع قوي على أساس CSS-in-JS.
|
||||
|
||||
## 🖥 دعم البيئة البرمجية
|
||||
|
||||
- المتصفحات الحديثة
|
||||
- التقديم من جانب الخادم
|
||||
- [إلكترون](https://www.electronjs.org/)
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||
|
||||
## 📦 التثبيت
|
||||
|
||||
```bash
|
||||
npm install antd
|
||||
```
|
||||
|
||||
```bash
|
||||
yarn add antd
|
||||
```
|
||||
|
||||
## 🔨 الاستخدام
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Button, DatePicker } from 'antd';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<Button type="primary">PRESS ME</Button>
|
||||
<DatePicker placeholder="select date" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### كتابة السكربيت
|
||||
|
||||
الخاصية `antd` مكتوبة في TypeScript مع تعريفات كاملة ، تحقق [Use in TypeScript](https://ant.design/docs/react/use-in-typescript) للبدء.
|
||||
|
||||
## 🌍 التدويل
|
||||
|
||||
يتم دعم عشرات اللغات في`antd`, انظر [i18n](https://ant.design/docs/react/i18n).
|
||||
|
||||
## 🔗 الروابط
|
||||
|
||||
- [الصفحة الرئيسية](https://ant.design/)
|
||||
- [نظرة عامة على المكونات](https://ant.design/components/overview)
|
||||
- [برنامج Ant Design Pro](https://pro.ant.design/)
|
||||
- [تغير الدخول](CHANGELOG.en-US.md)
|
||||
- [مكونات](https://react-component.github.io/)
|
||||
- [موبايل UI](https://mobile.ant.design)
|
||||
- [برنامج صغير UI](https://mini.ant.design)
|
||||
- [مكونات Ant Design Pro](https://procomponents.ant.design)
|
||||
- [رسوم بيانية Ant Design](https://charts.ant.design)
|
||||
- [أيقونات Ant Design](https://github.com/ant-design/ant-design-icons)
|
||||
- [ألوان Ant Design](https://github.com/ant-design/ant-design-colors)
|
||||
- [صفحة لاند](https://landing.ant.design)
|
||||
- [حركة](https://motion.ant.design)
|
||||
- [سوق Scaffold](https://scaffold.ant.design)
|
||||
- [تعليمات المطورين](https://github.com/ant-design/ant-design/wiki/Development)
|
||||
- [إعداد نسخ الاصدارات](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||
- [أسئلة مكرة](https://ant.design/docs/react/faq)
|
||||
- [قالب CodeSandbox](https://u.ant.design/codesandbox-repro)
|
||||
- [تخصيص ثيم](https://ant.design/docs/react/customize-theme)
|
||||
- [كيفية التقدم بطلب المشاركة كمتعاون](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
|
||||
|
||||
## ⌨️ التطوير
|
||||
|
||||
استخدم Gitpod, بيئة تطوير مجانية عبر الإنترنت لـ GitHub.
|
||||
|
||||
[](https://gitpod.io/#https://github.com/ant-design/ant-design)
|
||||
|
||||
أو انسخه محلياً:
|
||||
|
||||
```bash
|
||||
$ git clone git@github.com:ant-design/ant-design.git
|
||||
$ cd ant-design
|
||||
$ npm install
|
||||
$ npm start
|
||||
```
|
||||
|
||||
افتح متصفحك وقم بزيارة http://127.0.0.1:8001 , شاهد المزيد [Development](https://github.com/ant-design/ant-design/wiki/Development).
|
||||
|
||||
## 🤝 المساهمة [](http://makeapullrequest.com)
|
||||
|
||||
أقرأ [دليل المساهمة](https://ant.design/docs/react/contributing) ودعونا نبني معاً الأفضل.
|
||||
|
||||
نرحب بجميع المساهمات. يرجى قراءة [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) أولاً. يمكنك تقديم أي أفكار [pull requests](https://github.com/ant-design/ant-design/pulls) أو [GitHub issues](https://github.com/ant-design/ant-design/issues). إذا كنت ترغب في تحسين التعليمات البرمجية ، تحقق من [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) وأتمنى لك وقتاً ممتعاً! :)
|
||||
|
||||
إذا كنت مساهماً ، فيرجى اتباع [Pull Request principle](https://github.com/ant-design/ant-design/wiki/PR-principle) لإنشاء طلب مساهمة مع [collaborator template](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
|
||||
|
||||
[](https://issuehunt.io/repos/34526884)
|
||||
|
||||
## ❤️ الرعاة والداعمون [](https://opencollective.com/ant-design#support) [](https://opencollective.com/ant-design#support)
|
||||
|
||||
[](https://opencollective.com/ant-design#support)
|
||||
|
||||
[](https://opencollective.com/ant-design#support)
|
||||
155
README-ja_JP.md
155
README-ja_JP.md
@ -1,155 +0,0 @@
|
||||
<p align="center">
|
||||
<a href="https://ant.design">
|
||||
<img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h1 align="center">Ant Design</h1>
|
||||
|
||||
<div align="center">
|
||||
|
||||
エンタープライズクラスの UI 設計言語と React UI ライブラリです。
|
||||
|
||||
[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
|
||||
|
||||
[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
|
||||
|
||||
[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
|
||||
|
||||
[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
|
||||
[npm-url]: http://npmjs.org/package/antd
|
||||
[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
|
||||
[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
|
||||
[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
|
||||
[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
|
||||
[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
|
||||
[download-url]: https://npmjs.org/package/antd
|
||||
[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
|
||||
[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
|
||||
[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
|
||||
[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
|
||||
[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
|
||||
[twitter-url]: https://twitter.com/AntDesignUI
|
||||
[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
|
||||
[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
|
||||
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
|
||||
[bundlephobia-url]: https://bundlephobia.com/package/antd
|
||||
[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square
|
||||
[issues-helper-url]: https://github.com/actions-cool/issues-helper
|
||||
[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
|
||||
[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
|
||||
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
|
||||
[dumi-url]: https://github.com/umijs/dumi
|
||||
|
||||
</div>
|
||||
|
||||
[](https://ant.design)
|
||||
|
||||
[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | 日本語 | [العربية](./README-ar_EG.md)
|
||||
|
||||
## ✨ 機能
|
||||
|
||||
- 🌈 ウェブアプリケーション用に設計されたエンタープライズクラスの UI。
|
||||
- 📦 高品質な React コンポーネントのセットが箱から出されます。
|
||||
- 🛡 TypeScript で書かれており、予測可能な静的型がある。
|
||||
- ⚙️ デザインリソースと開発ツールの全体的なパッケージ。
|
||||
- 🌍 数十の言語に対応した国際化サポート。
|
||||
- 🎨 強力なテーマのカスタマイズを細部にわたって実現。
|
||||
|
||||
## 🖥 環境対応
|
||||
|
||||
- モダンブラウザ
|
||||
- サーバーサイド レンダリング
|
||||
- [Electron](https://www.electronjs.org/)
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Edge | 直近の 2 バージョン | 直近の 2 バージョン | 直近の 2 バージョン | 直近の 2 バージョン |
|
||||
|
||||
## 📦 インストール
|
||||
|
||||
```bash
|
||||
npm install antd
|
||||
```
|
||||
|
||||
```bash
|
||||
yarn add antd
|
||||
```
|
||||
|
||||
## 🔨 使い方
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Button, DatePicker } from 'antd';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<Button type="primary">PRESS ME</Button>
|
||||
<DatePicker placeholder="select date" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### TypeScript
|
||||
|
||||
`antd` は TypeScript で書かれており、完全な定義がなされています。まずは [TypeScript で使う](https://ant.design/docs/react/use-in-typescript)をチェックしてください。
|
||||
|
||||
## 🌍 国際化対応
|
||||
|
||||
数十の言語が `antd` でサポートされています。[i18n](https://ant.design/docs/react/i18n) を参照してください。
|
||||
|
||||
## 🔗 リンク
|
||||
|
||||
- [ホームページ](https://ant.design/)
|
||||
- [コンポーネントの概要](https://ant.design/components/overview)
|
||||
- [Ant Design Pro](http://pro.ant.design/)
|
||||
- [変更ログ](CHANGELOG.en-US.md)
|
||||
- [rc-components](http://react-component.github.io/)
|
||||
- [Mobile UI](http://mobile.ant.design)
|
||||
- [Mini Program UI](http://mini.ant.design)
|
||||
- [Ant Design Pro コンポーネント](https://procomponents.ant.design)
|
||||
- [Ant Design チャート](https://charts.ant.design)
|
||||
- [Ant Design アイコン](https://github.com/ant-design/ant-design-icons)
|
||||
- [Ant Design カラー](https://github.com/ant-design/ant-design-colors)
|
||||
- [ランディングページ](https://landing.ant.design)
|
||||
- [動作](https://motion.ant.design)
|
||||
- [足場マーケット](http://scaffold.ant.design)
|
||||
- [開発者向けインストラクション](https://github.com/ant-design/ant-design/wiki/Development)
|
||||
- [バージョン管理リリースノート](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||
- [FAQ](https://ant.design/docs/react/faq)
|
||||
- バグレポート用の [CodeSandbox テンプレート](https://u.ant.design/codesandbox-repro)
|
||||
- [テーマのカスタマイズ](https://ant.design/docs/react/customize-theme)
|
||||
- [コラボレーターへの応募方法](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
|
||||
|
||||
## ⌨️ 開発
|
||||
|
||||
GitHub の無料オンライン開発環境である Gitpod を利用する。
|
||||
|
||||
[](https://gitpod.io/#https://github.com/ant-design/ant-design)
|
||||
|
||||
またはローカルにクローンする:
|
||||
|
||||
```bash
|
||||
$ git clone git@github.com:ant-design/ant-design.git
|
||||
$ cd ant-design
|
||||
$ npm install
|
||||
$ npm start
|
||||
```
|
||||
|
||||
ブラウザを起動し、http://127.0.0.1:8001 にアクセスして[開発セクション](https://github.com/ant-design/ant-design/wiki/Development)の続きをもっと見る.
|
||||
|
||||
## 🤝 貢献 [](http://makeapullrequest.com)
|
||||
|
||||
[貢献ガイド](https://ant.design/docs/react/contributing)を読んで、よりよい antd を一緒の作り上げましょう。
|
||||
|
||||
すべての貢献に感謝します。まずは [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) をお読みください. どんなアイデアも [Pull Request](https://github.com/ant-design/ant-design/pulls) や [GitHub issues](https://github.com/ant-design/ant-design/issues) で応募することができます. コードの改良をしたい方は、[開発手順](https://github.com/ant-design/ant-design/wiki/Development) を確認してください。あとは楽しみましょう! :)
|
||||
|
||||
コラボレーターの方は、[コラボレーター テンプレート](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md)を使い、Pull Request を作成するための[プルリクエストの原則](https://github.com/ant-design/ant-design/wiki/PR-principle)に従ってください。
|
||||
|
||||
[](https://issuehunt.io/repos/34526884)
|
||||
|
||||
## ❤️ スポンサーと後援者 [](https://opencollective.com/ant-design#support) [](https://opencollective.com/ant-design#support)
|
||||
|
||||
[](https://opencollective.com/ant-design#support)
|
||||
|
||||
[](https://opencollective.com/ant-design#support)
|
||||
158
README-pt_BR.md
158
README-pt_BR.md
@ -1,158 +0,0 @@
|
||||
<p align="center">
|
||||
<a href="https://ant.design">
|
||||
<img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h1 align="center">Ant Design</h1>
|
||||
|
||||
<div align="center">
|
||||
|
||||
Uma solução empresarial de design e biblioteca UI para React.
|
||||
|
||||
[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
|
||||
|
||||
[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
|
||||
|
||||
[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
|
||||
|
||||
[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
|
||||
[npm-url]: http://npmjs.org/package/antd
|
||||
[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
|
||||
[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
|
||||
[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
|
||||
[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
|
||||
[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
|
||||
[download-url]: https://npmjs.org/package/antd
|
||||
[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
|
||||
[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
|
||||
[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
|
||||
[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
|
||||
[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
|
||||
[twitter-url]: https://twitter.com/AntDesignUI
|
||||
[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
|
||||
[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
|
||||
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
|
||||
[bundlephobia-url]: https://bundlephobia.com/package/antd
|
||||
[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square
|
||||
[issues-helper-url]: https://github.com/actions-cool/issues-helper
|
||||
[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
|
||||
[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
|
||||
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
|
||||
[dumi-url]: https://github.com/umijs/dumi
|
||||
|
||||
</div>
|
||||
|
||||
[](https://ant.design)
|
||||
|
||||
[English](./README.md) | Português | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md)
|
||||
|
||||
## ✨ Funcionalidades
|
||||
|
||||
- 🌈 Design empresarial de interface para aplicações web.
|
||||
- 📦 Um conjunto de alta qualidade, componentes React prontos para uso.
|
||||
- 🛡 Escrito em TypeScript com tipos previsíveis.
|
||||
- ⚙️ Pacote completo de recursos de design e ferramentas de desenvolvimento.
|
||||
- 🌍 Suporte de internacionalização para dezenas de idiomas.
|
||||
- 🎨 Personalização poderosa do tema em todos os detalhes.
|
||||
|
||||
## 🖥 Suporte aos ambientes
|
||||
|
||||
- Navegadores modernos
|
||||
- Renderização no lado do servidor (server-side)
|
||||
- [Electron](https://www.electronjs.org/)
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| Edge | últimas 2 versões | últimas 2 versões | últimas 2 versões | últimas 2 versões | últimas 2 versões |
|
||||
|
||||
## 📦 Instalação
|
||||
|
||||
```bash
|
||||
npm install antd
|
||||
```
|
||||
|
||||
```bash
|
||||
yarn add antd
|
||||
```
|
||||
|
||||
## 🔨 Uso
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Button, DatePicker } from 'antd';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<Button type="primary">PRESS ME</Button>
|
||||
<DatePicker />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### TypeScript
|
||||
|
||||
Veja [Uso no Typescript](https://ant.design/docs/react/use-in-typescript).
|
||||
|
||||
## 🌍 Internacionalização
|
||||
|
||||
Veja [i18n](https://ant.design/docs/react/i18n).
|
||||
|
||||
## 🔗 Links
|
||||
|
||||
- [Página inicial](https://ant.design/)
|
||||
- [Componentes](https://ant.design/components/overview)
|
||||
- [Ant Design Pro](http://pro.ant.design/)
|
||||
- [Ant Design Charts](https://charts.ant.design)
|
||||
- [Change Log](CHANGELOG.en-US.md)
|
||||
- [rc-components](http://react-component.github.io/)
|
||||
- [Mobile UI](http://mobile.ant.design)
|
||||
- [Mini Program UI](http://mini.ant.design)
|
||||
- [Ant Design Icones](https://github.com/ant-design/ant-design-icons)
|
||||
- [Ant Design Cores](https://github.com/ant-design/ant-design-colors)
|
||||
- [Ant Design Pro Layout](https://github.com/ant-design/ant-design-pro-layout)
|
||||
- [Ant Design Pro Blocks](https://github.com/ant-design/pro-blocks)
|
||||
- [Tema escuro](https://github.com/ant-design/ant-design-dark-theme)
|
||||
- [Página de aterrissagem](https://landing.ant.design)
|
||||
- [Motion](https://motion.ant.design)
|
||||
- [Mercado de páginas](http://scaffold.ant.design)
|
||||
- [Instruções ao desenvolvedor](https://github.com/ant-design/ant-design/wiki/Development)
|
||||
- [Versionando as notas de atualização](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||
- [FAQ](https://ant.design/docs/react/faq)
|
||||
- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) para relatório de erros
|
||||
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
|
||||
- [Customize Theme](https://ant.design/docs/react/customize-theme)
|
||||
- [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
|
||||
|
||||
## ⌨️ Desenvolvimento
|
||||
|
||||
Use Gitpod, um ambiente de desenvolvimento online para GitHub.
|
||||
|
||||
[](https://gitpod.io/#https://github.com/ant-design/ant-design)
|
||||
|
||||
Ou clone localmente:
|
||||
|
||||
```bash
|
||||
$ git clone git@github.com:ant-design/ant-design.git
|
||||
$ cd ant-design
|
||||
$ npm install
|
||||
$ npm start
|
||||
```
|
||||
|
||||
Abra seu navegador e visite http://127.0.0.1:8001, veja mais em [Desenvolvimento](https://github.com/ant-design/ant-design/wiki/Development).
|
||||
|
||||
## 🤝 Contribuição [](http://makeapullrequest.com)
|
||||
|
||||
Leia nosso [guia de contribução](https://ant.design/docs/react/contributing) e vamos contruir um melhor antd juntos.
|
||||
|
||||
Nós saudamos todas as contribuições. Por favor, leia nosso [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) primeiro. Você pode submeter todas as ideias como [Pull Requests](https://github.com/ant-design/ant-design/pulls) ou como [GitHub issues](https://github.com/ant-design/ant-design/issues). Se você quiser melhorar o código, verifique [instruções ao desenvolvedor](https://github.com/ant-design/ant-design/wiki/Development) e divirta-se! :)
|
||||
|
||||
Se você é um colaborador, por favor siga nossa [Pull Request princípio](https://github.com/ant-design/ant-design/wiki/PR-principle) para criar um Pull Request através do [template do colaborador](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
|
||||
|
||||
[](https://issuehunt.io/repos/34526884)
|
||||
|
||||
## ❤️ Patrocionadores e Apoiadores [](https://opencollective.com/ant-design#support) [](https://opencollective.com/ant-design#support)
|
||||
|
||||
[](https://opencollective.com/ant-design#support)
|
||||
|
||||
[](https://opencollective.com/ant-design#support)
|
||||
154
README-sp_MX.md
154
README-sp_MX.md
@ -1,154 +0,0 @@
|
||||
<p align="center">
|
||||
<a href="https://ant.design">
|
||||
<img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h1 align="center">Ant Design</h1>
|
||||
|
||||
<div align="center">
|
||||
|
||||
Un lenguaje de diseño de interfaz de usuario de clase empresarial y una biblioteca de interfaz de usuario React.
|
||||
|
||||
[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
|
||||
|
||||
[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
|
||||
|
||||
[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
|
||||
|
||||
[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
|
||||
[npm-url]: http://npmjs.org/package/antd
|
||||
[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
|
||||
[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
|
||||
[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
|
||||
[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
|
||||
[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
|
||||
[download-url]: https://npmjs.org/package/antd
|
||||
[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
|
||||
[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
|
||||
[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
|
||||
[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
|
||||
[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
|
||||
[twitter-url]: https://twitter.com/AntDesignUI
|
||||
[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
|
||||
[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
|
||||
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
|
||||
[bundlephobia-url]: https://bundlephobia.com/package/antd
|
||||
[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square
|
||||
[issues-helper-url]: https://github.com/actions-cool/issues-helper
|
||||
[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
|
||||
[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
|
||||
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
|
||||
[dumi-url]: https://github.com/umijs/dumi
|
||||
|
||||
</div>
|
||||
|
||||
[](https://ant.design)
|
||||
|
||||
[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | Spanish | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md)
|
||||
|
||||
## ✨ Características
|
||||
|
||||
- 🌈 Interfaz de usuario de clase empresarial diseñada para aplicaciones de web
|
||||
- 📦 Un conjunto de componentes React de alta calidad listos para usar.
|
||||
- 🛡 Escrito en TypeScript con tipos estáticos predecibles.
|
||||
- ⚙️ Paquete completo de recursos de diseño y herramientas de desarrollo.
|
||||
- 🌍 Soporte de internacionalización para decenas de idiomas.
|
||||
- 🎨 Potente personalización del tema en cada detalle.
|
||||
|
||||
## 🖥 Entornos soportados
|
||||
|
||||
- Navegadores modernos
|
||||
- Representación del lado del servidor
|
||||
- [Electron](https://www.electronjs.org/)
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Edge | últimas 2 versiones | últimas 2 versiones | últimas 2 versiones | últimas 2 versiones |
|
||||
|
||||
## 📦 Instalar
|
||||
|
||||
```bash
|
||||
npm install antd
|
||||
```
|
||||
|
||||
```bash
|
||||
yarn add antd
|
||||
```
|
||||
|
||||
## 🔨 Uso
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Button, DatePicker } from 'antd';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<Button type="primary">PRESS ME</Button>
|
||||
<DatePicker placeholder="select date" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### TypeScript
|
||||
|
||||
`antd` está escrito en TypeScript con definiciones completas, ver Usar en TypeScript [Usar en TypeScript](https://ant.design/docs/react/use-in-typescript) para comenzar.
|
||||
|
||||
## 🌍 Internacionalización
|
||||
|
||||
Docenas de idiomas compatibles en `antd`, ver [i18n](https://ant.design/docs/react/i18n).
|
||||
|
||||
## 🔗 Enlaces
|
||||
|
||||
- [Página de Inicio](https://ant.design/)
|
||||
- [Descripción General de los Componentes](https://ant.design/components/overview)
|
||||
- [Ant Design Pro](http://pro.ant.design/)
|
||||
- [Cambio de Registro](CHANGELOG.en-US.md)
|
||||
- [componentes-rc](http://react-component.github.io/)
|
||||
- [Interfaz de Usuario Móvil](http://mobile.ant.design)
|
||||
- [Componentes Ant Design Pro](https://procomponents.ant.design)
|
||||
- [Gráficos de Diseño de Ant Design](https://charts.ant.design)
|
||||
- [Iconos de Diseño de Ant Design](https://github.com/ant-design/ant-design-icons)
|
||||
- [Colores de Diseño de Ant Design](https://github.com/ant-design/ant-design-colors)
|
||||
- [Páginas de Destino](https://landing.ant.design)
|
||||
- [Movimiento](https://motion.ant.design)
|
||||
- [Mercado Scaffold](http://scaffold.ant.design)
|
||||
- [Instrucción para Desarrolladores](https://github.com/ant-design/ant-design/wiki/Development)
|
||||
- [Nota de la Versión de Control de Versiones](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||
- [FAQ](https://ant.design/docs/react/faq)
|
||||
- [Plantilla de CodeSandbox](https://u.ant.design/codesandbox-repro) para reportes de errores
|
||||
- [Tema personalizado](https://ant.design/docs/react/customize-theme)
|
||||
- [Cómo Postularse para ser Colaborador](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
|
||||
|
||||
## ⌨️ Desarrollo
|
||||
|
||||
Utilice Gitpod, un entorno de desarrollo en línea gratuito para GitHub.
|
||||
|
||||
[](https://gitpod.io/#https://github.com/ant-design/ant-design)
|
||||
|
||||
O clonar localmente:
|
||||
|
||||
```bash
|
||||
$ git clone git@github.com:ant-design/ant-design.git
|
||||
$ cd ant-design
|
||||
$ npm install
|
||||
$ npm start
|
||||
```
|
||||
|
||||
Abra su navegador y visite http://127.0.0.1:8001 , vea más en [Desarollo](https://github.com/ant-design/ant-design/wiki/Development).
|
||||
|
||||
## 🤝 Contribuyendo [](http://makeapullrequest.com)
|
||||
|
||||
Lea nuestro [guía de contribución](https://ant.design/docs/react/contributing) y construyamos un mejor antd juntos.
|
||||
|
||||
Damos la bienvenida a todas las contribuciones. Por favor lea nuestro[CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) primero. Puede enviar ideas como [solicitudes de extracción](https://github.com/ant-design/ant-design/pulls) o como [problemas de GitHub](https://github.com/ant-design/ant-design/issues). Si desea mejorar el código, consulte las [Instrucciones de Desarrollo](https://github.com/ant-design/ant-design/wiki/Development) y ¡diviértase! :)
|
||||
|
||||
Si usted es un colaborador, siga nuestro [principio de solicitud de extracción](https://github.com/ant-design/ant-design/wiki/PR-principle) para crear una solicitud de extracción con una [plantilla de colaborador](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
|
||||
|
||||
[](https://issuehunt.io/repos/34526884)
|
||||
|
||||
## ❤️ Patrocinadores [](https://opencollective.com/ant-design#support) [](https://opencollective.com/ant-design#support)
|
||||
|
||||
[](https://opencollective.com/ant-design#support)
|
||||
|
||||
[](https://opencollective.com/ant-design#support)
|
||||
155
README-uk_UA.md
155
README-uk_UA.md
@ -1,155 +0,0 @@
|
||||
<p align="center">
|
||||
<a href="https://ant.design">
|
||||
<img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h1 align="center">Ant Design</h1>
|
||||
|
||||
<div align="center">
|
||||
|
||||
Мова інтерфейсу корпоративного класу та React UI бібліотека.
|
||||
|
||||
[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
|
||||
|
||||
[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
|
||||
|
||||
[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
|
||||
|
||||
[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
|
||||
[npm-url]: http://npmjs.org/package/antd
|
||||
[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
|
||||
[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
|
||||
[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
|
||||
[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
|
||||
[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
|
||||
[download-url]: https://npmjs.org/package/antd
|
||||
[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
|
||||
[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
|
||||
[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
|
||||
[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
|
||||
[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
|
||||
[twitter-url]: https://twitter.com/AntDesignUI
|
||||
[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
|
||||
[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
|
||||
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
|
||||
[bundlephobia-url]: https://bundlephobia.com/package/antd
|
||||
[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square
|
||||
[issues-helper-url]: https://github.com/actions-cool/issues-helper
|
||||
[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
|
||||
[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
|
||||
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
|
||||
[dumi-url]: https://github.com/umijs/dumi
|
||||
|
||||
</div>
|
||||
|
||||
[](https://ant.design)
|
||||
|
||||
[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | Українською | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md)
|
||||
|
||||
## ✨ Особливості
|
||||
|
||||
- 🌈 UI корпоративного класу, призначений для веб-додатків.
|
||||
- 📦 Набір високоякісних компонентів React з коробки.
|
||||
- 🛡 Написано на TypeScript із вбудованими статичними типами.
|
||||
- ⚙️ Весь пакет дизайнерських ресурсів та засобів розробки.
|
||||
- 🌍 Підтримка інтернаціоналізації для десятків мов.
|
||||
- 🎨 Потужне налаштування теми в кожній деталі.
|
||||
|
||||
## 🖥 Підтримка навколишнього середовища
|
||||
|
||||
- Сучасні браузери
|
||||
- Рендеринг на стороні сервера (SSR)
|
||||
- [Electron](https://www.electronjs.org/)
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Edge | 2 останні версії | 2 останні версії | 2 останні версії | 2 останні версії |
|
||||
|
||||
## 📦 Встановлення
|
||||
|
||||
```bash
|
||||
npm install antd
|
||||
```
|
||||
|
||||
```bash
|
||||
yarn add antd
|
||||
```
|
||||
|
||||
## 🔨 Використання
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Button, DatePicker } from 'antd';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<Button type="primary">PRESS ME</Button>
|
||||
<DatePicker placeholder="select date" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### TypeScript
|
||||
|
||||
`antd` написано на TypeScript із повною типізацією, вибери [Використання у TypeScript](https://ant.design/docs/react/use-in-typescript) щоб розпочати.
|
||||
|
||||
## 🌍 Інтернаціоналізація
|
||||
|
||||
Десятки мов підтримуються в `antd`, дивись [i18n](https://ant.design/docs/react/i18n).
|
||||
|
||||
## 🔗 Посилання
|
||||
|
||||
- [Домашня сторінка](https://ant.design/)
|
||||
- [Компоненти](https://ant.design/components/overview)
|
||||
- [Ant Design Pro](http://pro.ant.design/)
|
||||
- [Change Log](CHANGELOG.en-US.md)
|
||||
- [rc-components](http://react-component.github.io/)
|
||||
- [Mobile UI](http://mobile.ant.design)
|
||||
- [Mini Program UI](http://mini.ant.design)
|
||||
- [Ant Design Pro Components](https://procomponents.ant.design)
|
||||
- [Ant Design Charts](https://charts.ant.design)
|
||||
- [Ant Design Icons](https://github.com/ant-design/ant-design-icons)
|
||||
- [Ant Design Colors](https://github.com/ant-design/ant-design-colors)
|
||||
- [Лендінги](https://landing.ant.design)
|
||||
- [Motion](https://motion.ant.design)
|
||||
- [Scaffold Market](http://scaffold.ant.design)
|
||||
- [Інструкція розробника](https://github.com/ant-design/ant-design/wiki/Development)
|
||||
- [Примітка до випуску версій](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||
- [FAQ](https://ant.design/docs/react/faq)
|
||||
- [CodeSandbox темплейт](https://u.ant.design/codesandbox-repro) для звітів про помилки
|
||||
- [Кастомізація теми](https://ant.design/docs/react/customize-theme)
|
||||
- [Як подати заявку на участь у програмі Співавторства](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
|
||||
|
||||
## ⌨️ Розробка
|
||||
|
||||
Використовуй Gitpod, безкоштовне середовище розробки для GitHub.
|
||||
|
||||
[](https://gitpod.io/#https://github.com/ant-design/ant-design)
|
||||
|
||||
Або клонуй локально:
|
||||
|
||||
```bash
|
||||
$ git clone git@github.com:ant-design/ant-design.git
|
||||
$ cd ant-design
|
||||
$ npm install
|
||||
$ npm start
|
||||
```
|
||||
|
||||
Відкрий у браузері http://127.0.0.1:8001, докладніше дивись [Розробка](https://github.com/ant-design/ant-design/wiki/Development).
|
||||
|
||||
## 🤝 Контрибьютинг [](http://makeapullrequest.com)
|
||||
|
||||
Прочитай наш [посібник контриб'ютора](https://ant.design/docs/react/contributing) і давай будувати кращий antd разом.
|
||||
|
||||
Ми вітаємо всі внески. Будь ласка, прочитай наш [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) спочатку. Ти можеш пропонувати будь-які ідеї як [Pull Request](https://github.com/ant-design/ant-design/pulls) або як [GitHub issues](https://github.com/ant-design/ant-design/issues). Якщо ти хочеш вдосконалити код, переглянь [Інструкції з розробки](https://github.com/ant-design/ant-design/wiki/Development) та добре проведи час! :)
|
||||
|
||||
Якщо ти співавтор, дотримуйся нашого [Pull Request принципу](https://github.com/ant-design/ant-design/wiki/PR-principle) щоб створити Pull Request за [темплейтом співавтора](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
|
||||
|
||||
[](https://issuehunt.io/repos/34526884)
|
||||
|
||||
## ❤️ Спонсори та Меценати [](https://opencollective.com/ant-design#support) [](https://opencollective.com/ant-design#support)
|
||||
|
||||
[](https://opencollective.com/ant-design#support)
|
||||
|
||||
[](https://opencollective.com/ant-design#support)
|
||||
@ -12,7 +12,7 @@
|
||||
|
||||
[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
|
||||
|
||||
[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
|
||||
[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url] [![Covered by Argos Visual Testing][argos-ci-image]][argos-ci-url]
|
||||
|
||||
[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
|
||||
|
||||
@ -40,12 +40,14 @@
|
||||
[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
|
||||
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
|
||||
[dumi-url]: https://github.com/umijs/dumi
|
||||
[argos-ci-image]: https://argos-ci.com/badge.svg
|
||||
[argos-ci-url]: https://app.argos-ci.com/ant-design/ant-design/reference
|
||||
|
||||
</div>
|
||||
|
||||
[](https://ant.design)
|
||||
|
||||
[English](./README.md) | [Português](./README-pt_BR.md) | 简体中文 | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md)
|
||||
[English](./README.md) | 中文
|
||||
|
||||
## ✨ 特性
|
||||
|
||||
@ -150,7 +152,7 @@ $ npm start
|
||||
|
||||
> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。
|
||||
|
||||
[](https://issuehunt.io/repos/34526884)
|
||||
[](https://issuehunt.io/repos/34526884)
|
||||
|
||||
## 👥 社区互助
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@ An enterprise-class UI design language and React UI library.
|
||||
|
||||
[](https://ant.design)
|
||||
|
||||
English | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md)
|
||||
English | [中文](./README-zh_CN.md)
|
||||
|
||||
## ✨ Features
|
||||
|
||||
@ -148,7 +148,7 @@ We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.c
|
||||
|
||||
If you are a collaborator, please follow our [Pull Request principle](https://github.com/ant-design/ant-design/wiki/PR-principle) to create a Pull Request with [collaborator template](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
|
||||
|
||||
[](https://issuehunt.io/repos/34526884)
|
||||
[](https://issuehunt.io/repos/34526884)
|
||||
|
||||
## ❤️ Sponsors and Backers [](https://opencollective.com/ant-design#support) [](https://opencollective.com/ant-design#support)
|
||||
|
||||
|
||||
@ -84,7 +84,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
| multiple | Support multiple or not | boolean | - | 4.17.0 |
|
||||
| removeIcon | The custom remove icon | ReactNode | - | |
|
||||
| showCheckedStrategy | The way show selected item in box. ** `SHOW_CHILD`: ** just show child treeNode. **`Cascader.SHOW_PARENT`:** just show parent treeNode (when all child treeNode under the parent treeNode are checked) | `Cascader.SHOW_PARENT` \| `Cascader.SHOW_CHILD` | `Cascader.SHOW_PARENT` | 4.20.0 |
|
||||
| searchValue | Set search value，Need work with `showSearch` | string | - | 4.17.0 |
|
||||
| searchValue | Set search value, Need work with `showSearch` | string | - | 4.17.0 |
|
||||
| onSearch | The callback function triggered when input changed | (search: string) => void | - | 4.17.0 |
|
||||
| dropdownMenuColumnStyle | The style of the drop-down menu column | CSSProperties | - | |
|
||||
| loadingIcon | The appearance of lazy loading (now is useless) | ReactNode | - | |
|
||||
|
||||
@ -25444,6 +25444,7 @@ exports[`ConfigProvider components Slider configProvider 1`] = `
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -25490,6 +25491,7 @@ exports[`ConfigProvider components Slider configProvider componentDisabled 1`] =
|
||||
/>
|
||||
<div
|
||||
aria-disabled="true"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -25535,6 +25537,7 @@ exports[`ConfigProvider components Slider configProvider componentSize large 1`]
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -25581,6 +25584,7 @@ exports[`ConfigProvider components Slider configProvider componentSize middle 1`
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -25627,6 +25631,7 @@ exports[`ConfigProvider components Slider configProvider componentSize small 1`]
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -25673,6 +25678,7 @@ exports[`ConfigProvider components Slider normal 1`] = `
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -25719,6 +25725,7 @@ exports[`ConfigProvider components Slider prefixCls 1`] = `
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
import ConfigProvider from '..';
|
||||
import { fireEvent, render } from '../../../tests/utils';
|
||||
import Alert from '../../alert';
|
||||
@ -942,11 +943,16 @@ describe('ConfigProvider support style and className props', () => {
|
||||
const { container } = render(
|
||||
<ConfigProvider tag={{ className: 'cp-tag', style: { backgroundColor: 'blue' } }}>
|
||||
<Tag>Test</Tag>
|
||||
<Tag.CheckableTag checked>CheckableTag</Tag.CheckableTag>
|
||||
</ConfigProvider>,
|
||||
);
|
||||
const element = container.querySelector<HTMLSpanElement>('.ant-tag');
|
||||
expect(element).toHaveClass('cp-tag');
|
||||
expect(element).toHaveStyle({ backgroundColor: 'blue' });
|
||||
|
||||
const checkableElement = container.querySelector<HTMLSpanElement>('.ant-tag-checkable');
|
||||
expect(checkableElement).toHaveClass('cp-tag');
|
||||
expect(checkableElement).toHaveStyle({ backgroundColor: 'blue' });
|
||||
});
|
||||
|
||||
it('Should Table className & style works', () => {
|
||||
|
||||
@ -4,8 +4,12 @@
|
||||
|
||||
> 注意：在 v5 中 `style` 与 `className` 迁移至 Drawer 面板上与 Modal 保持一致，原 `style` 与 `className` 替换为 `rootStyle` 与 `rootClassName`。
|
||||
|
||||
> 当 `getContainer` 返回 DOM 节点时，需要手动设置 `rootStyle` 为 `{ position: 'absolute' }`，参考 [#41951](https://github.com/ant-design/ant-design/issues/41951#issuecomment-1521099152)。
|
||||
|
||||
## en-US
|
||||
|
||||
Render in current dom. custom container, check `getContainer`.
|
||||
|
||||
> Note: `style` and `className` props are moved to Drawer panel in v5 which is aligned with Modal component. Original `style` and `className` props are replaced by `rootStyle` and `rootClassName`.
|
||||
|
||||
> When `getContainer` returns a DOM node, you need to manually set `rootStyle` to `{ position: 'absolute' }`, see [#41951](https://github.com/ant-design/ant-design/issues/41951#issuecomment-1521099152).
|
||||
|
||||
@ -56,7 +56,7 @@ demo:
|
||||
| forceRender | 预渲染 Drawer 内元素 | boolean | false | |
|
||||
| getContainer | 指定 Drawer 挂载的节点，**并在容器内展现**，`false` 为挂载在当前位置 | HTMLElement \| () => HTMLElement \| Selectors \| false | body | |
|
||||
| headerStyle | 用于设置 Drawer 头部的样式 | CSSProperties | - | |
|
||||
| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 378 | |
|
||||
| height | 高度，在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 378 | |
|
||||
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
||||
| mask | 是否展示遮罩 | boolean | true | |
|
||||
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
||||
|
||||
@ -58,7 +58,7 @@ demo:
|
||||
| overlayClassName | 下拉根元素的类名称 | string | - | |
|
||||
| overlayStyle | 下拉根元素的样式 | CSSProperties | - | |
|
||||
| placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` | |
|
||||
| trigger | 触发下拉的行为, 移动端不支持 hover | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
|
||||
| trigger | 触发下拉的行为，移动端不支持 hover | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
|
||||
| open | 菜单是否显示，小于 4.23.0 使用 `visible`（[为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)） | boolean | - | 4.23.0 |
|
||||
| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`（[为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)） | (open: boolean) => void | - | 4.23.0 |
|
||||
|
||||
|
||||
@ -431,6 +431,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
|
||||
@ -406,6 +406,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
|
||||
@ -220,9 +220,6 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
|
||||
position: 'fixed',
|
||||
cursor: 'pointer',
|
||||
zIndex: 99,
|
||||
display: 'block',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: floatButtonSize,
|
||||
height: floatButtonSize,
|
||||
insetInlineEnd: token.floatButtonInsetInlineEnd,
|
||||
|
||||
@ -5415,6 +5415,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="true"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -20008,6 +20009,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
|
||||
@ -2894,6 +2894,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="true"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -8899,6 +8900,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
|
||||
@ -1033,6 +1033,7 @@ exports[`Form form should support disabled 1`] = `
|
||||
/>
|
||||
<div
|
||||
aria-disabled="true"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
|
||||
@ -478,7 +478,7 @@ New in `5.8.0`. Accept configuration parameters. When `strict` is `true`, only t
|
||||
|
||||
#### FilterFunc
|
||||
|
||||
用于过滤一些字段值，`meta` 会返回字段相关信息。例如可以用来获取仅被用户修改过的值等等。
|
||||
To filter certain field values, `meta` will provide information related to the fields. For example, it can be used to retrieve values that have only been modified by the user, and so on.
|
||||
|
||||
```tsx
|
||||
type FilterFunc = (meta: { touched: boolean; validating: boolean }) => boolean;
|
||||
|
||||
@ -925,6 +925,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="5"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="1"
|
||||
@ -1040,6 +1041,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="5"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="1"
|
||||
@ -1155,6 +1157,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="5"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="2"
|
||||
|
||||
@ -911,6 +911,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="5"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="1"
|
||||
@ -1007,6 +1008,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="5"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="1"
|
||||
@ -1103,6 +1105,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="5"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="2"
|
||||
|
||||
@ -42,7 +42,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
|
||||
| alt | 图像描述 | string | - | 4.6.0 |
|
||||
| fallback | 加载失败容错地址 | string | - | 4.6.0 |
|
||||
| height | 图像高度 | string \| number | - | 4.6.0 |
|
||||
| placeholder | 加载占位, 为 `true` 时使用默认占位 | ReactNode | - | 4.6.0 |
|
||||
| placeholder | 加载占位，为 `true` 时使用默认占位 | ReactNode | - | 4.6.0 |
|
||||
| preview | 预览参数，为 `false` 时禁用 | boolean \| [PreviewType](#previewtype) | true | 4.6.0 [PreviewType](#previewyype):4.7.0 |
|
||||
| src | 图片地址 | string | - | 4.6.0 |
|
||||
| width | 图像宽度 | string \| number | - | 4.6.0 |
|
||||
|
||||
@ -43,11 +43,11 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA
|
||||
| footer | 列表底部 | ReactNode | - | |
|
||||
| grid | 列表栅格配置 | [object](#list-grid-props) | - | |
|
||||
| header | 列表头部 | ReactNode | - | |
|
||||
| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - | |
|
||||
| itemLayout | 设置 `List.Item` 布局，设置成 `vertical` 则竖直样式显示，默认横排 | string | - | |
|
||||
| loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean \| [object](/components/spin-cn#api) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false | |
|
||||
| loadMore | 加载更多 | ReactNode | - | |
|
||||
| locale | 默认文案设置，目前包括空数据文案 | object | {emptyText: `暂无数据`} | |
|
||||
| pagination | 对应的 `pagination` 配置, 设置 false 不显示 | boolean \| object | false | |
|
||||
| pagination | 对应的 `pagination` 配置，设置 false 不显示 | boolean \| object | false | |
|
||||
| renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | (item) => ReactNode | - | |
|
||||
| rowKey | 当 `renderItem` 自定义渲染列表项有效时，自定义每一行的 `key` 的获取方式 | `keyof` T \| (item: T) => `React.Key` | `"key"` | |
|
||||
| size | list 的尺寸 | `default` \| `large` \| `small` | `default` | |
|
||||
@ -81,8 +81,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| actions | 列表操作组，根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧 | Array<ReactNode> | - | |
|
||||
| extra | 额外内容, 通常用在 `itemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | ReactNode | - | |
|
||||
| actions | 列表操作组，根据 `itemLayout` 的不同，位置在卡片底部或者最右侧 | Array<ReactNode> | - | |
|
||||
| extra | 额外内容，通常用在 `itemLayout` 为 `vertical` 的情况下，展示右侧内容; `horizontal` 展示在列表元素最右侧 | ReactNode | - | |
|
||||
|
||||
### List.Item.Meta
|
||||
|
||||
|
||||
@ -107,7 +107,7 @@ message.config({
|
||||
| --- | --- | --- | --- | --- |
|
||||
| duration | 默认自动关闭延时，单位秒 | number | 3 | |
|
||||
| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLElement | () => document.body | |
|
||||
| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | |
|
||||
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | |
|
||||
| prefixCls | 消息节点的 className 前缀 | string | `ant-message` | 4.5.0 |
|
||||
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
||||
| top | 消息距离顶部的位置 | number | 8 | |
|
||||
|
||||
@ -78,7 +78,7 @@ demo:
|
||||
|
||||
#### 注意
|
||||
|
||||
- `<Modal />` 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 `destroyOnClose`。
|
||||
- `<Modal />` 默认关闭后状态不会自动清空，如果希望每次打开都是新内容，请设置 `destroyOnClose`。
|
||||
- `<Modal />` 和 Form 一起配合使用时，设置 `destroyOnClose` 也不会在 Modal 关闭时销毁表单字段数据，需要设置 `<Form preserve={false} />`。
|
||||
- `Modal.method()` RTL 模式仅支持 hooks 用法。
|
||||
|
||||
@ -106,7 +106,7 @@ demo:
|
||||
| closeIcon | 自定义关闭图标。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | boolean \| ReactNode | <CloseOutlined /> | |
|
||||
| content | 内容 | ReactNode | - | |
|
||||
| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer: null` | (params:[footerRenderParams](/components/modal-cn#footerrenderparams))=> React.ReactNode \| React.ReactNode | - | 5.9.0 |
|
||||
| getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | |
|
||||
| getContainer | 指定 Modal 挂载的 HTML 节点，false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | |
|
||||
| icon | 自定义图标 | ReactNode | <ExclamationCircleFilled /> | |
|
||||
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
||||
| mask | 是否展示遮罩 | boolean | true | |
|
||||
|
||||
@ -76,7 +76,7 @@ config 参数如下：
|
||||
| placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` | |
|
||||
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
||||
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
||||
| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
||||
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
||||
|
||||
### 全局配置
|
||||
|
||||
@ -108,7 +108,7 @@ notification.config({
|
||||
| placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` | |
|
||||
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
||||
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
||||
| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
||||
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
||||
|
||||
## 主题变量（Design Token）
|
||||
|
||||
|
||||
@ -70,7 +70,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
| dropdownRender | Customize dropdown content | (originNode: ReactNode) => ReactNode | - | |
|
||||
| dropdownStyle | The style of dropdown menu | CSSProperties | - | |
|
||||
| fieldNames | Customize node label, value, options，groupLabel field name | object | { label: `label`, value: `value`, options: `options`, groupLabel: `label` } | 4.17.0 (`groupLabel` added in 5.6.0) |
|
||||
| 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. [Example](#select-demo-search) | boolean \| function(inputValue, option) | true | |
|
||||
| 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 \| function(inputValue, option) | true | |
|
||||
| filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction | (optionA: Option, optionB: Option) => number | - | 4.9.0 |
|
||||
| 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 { value: string, label: ReactNode } | boolean | false | |
|
||||
|
||||
@ -17,6 +17,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
@ -60,6 +61,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
@ -89,6 +91,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
@ -160,6 +163,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="true"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
@ -194,7 +198,7 @@ Array [
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track ant-slider-track-1"
|
||||
class="ant-slider-track ant-slider-track-1 ant-slider-track-draggable"
|
||||
style="left: 20%; width: 30%;"
|
||||
/>
|
||||
<div
|
||||
@ -202,6 +206,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
@ -231,6 +236,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
@ -277,6 +283,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
@ -324,6 +331,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
@ -353,6 +361,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
@ -417,6 +426,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="26"
|
||||
@ -446,6 +456,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="37"
|
||||
@ -518,7 +529,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx extend context correc
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track ant-slider-track-1"
|
||||
class="ant-slider-track ant-slider-track-1 ant-slider-track-draggable"
|
||||
style="left: 20%; width: 30%;"
|
||||
/>
|
||||
<div
|
||||
@ -526,6 +537,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx extend context correc
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
@ -555,6 +567,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx extend context correc
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
@ -604,6 +617,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
@ -647,6 +661,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
@ -676,6 +691,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
@ -747,6 +763,7 @@ exports[`renders components/slider/demo/icon-slider.tsx extend context correctly
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -829,6 +846,7 @@ exports[`renders components/slider/demo/input-number.tsx extend context correctl
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="20"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
@ -965,6 +983,7 @@ exports[`renders components/slider/demo/input-number.tsx extend context correctl
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="1"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -1119,6 +1138,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="37"
|
||||
@ -1209,6 +1229,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="26"
|
||||
@ -1238,6 +1259,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="37"
|
||||
@ -1327,6 +1349,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="37"
|
||||
@ -1420,6 +1443,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="37"
|
||||
@ -1513,6 +1537,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="37"
|
||||
@ -1593,6 +1618,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
@ -1636,6 +1662,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
@ -1665,6 +1692,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
@ -1735,6 +1763,7 @@ exports[`renders components/slider/demo/show-tooltip.tsx extend context correctl
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
@ -1784,6 +1813,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -1827,6 +1857,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -1878,6 +1909,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
@ -1925,6 +1957,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
@ -1954,6 +1987,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
@ -2018,6 +2052,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="26"
|
||||
@ -2047,6 +2082,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="37"
|
||||
|
||||
@ -17,6 +17,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
@ -41,6 +42,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
@ -51,6 +53,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
@ -101,6 +104,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="true"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
@ -116,7 +120,7 @@ Array [
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track ant-slider-track-1"
|
||||
class="ant-slider-track ant-slider-track-1 ant-slider-track-draggable"
|
||||
style="left:20%;width:30%"
|
||||
/>
|
||||
<div
|
||||
@ -124,6 +128,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
@ -134,6 +139,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
@ -161,6 +167,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
@ -189,6 +196,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
@ -199,6 +207,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
@ -244,6 +253,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="26"
|
||||
@ -254,6 +264,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="37"
|
||||
@ -305,7 +316,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx correctly 1`] = `
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track ant-slider-track-1"
|
||||
class="ant-slider-track ant-slider-track-1 ant-slider-track-draggable"
|
||||
style="left:20%;width:30%"
|
||||
/>
|
||||
<div
|
||||
@ -313,6 +324,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx correctly 1`] = `
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
@ -323,6 +335,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx correctly 1`] = `
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
@ -351,6 +364,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
@ -375,6 +389,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
@ -385,6 +400,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
@ -435,6 +451,7 @@ exports[`renders components/slider/demo/icon-slider.tsx correctly 1`] = `
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -496,6 +513,7 @@ exports[`renders components/slider/demo/input-number.tsx correctly 1`] = `
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="20"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
@ -613,6 +631,7 @@ exports[`renders components/slider/demo/input-number.tsx correctly 1`] = `
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="1"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -746,6 +765,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="37"
|
||||
@ -817,6 +837,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="26"
|
||||
@ -827,6 +848,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="37"
|
||||
@ -897,6 +919,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="37"
|
||||
@ -971,6 +994,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="37"
|
||||
@ -1045,6 +1069,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="37"
|
||||
@ -1104,6 +1129,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
@ -1128,6 +1154,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
@ -1138,6 +1165,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
@ -1188,6 +1216,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -1212,6 +1241,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -1244,6 +1274,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
@ -1272,6 +1303,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="20"
|
||||
@ -1282,6 +1314,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
@ -1327,6 +1360,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="26"
|
||||
@ -1337,6 +1371,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="37"
|
||||
|
||||
@ -16,6 +16,7 @@ exports[`Slider rtl render component should be rendered correctly in RTL directi
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
@ -44,6 +45,7 @@ exports[`Slider should render in RTL direction 1`] = `
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
|
||||
@ -105,6 +105,14 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
|
||||
transition: `background-color ${token.motionDurationMid}`,
|
||||
},
|
||||
|
||||
[`${componentCls}-track-draggable`]: {
|
||||
// base on https://github.com/ant-design/ant-design/pull/42825/files#diff-9b9560a611e7ed0e6ef24ca9f1faff1e8c816d3f35ed6a1f73c36d2b42790aba
|
||||
// zIndex: 1,
|
||||
boxSizing: 'content-box',
|
||||
backgroundClip: 'content-box',
|
||||
border: 'solid rgba(0,0,0,0)',
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
[`${componentCls}-rail`]: {
|
||||
backgroundColor: token.railHoverBg,
|
||||
@ -290,6 +298,19 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject =
|
||||
const handlePos: keyof React.CSSProperties = horizontal ? 'insetBlockStart' : 'insetInlineStart';
|
||||
const markInset: keyof React.CSSProperties = horizontal ? 'top' : 'insetInlineStart';
|
||||
|
||||
const handlePosSize = (railSize * 3 - handleSize) / 2;
|
||||
const draggableBorderSize = (handleSize - railSize) / 2;
|
||||
|
||||
const draggableBorder: React.CSSProperties = horizontal
|
||||
? {
|
||||
borderWidth: `${draggableBorderSize}px 0`,
|
||||
transform: `translateY(-${draggableBorderSize}px)`,
|
||||
}
|
||||
: {
|
||||
borderWidth: `0 ${draggableBorderSize}px`,
|
||||
transform: `translateX(-${draggableBorderSize}px)`,
|
||||
};
|
||||
|
||||
return {
|
||||
[railPadding]: railSize,
|
||||
[part]: railSize * 3,
|
||||
@ -303,8 +324,12 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject =
|
||||
[part]: railSize,
|
||||
},
|
||||
|
||||
[`${componentCls}-track-draggable`]: {
|
||||
...draggableBorder,
|
||||
},
|
||||
|
||||
[`${componentCls}-handle`]: {
|
||||
[handlePos]: (railSize * 3 - handleSize) / 2,
|
||||
[handlePos]: handlePosSize,
|
||||
},
|
||||
|
||||
[`${componentCls}-mark`]: {
|
||||
|
||||
@ -15224,6 +15224,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="8"
|
||||
|
||||
@ -3987,6 +3987,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="8"
|
||||
|
||||
@ -130,6 +130,13 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
textAlign: 'center',
|
||||
transform: 'translateY(-50%) translateX(-50%) rotate(135deg)',
|
||||
},
|
||||
|
||||
'&:last-child': {
|
||||
'&::after': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
[`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
visibility: 'hidden',
|
||||
},
|
||||
|
||||
@ -174,7 +174,7 @@ const columns = [
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | 设置列的对齐方式 | `left` \| `right` \| `center` | `left` | |
|
||||
| className | 列样式类名 | string | - | |
|
||||
| colSpan | 表头列合并,设置为 0 时，不渲染 | number | - | |
|
||||
| colSpan | 表头列合并，设置为 0 时，不渲染 | number | - | |
|
||||
| dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string \| string\[] | - | |
|
||||
| defaultFilteredValue | 默认筛选值 | string\[] | - | |
|
||||
| filterResetToDefaultFilteredValue | 点击重置按钮的时候，是否恢复默认筛选值 | boolean | false | |
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import classNames from 'classnames';
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import useStyle from './style';
|
||||
|
||||
@ -21,13 +22,14 @@ export interface CheckableTagProps {
|
||||
const CheckableTag: React.FC<CheckableTagProps> = (props) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
style,
|
||||
className,
|
||||
checked,
|
||||
onChange,
|
||||
onClick,
|
||||
...restProps
|
||||
} = props;
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
const { getPrefixCls, tag } = React.useContext(ConfigContext);
|
||||
|
||||
const handleClick = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
|
||||
onChange?.(!checked);
|
||||
@ -44,11 +46,22 @@ const CheckableTag: React.FC<CheckableTagProps> = (props) => {
|
||||
{
|
||||
[`${prefixCls}-checkable-checked`]: checked,
|
||||
},
|
||||
tag?.className,
|
||||
className,
|
||||
hashId,
|
||||
);
|
||||
|
||||
return wrapSSR(<span {...restProps} className={cls} onClick={handleClick} />);
|
||||
return wrapSSR(
|
||||
<span
|
||||
{...restProps}
|
||||
style={{
|
||||
...style,
|
||||
...tag?.style,
|
||||
}}
|
||||
className={cls}
|
||||
onClick={handleClick}
|
||||
/>,
|
||||
);
|
||||
};
|
||||
|
||||
export default CheckableTag;
|
||||
|
||||
@ -618,6 +618,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="10"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
@ -2424,6 +2425,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="10"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
|
||||
@ -629,6 +629,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="10"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
@ -1957,6 +1958,7 @@ Array [
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="10"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
|
||||
@ -40,7 +40,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
| delete | Deleted line style | boolean | false | |
|
||||
| disabled | Disabled content | boolean | false | |
|
||||
| editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | [editable](#editable) |
|
||||
| ellipsis | Display ellipsis when text overflows，can't configure expandable、rows and onExpand by using object. Diff with Typography.Paragraph, Text do not have 100% width style which means it will fix width on the first ellipsis. If you want to have responsive ellipsis, please set width manually | boolean \| [Omit<ellipsis, 'expandable' \| 'rows' \| 'onExpand'>](#ellipsis) | false | [ellipsis](#ellipsis) |
|
||||
| ellipsis | Display ellipsis when text overflows, can't configure expandable、rows and onExpand by using object. Diff with Typography.Paragraph, Text do not have 100% width style which means it will fix width on the first ellipsis. If you want to have responsive ellipsis, please set width manually | boolean \| [Omit<ellipsis, 'expandable' \| 'rows' \| 'onExpand'>](#ellipsis) | false | [ellipsis](#ellipsis) |
|
||||
| keyboard | Keyboard style | boolean | false | 4.3.0 |
|
||||
| mark | Marked style | boolean | false | |
|
||||
| onClick | Set the handler to handle click event | (event) => void | - | |
|
||||
|
||||
@ -50,7 +50,7 @@ demo:
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - | |
|
||||
| accept | 接受上传的文件类型，详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - | |
|
||||
| action | 上传的地址 | string \| (file) => Promise<string> | - | |
|
||||
| beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 `File` 或 `Blob` 对象则上传 resolve 传入对象）；也可以返回 `Upload.LIST_IGNORE`，此时列表中将不展示此文件。 **注意：IE9 不支持该方法** | (file, fileList) => boolean \| Promise<File> \| `Upload.LIST_IGNORE` | - | |
|
||||
| customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | function | - | |
|
||||
|
||||
@ -543,6 +543,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="16"
|
||||
@ -617,6 +618,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="11"
|
||||
@ -691,6 +693,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="180"
|
||||
aria-valuemin="-180"
|
||||
aria-valuenow="-22"
|
||||
|
||||
@ -170,6 +170,7 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="16"
|
||||
@ -225,6 +226,7 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="11"
|
||||
@ -280,6 +282,7 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="180"
|
||||
aria-valuemin="-180"
|
||||
aria-valuenow="-22"
|
||||
|
||||
@ -115,7 +115,7 @@ Ant Design 团队非常鼓励社区参与 Pull Request (PR)，可以先阅读 [
|
||||
|
||||
团队对于单元测试的态度非常谨慎，需要考虑组件在 React 的各个主要版本上的运行情况（通常为 16、17 和 18 这三个版本）如果是主分支的更新，还需要考虑项目构建产物（通常为 `dist`、`es` 以及 `lib`）在三个 React 版本上的运行情况。目前已知 Ant Design 所有组件共有 4000 多个测试用例。为了进一步提高测试效率，我们还搭建了分布式测试环境。
|
||||
|
||||
所有这些功能都得益于 GitHub Action 的 [Job 矩阵策略](https://docs.github.com/zh/actions/using-jobs/using-a-matrix-for-your-jobs) ，使得我们可以一次性配置多个 Job 来执行测试任务, [Normal test](https://github.com/ant-design/ant-design/blob/40fb753349c4f2be314c91dbb7e6f1a960097c19/.github/workflows/test.yml#L141-L223) 和 [Module test](https://github.com/ant-design/ant-design/blob/40fb753349c4f2be314c91dbb7e6f1a960097c19/.github/workflows/test.yml#L294-L357) 是 Ant Design 利用矩阵策略测试相关的 Job。
|
||||
所有这些功能都得益于 GitHub Action 的 [Job 矩阵策略](https://docs.github.com/zh/actions/using-jobs/using-a-matrix-for-your-jobs) ，使得我们可以一次性配置多个 Job 来执行测试任务，[Normal test](https://github.com/ant-design/ant-design/blob/40fb753349c4f2be314c91dbb7e6f1a960097c19/.github/workflows/test.yml#L141-L223) 和 [Module test](https://github.com/ant-design/ant-design/blob/40fb753349c4f2be314c91dbb7e6f1a960097c19/.github/workflows/test.yml#L294-L357) 是 Ant Design 利用矩阵策略测试相关的 Job。
|
||||
|
||||
## 网站部署
|
||||
|
||||
@ -224,7 +224,7 @@ jobs:
|
||||
|
||||
### 添加缓存
|
||||
|
||||
为了进一步优化安装依赖速度，我们可以添加 pnpm 缓存, 然后发起一个 Pull Request 验证上一个步骤：
|
||||
为了进一步优化安装依赖速度，我们可以添加 pnpm 缓存，然后发起一个 Pull Request 验证上一个步骤：
|
||||
|
||||
```yml
|
||||
# ...
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 快乐工作主题(一)
|
||||
title: 快乐工作主题（一）
|
||||
date: 2023-08-04
|
||||
author: zombieJ
|
||||
---
|
||||
|
||||
@ -4,7 +4,7 @@ date: 2022-12-20
|
||||
author: li-jia-nan,zombieJ
|
||||
---
|
||||
|
||||
大家好，我是 **[@li-jia-nan](https://github.com/li-jia-nan)**。也是前几个月新加入 antd 的 Collaborator, 有幸作为 Collaborators 之一，我开发了 **[FloatButton](/components/float-button-cn)** 组件和 **[QRCode](/components/qrcode-cn)** 组件，以及一些其它维护工作，下面分享一下 antd 测试库迁移的那些事儿～
|
||||
大家好，我是 **[@li-jia-nan](https://github.com/li-jia-nan)**。也是前几个月新加入 antd 的 Collaborator，有幸作为 Collaborators 之一，我开发了 **[FloatButton](/components/float-button-cn)** 组件和 **[QRCode](/components/qrcode-cn)** 组件，以及一些其它维护工作，下面分享一下 antd 测试库迁移的那些事儿～
|
||||
|
||||
## 引言
|
||||
|
||||
|
||||
@ -55,7 +55,7 @@ The core team is monitoring for pull requests. We will review your pull request
|
||||
3. If you've fixed a bug or added code that should be tested, add tests!
|
||||
4. Ensure the test suite passes (npm run test). Tip: `npm test -- --watch TestName` is helpful in development.
|
||||
5. Run `npm test -- -u` to update the [jest snapshots](https://jestjs.io/docs/snapshot-testing) and commit these changes as well (if there are any updates).
|
||||
6. Ensure the UI change passes `npm run test-image`，Run `npm run test-image -- -u` to update UI snapshots and commit these changes as well (if there are any updates), **UI test base on [Docker](https://docs.docker.com/get-docker/), need download the corresponding installation according to the platform**
|
||||
6. Ensure the UI change passes `npm run test-image`, Run `npm run test-image -- -u` to update UI snapshots and commit these changes as well (if there are any updates), **UI test base on [Docker](https://docs.docker.com/get-docker/), need download the corresponding installation according to the platform**
|
||||
7. Make sure your code lints (npm run lint). Tip: Lint runs automatically when you `git commit` (Use [Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)).
|
||||
8. Finally, please make sure that all GitHub CI checks pass, if they fail, you can click `detail` to enter the details to view the reason.
|
||||
|
||||
|
||||
@ -157,7 +157,7 @@ In a real world development, you may need a `YearPicker`, `MonthRangePicker` or
|
||||
|
||||
Like [the explanation](https://github.com/ant-design/ant-design/issues/11586#issuecomment-429189877) explains, this is because `<DatePicker mode="year" />` does not equal the `YearPicker`, nor is `<RangePicker mode="month" />` equal to `MonthRangePicker`. The `mode` property was added to support [showing time picker panel in DatePicker](https://github.com/ant-design/ant-design/issues/5190) in antd 3.0, which simply controls the displayed panel, and won't change the original date picking behavior of `DatePicker`/`RangePicker` (for instance you will still need to click date cell to finish selection in a `DatePicker`, whatever the `mode` is).
|
||||
|
||||
Likewise，`disabledDate` [cannot work on year/month panels](https://github.com/ant-design/ant-design/issues/9008#issuecomment-358554118) of `<DatePicker mode="year/month" />`, but only on cells of date panel.
|
||||
Likewise, `disabledDate` [cannot work on year/month panels](https://github.com/ant-design/ant-design/issues/9008#issuecomment-358554118) of `<DatePicker mode="year/month" />`, but only on cells of date panel.
|
||||
|
||||
### Workaround
|
||||
|
||||
|
||||
@ -75,6 +75,7 @@ The following languages are currently supported:
|
||||
| Malayalam (India) | ml_IN |
|
||||
| Mongolian | mn_MN |
|
||||
| Malay (Malaysia) | ms_MY |
|
||||
| Burmese | my_MM |
|
||||
| Norwegian | nb_NO |
|
||||
| Nepal | ne_NP |
|
||||
| Dutch (Belgium) | nl_BE |
|
||||
@ -99,7 +100,6 @@ The following languages are currently supported:
|
||||
| Chinese (Simplified) | zh_CN |
|
||||
| Chinese (Traditional) | zh_HK |
|
||||
| Chinese (Traditional) | zh_TW |
|
||||
| Burmese | my_MM |
|
||||
|
||||
See more usage at [ConfigProvider](/components/config-provider).
|
||||
|
||||
|
||||
@ -72,6 +72,7 @@ return (
|
||||
| 马拉雅拉姆语 | ml_IN |
|
||||
| 蒙古语 | mn_MN |
|
||||
| 马来语 (马来西亚) | ms_MY |
|
||||
| 缅甸语 | my_MM |
|
||||
| 挪威语 | nb_NO |
|
||||
| 尼泊尔语 | ne_NP |
|
||||
| 荷兰语（比利时） | nl_BE |
|
||||
@ -96,7 +97,6 @@ return (
|
||||
| 简体中文 | zh_CN |
|
||||
| 繁体中文（中国香港） | zh_HK |
|
||||
| 繁体中文（中国台湾） | zh_TW |
|
||||
| 缅甸语 | my_MM |
|
||||
|
||||
具体的使用方法请参考 [ConfigProvider 文档](/components/config-provider-cn)。
|
||||
|
||||
|
||||
@ -878,7 +878,7 @@ export default App;
|
||||
| `@tooltip-bg` | `colorBgSpotlight` | Global Token |
|
||||
| `@tooltip-arrow-width` | `sizePopupArrow` | Global Token |
|
||||
| `@tooltip-distance` | `marginXXS` | Global Token |
|
||||
| `@tooltip-arrow-color` | - | same as `@tooltip-bg`，Deprecated |
|
||||
| `@tooltip-arrow-color` | - | same as `@tooltip-bg`, Deprecated |
|
||||
| `@tooltip-border-radius` | `borderRadius` | Global Token |
|
||||
|
||||
### Transfer
|
||||
|
||||
@ -33,8 +33,9 @@ Now we install `antd` from yarn or npm or pnpm.
|
||||
Modify `src/app/page.tsx`, import Button component from `antd`.
|
||||
|
||||
```jsx
|
||||
'use client'; // If used in Pages Router, is no need to add this line
|
||||
'use client';
|
||||
|
||||
// If used in Pages Router, is no need to add this line
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
|
||||
@ -51,7 +52,7 @@ OK, you should now see a blue primary button displayed on the page. Next you can
|
||||
|
||||
We are successfully running antd components now, go build your own application!
|
||||
|
||||
## Use the Pages Router of Next.js
|
||||
## Using Pages Router
|
||||
|
||||
If you are using the Pages Router in Next.js and using antd as your component library, to make the antd component library work better in your Next.js application and provide a better user experience, you can try using the following method to extract and inject antd's first-screen styles into HTML to avoid page flicker.
|
||||
|
||||
@ -63,7 +64,7 @@ If you are using the Pages Router in Next.js and using antd as your component li
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
|
||||
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
|
||||
import Document, { Head, Html, Main, NextScript } from 'next/document';
|
||||
import type { DocumentContext } from 'next/document';
|
||||
|
||||
@ -127,6 +128,7 @@ export default theme;
|
||||
import React from 'react';
|
||||
import { ConfigProvider } from 'antd';
|
||||
import type { AppProps } from 'next/app';
|
||||
|
||||
import theme from './themeConfig';
|
||||
|
||||
const App = ({ Component, pageProps }: AppProps) => (
|
||||
@ -155,7 +157,7 @@ export default Home;
|
||||
|
||||
For more detailed information, please refer to [with-nextjs-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style).
|
||||
|
||||
## Using Next.js App Router
|
||||
## Using App Router
|
||||
|
||||
If you are using the App Router in Next.js and using antd as your component library, to make the antd component library work better in your Next.js application and provide a better user experience, you can try using the following method to extract and inject antd's first-screen styles into HTML to avoid page flicker.
|
||||
|
||||
@ -169,9 +171,9 @@ If you are using the App Router in Next.js and using antd as your component libr
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
|
||||
import { useServerInsertedHTML } from 'next/navigation';
|
||||
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
|
||||
import type Entity from '@ant-design/cssinjs/es/Cache';
|
||||
import { useServerInsertedHTML } from 'next/navigation';
|
||||
|
||||
const StyledComponentsRegistry = ({ children }: { children: React.ReactNode }) => {
|
||||
const cache = React.useMemo<Entity>(() => createCache(), [createCache]);
|
||||
@ -189,7 +191,9 @@ export default StyledComponentsRegistry;
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { Inter } from 'next/font/google';
|
||||
|
||||
import StyledComponentsRegistry from '../lib/AntdRegistry';
|
||||
|
||||
import '@/globals.css';
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] });
|
||||
@ -231,6 +235,7 @@ export default theme;
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { Button, ConfigProvider } from 'antd';
|
||||
|
||||
import theme from './themeConfig';
|
||||
|
||||
const HomePage = () => (
|
||||
|
||||
@ -33,8 +33,9 @@ $ npm run dev
|
||||
修改 `src/app/page.tsx`，引入 antd 的按钮组件。
|
||||
|
||||
```jsx
|
||||
'use client'; // 如果是在 Pages Router 中使用，则不需要加这行
|
||||
'use client';
|
||||
|
||||
// 如果是在 Pages Router 中使用，则不需要加这行
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
|
||||
@ -51,7 +52,7 @@ export default Home;
|
||||
|
||||
我们现在已经把 antd 组件成功运行起来了，开始开发你的应用吧！
|
||||
|
||||
## 使用 Next.js 的 Pages Router
|
||||
## 使用 Pages Router
|
||||
|
||||
如果你在 Next.js 当中使用了 Pages Router, 并使用 antd 作为页面组件库，为了让 antd 组件库在你的 Next.js 应用中能够更好的工作，提供更好的用户体验，你可以尝试使用下面的方式将 antd 首屏样式按需抽离并植入到 HTML 中，以避免页面闪动的情况。
|
||||
|
||||
@ -63,7 +64,7 @@ export default Home;
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
|
||||
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
|
||||
import Document, { Head, Html, Main, NextScript } from 'next/document';
|
||||
import type { DocumentContext } from 'next/document';
|
||||
|
||||
@ -127,6 +128,7 @@ export default theme;
|
||||
import React from 'react';
|
||||
import { ConfigProvider } from 'antd';
|
||||
import type { AppProps } from 'next/app';
|
||||
|
||||
import theme from './themeConfig';
|
||||
|
||||
const App = ({ Component, pageProps }: AppProps) => (
|
||||
@ -155,7 +157,7 @@ export default Home;
|
||||
|
||||
更多详细的细节可以参考 [with-nextjs-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style)。
|
||||
|
||||
## 使用 Next.js 的 App Router
|
||||
## 使用 App Router
|
||||
|
||||
如果你在 Next.js 当中使用了 App Router, 并使用 antd 作为页面组件库，为了让 antd 组件库在你的 Next.js 应用中能够更好的工作，提供更好的用户体验，你可以尝试使用下面的方式将 antd 首屏样式按需抽离并植入到 HTML 中，以避免页面闪动的情况。
|
||||
|
||||
@ -169,9 +171,9 @@ export default Home;
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
|
||||
import { useServerInsertedHTML } from 'next/navigation';
|
||||
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
|
||||
import type Entity from '@ant-design/cssinjs/es/Cache';
|
||||
import { useServerInsertedHTML } from 'next/navigation';
|
||||
|
||||
const StyledComponentsRegistry = ({ children }: { children: React.ReactNode }) => {
|
||||
const cache = React.useMemo<Entity>(() => createCache(), [createCache]);
|
||||
@ -189,7 +191,9 @@ export default StyledComponentsRegistry;
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { Inter } from 'next/font/google';
|
||||
|
||||
import StyledComponentsRegistry from '../lib/AntdRegistry';
|
||||
|
||||
import '@/globals.css';
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] });
|
||||
@ -231,6 +235,7 @@ export default theme;
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { Button, ConfigProvider } from 'antd';
|
||||
|
||||
import theme from './themeConfig';
|
||||
|
||||
const HomePage = () => (
|
||||
|
||||
@ -55,7 +55,7 @@ We suggest the following formats:
|
||||
| Format | How and when to use | Examples |
|
||||
| --- | --- | --- |
|
||||
| Year, month, day | In China `YYYY-MM-DD` format is used by default. | 2019-12-08 |
|
||||
| Terms | When a special term containing a date expressed with numbers，display a `.` between the month and the day, and quotation marks should be added before and after the term. | 6.1 children's day |
|
||||
| Terms | When a special term containing a date expressed with numbers, display a `.` between the month and the day, and quotation marks should be added before and after the term. | 6.1 children's day |
|
||||
| Date range | Put `~` or `-` between the date or time range (space is required before and after). | 2018-12-08 ~ 2019-12-07 |
|
||||
|
||||
**Time Format:**
|
||||
@ -77,7 +77,7 @@ To the users, the accuracy of time is not so important as the immediacy of the i
|
||||
| Less than 1 hour | N minutes ago |
|
||||
| Within 24 hours | N hours ago |
|
||||
| Longer than 24 hours | `MM-DD HH:MM`, e.g. "12-08 08:00" |
|
||||
| Longer than one year | `YYYY-MM-DD HH:MM`，e.g. "2019-12-08 08:00" |
|
||||
| Longer than one year | `YYYY-MM-DD HH:MM`, e.g. "2019-12-08 08:00" |
|
||||
|
||||
### Data Redaction
|
||||
|
||||
|
||||
@ -101,7 +101,7 @@ skip: true
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/ugeAGDXQQYkZIbCAGlIP.png">
|
||||
</ImagePreview>
|
||||
|
||||
步骤多于 2 步时使用, 但建议不超过 5 步，每阶段文字长度保持在 12 个字符以内。
|
||||
步骤多于 2 步时使用，但建议不超过 5 步，每阶段文字长度保持在 12 个字符以内。
|
||||
|
||||
### 竖向流程步骤条
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "5.8.5",
|
||||
"version": "5.8.6",
|
||||
"packageManager": "^npm@9.0.0",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"title": "Ant Design",
|
||||
@ -45,7 +45,7 @@
|
||||
"unpkg": "dist/antd.min.js",
|
||||
"typings": "es/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "husky install",
|
||||
"prepare": "is-ci || husky install",
|
||||
"api-collection": "antd-tools run api-collection",
|
||||
"authors": "ts-node --esm --project tsconfig.node.json scripts/generate-authors.ts",
|
||||
"build": "npm run compile && NODE_OPTIONS='--max-old-space-size=4096' npm run dist",
|
||||
@ -144,7 +144,7 @@
|
||||
"rc-resize-observer": "^1.2.0",
|
||||
"rc-segmented": "~2.2.0",
|
||||
"rc-select": "~14.8.0",
|
||||
"rc-slider": "~10.1.0",
|
||||
"rc-slider": "~10.2.1",
|
||||
"rc-steps": "~6.0.1",
|
||||
"rc-switch": "~4.1.0",
|
||||
"rc-table": "~7.33.1",
|
||||
@ -245,6 +245,7 @@
|
||||
"identity-obj-proxy": "^3.0.0",
|
||||
"immer": "^10.0.1",
|
||||
"inquirer": "^9.1.2",
|
||||
"is-ci": "^3.0.1",
|
||||
"isomorphic-fetch": "^3.0.0",
|
||||
"jest": "^29.4.1",
|
||||
"jest-axe": "^8.0.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user