mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
chore: merge master into feature
This commit is contained in:
lijianan
commit
4266517ddd
@ -25,10 +25,10 @@ const RESPONSIVE_SM = 1200;
|
|||||||
|
|
||||||
const locales = {
|
const locales = {
|
||||||
cn: {
|
cn: {
|
||||||
message:
|
message: '第十八届 D2 终端技术大会火热来袭，以技术会友，一起分享技术的乐趣。',
|
||||||
'语雀公益计划：大学生认证教育邮箱，即可免费获得语雀会员。语雀，支付宝匠心打造的在线文档平台。',
|
shortMessage: '第十八届 D2 终端技术大会火热来袭！',
|
||||||
shortMessage: '支付宝语雀 · 大学生公益计划火热进行中！',
|
more: '点击报名',
|
||||||
more: '了解更多',
|
link: 'https://d2.alibabatech.com/',
|
||||||
},
|
},
|
||||||
en: {
|
en: {
|
||||||
message: '',
|
message: '',
|
||||||
@ -366,26 +366,21 @@ const Header: React.FC = () => {
|
|||||||
</Popover>
|
</Popover>
|
||||||
)}
|
)}
|
||||||
{isZhCN && bannerVisible && (
|
{isZhCN && bannerVisible && (
|
||||||
<ConfigProvider theme={{ token: { colorInfoBg: '#daf5eb', colorTextBase: '#000' } }}>
|
<ConfigProvider theme={{ token: { colorInfoBg: '#ceebf9', colorTextBase: '#000' } }}>
|
||||||
<Alert
|
<Alert
|
||||||
className={styles.banner}
|
className={styles.banner}
|
||||||
message={
|
message={
|
||||||
<>
|
<>
|
||||||
<img
|
|
||||||
className={styles.icon}
|
|
||||||
src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
|
|
||||||
alt="yuque"
|
|
||||||
/>
|
|
||||||
<span>{isMobile ? locale.shortMessage : locale.message}</span>
|
<span>{isMobile ? locale.shortMessage : locale.message}</span>
|
||||||
<a
|
<a
|
||||||
className={styles.link}
|
className={styles.link}
|
||||||
href="https://www.yuque.com/yuque/blog/welfare-edu?source=antd"
|
href={locale.link}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
window.gtag?.('event', '点击', {
|
window.gtag?.('event', '点击', {
|
||||||
event_category: 'top_banner',
|
event_category: 'top_banner',
|
||||||
event_label: 'https://www.yuque.com/yuque/blog/welfare-edu?source=antd',
|
event_label: locale.link,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
4
.github/workflows/issue-labeled.yml
vendored
4
.github/workflows/issue-labeled.yml
vendored
@ -40,7 +40,9 @@ jobs:
|
|||||||
body: |
|
body: |
|
||||||
Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking codesandbox of [antd@5.x](https://u.ant.design/codesandbox-repro) or [antd@4.x](https://u.ant.design/codesandbox-repro-4x), or provide a minimal GitHub repository. Issues labeled by `Need Reproduce` will be closed if no activities in 3 days.
|
Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking codesandbox of [antd@5.x](https://u.ant.design/codesandbox-repro) or [antd@4.x](https://u.ant.design/codesandbox-repro-4x), or provide a minimal GitHub repository. Issues labeled by `Need Reproduce` will be closed if no activities in 3 days.
|
||||||
|
|
||||||
你好 @${{ github.event.issue.user.login }}, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 [antd@5.x](https://u.ant.design/codesandbox-repro) 或 [antd@4.x](https://u.ant.design/codesandbox-repro-4x) 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
|
你好 @${{ github.event.issue.user.login }}，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 [antd@5.x](https://u.ant.design/codesandbox-repro) 或 [antd@4.x](https://u.ant.design/codesandbox-repro-4x) 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
|
||||||
|
|
||||||
|
> [什么是最小化重现，为什么这是必需的？](https://github.com/ant-design/ant-design/wiki/%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%80%E5%B0%8F%E5%8C%96%E9%87%8D%E7%8E%B0%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%BF%99%E6%98%AF%E5%BF%85%E9%9C%80%E7%9A%84%EF%BC%9F)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
9
.github/workflows/pr-open-check.yml
vendored
9
.github/workflows/pr-open-check.yml
vendored
@ -19,10 +19,13 @@ jobs:
|
|||||||
refuse-issue-label: '🎱 Collaborate PR only'
|
refuse-issue-label: '🎱 Collaborate PR only'
|
||||||
need-creator-authority: 'write'
|
need-creator-authority: 'write'
|
||||||
comment: |
|
comment: |
|
||||||
Hi @${{ github.event.pull_request.user.login }}. The issue mentioned in this PR needs to be confirmed with the designer or core team. This PR is temporarily not accepted. Thank you again for your contribution! 😊
|
Hi @${{ github.event.pull_request.user.login }}. The issue mentioned in this PR needs to be confirmed with the designer or core team. Thank you for your contribution! 😊
|
||||||
|
|
||||||
你好 @${{ github.event.pull_request.user.login }}。这个 PR 提及的 issue 需要和设计师或核心团队进行确认，暂时不接受 PR，再次感谢你的贡献！😊
|
你好 @${{ github.event.pull_request.user.login }}。这个 PR 提及的 issue 需要和设计师或核心团队进行确认！感谢您的贡献！😊
|
||||||
close: true
|
close: false
|
||||||
|
reviewers: |
|
||||||
|
MadCcc
|
||||||
|
zombieJ
|
||||||
|
|
||||||
check-changelog:
|
check-changelog:
|
||||||
permissions:
|
permissions:
|
||||||
|
|||||||
@ -25,9 +25,7 @@ tag: vVERSION
|
|||||||
- 🐞 Fix Descriptions use `children` structure missing the Descriptions.Item `key` prop. [#45757](https://github.com/ant-design/ant-design/pull/45757)
|
- 🐞 Fix Descriptions use `children` structure missing the Descriptions.Item `key` prop. [#45757](https://github.com/ant-design/ant-design/pull/45757)
|
||||||
- 🐞 Fix Message that token specified in component scope not work. [#45721](https://github.com/ant-design/ant-design/pull/45721) [@MadCcc](https://github.com/MadCcc)
|
- 🐞 Fix Message that token specified in component scope not work. [#45721](https://github.com/ant-design/ant-design/pull/45721) [@MadCcc](https://github.com/MadCcc)
|
||||||
- 🐞 Fix Popconfirm not compatible with `visible` prop. [#45702](https://github.com/ant-design/ant-design/pull/45702) [@linhf123](https://github.com/linhf123)
|
- 🐞 Fix Popconfirm not compatible with `visible` prop. [#45702](https://github.com/ant-design/ant-design/pull/45702) [@linhf123](https://github.com/linhf123)
|
||||||
- Tag
|
- 🐞 Fix Tag default background color not correct. [#45711](https://github.com/ant-design/ant-design/pull/45711) [@kiner-tang](https://github.com/kiner-tang)
|
||||||
- 🐞 Fix Tag default background color not correct. [#45711](https://github.com/ant-design/ant-design/pull/45711) [@kiner-tang](https://github.com/kiner-tang)
|
|
||||||
- 🐞 Adjust Tag default background token to `colorBgContainer`. [#45700](https://github.com/ant-design/ant-design/pull/45700) [@kiner-tang](https://github.com/kiner-tang)
|
|
||||||
- 💄 Fix Notification that `style.width` not work. [#45681](https://github.com/ant-design/ant-design/pull/45681) [@MadCcc](https://github.com/MadCcc)
|
- 💄 Fix Notification that `style.width` not work. [#45681](https://github.com/ant-design/ant-design/pull/45681) [@MadCcc](https://github.com/MadCcc)
|
||||||
- 🐞 Fix App console unexpected attr warning when set `component=false`. [#45671](https://github.com/ant-design/ant-design/pull/45671) [@li-jia-nan](https://github.com/li-jia-nan)
|
- 🐞 Fix App console unexpected attr warning when set `component=false`. [#45671](https://github.com/ant-design/ant-design/pull/45671) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||||
- TypeScript
|
- TypeScript
|
||||||
|
|||||||
@ -25,9 +25,7 @@ tag: vVERSION
|
|||||||
- 🐞 修复 Descriptions 使用 `children` 结构语法糖时，会丢失 Descriptions.Item 的 `key` 的问题。[#45757](https://github.com/ant-design/ant-design/pull/45757)
|
- 🐞 修复 Descriptions 使用 `children` 结构语法糖时，会丢失 Descriptions.Item 的 `key` 的问题。[#45757](https://github.com/ant-design/ant-design/pull/45757)
|
||||||
- 🐞 修复 Message 组件在组件范围设置全局 `token` 无效的问题。[#45721](https://github.com/ant-design/ant-design/pull/45721) [@MadCcc](https://github.com/MadCcc)
|
- 🐞 修复 Message 组件在组件范围设置全局 `token` 无效的问题。[#45721](https://github.com/ant-design/ant-design/pull/45721) [@MadCcc](https://github.com/MadCcc)
|
||||||
- 🐞 修复 Popconfirm 不兼容 `visible` 的问题。[#45702](https://github.com/ant-design/ant-design/pull/45702) [@linhf123](https://github.com/linhf123)
|
- 🐞 修复 Popconfirm 不兼容 `visible` 的问题。[#45702](https://github.com/ant-design/ant-design/pull/45702) [@linhf123](https://github.com/linhf123)
|
||||||
- Tag
|
- 🐞 修复默认 Tag 的背景颜色不正确的问题。[#45711](https://github.com/ant-design/ant-design/pull/45711) [@kiner-tang](https://github.com/kiner-tang)
|
||||||
- 🐞 修复默认 Tag 的背景颜色不正确的问题。[#45711](https://github.com/ant-design/ant-design/pull/45711) [@kiner-tang](https://github.com/kiner-tang)
|
|
||||||
- 🐞 修改 Tag 的默认背景色 `token` 为 `colorBgContainer`。[#45700](https://github.com/ant-design/ant-design/pull/45700) [@kiner-tang](https://github.com/kiner-tang)
|
|
||||||
- 💄 修复 Notification 组件设置 `style.width` 无效的问题。[#45681](https://github.com/ant-design/ant-design/pull/45681) [@MadCcc](https://github.com/MadCcc)
|
- 💄 修复 Notification 组件设置 `style.width` 无效的问题。[#45681](https://github.com/ant-design/ant-design/pull/45681) [@MadCcc](https://github.com/MadCcc)
|
||||||
- 🐞 修复 App 设置 `component=false` 时，会报非预期的属性警告的问题。[#45671](https://github.com/ant-design/ant-design/pull/45671) [@li-jia-nan](https://github.com/li-jia-nan)
|
- 🐞 修复 App 设置 `component=false` 时，会报非预期的属性警告的问题。[#45671](https://github.com/ant-design/ant-design/pull/45671) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||||
- TypeScript
|
- TypeScript
|
||||||
|
|||||||
@ -32,13 +32,17 @@ Common props ref：[Common props](/docs/react/common-props)
|
|||||||
| Property | Description | Type | Default | Version |
|
| Property | Description | Type | Default | Version |
|
||||||
| --- | --- | --- | --- | --- |
|
| --- | --- | --- | --- | --- |
|
||||||
| autoplay | Whether to scroll automatically | boolean | false | |
|
| autoplay | Whether to scroll automatically | boolean | false | |
|
||||||
|
| autoplaySpeed | Delay between each auto scroll (in milliseconds) | number | 3000 | |
|
||||||
| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | `bottom` | |
|
| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | `bottom` | |
|
||||||
| dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \| { className?: string } | true | |
|
| dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \| { className?: string } | true | |
|
||||||
| waitForAnimate | Whether to wait for the animation when switching | boolean | false | |
|
| fade | Whether to use fade transition | boolean | false | |
|
||||||
|
| infinite | Infinitely wrap around contents | boolean | true | |
|
||||||
|
| speed | Animation speed in milliseconds | number | 500 | |
|
||||||
| easing | Transition interpolation function name | string | `linear` | |
|
| easing | Transition interpolation function name | string | `linear` | |
|
||||||
| effect | Transition effect | `scrollx` \| `fade` | `scrollx` | |
|
| effect | Transition effect | `scrollx` \| `fade` | `scrollx` | |
|
||||||
| afterChange | Callback function called after the current index changes | (current: number) => void | - | |
|
| afterChange | Callback function called after the current index changes | (current: number) => void | - | |
|
||||||
| beforeChange | Callback function called before the current index changes | (current: number, next: number) => void | - | |
|
| beforeChange | Callback function called before the current index changes | (current: number, next: number) => void | - | |
|
||||||
|
| waitForAnimate | Whether to wait for the animation when switching | boolean | false | |
|
||||||
|
|
||||||
## Methods
|
## Methods
|
||||||
|
|
||||||
|
|||||||
@ -33,13 +33,17 @@ demo:
|
|||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||||
| --- | --- | --- | --- | --- |
|
| --- | --- | --- | --- | --- |
|
||||||
| autoplay | 是否自动切换 | boolean | false | |
|
| autoplay | 是否自动切换 | boolean | false | |
|
||||||
|
| autoplaySpeed | 自动切换的间隔（毫秒） | number | 3000 | |
|
||||||
| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | `bottom` | |
|
| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | `bottom` | |
|
||||||
| dots | 是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?: string } | true | |
|
| dots | 是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?: string } | true | |
|
||||||
| waitForAnimate | 是否等待切换动画 | boolean | false | |
|
| fade | 使用渐变切换动效 | boolean | false | |
|
||||||
|
| infinite | 是否无限循环切换（实现方式是复制两份 children 元素，如果子元素有副作用则可能会引发 bug） | boolean | true | |
|
||||||
|
| speed | 切换动效的时间（毫秒） | number | 500 | |
|
||||||
| easing | 动画效果 | string | `linear` | |
|
| easing | 动画效果 | string | `linear` | |
|
||||||
| effect | 动画效果函数 | `scrollx` \| `fade` | `scrollx` | |
|
| effect | 动画效果函数 | `scrollx` \| `fade` | `scrollx` | |
|
||||||
| afterChange | 切换面板的回调 | (current: number) => void | - | |
|
| afterChange | 切换面板的回调 | (current: number) => void | - | |
|
||||||
| beforeChange | 切换面板的回调 | (current: number, next: number) => void | - | |
|
| beforeChange | 切换面板的回调 | (current: number, next: number) => void | - | |
|
||||||
|
| waitForAnimate | 是否等待切换动画 | boolean | false | |
|
||||||
|
|
||||||
## 方法
|
## 方法
|
||||||
|
|
||||||
|
|||||||
@ -232,7 +232,7 @@ const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
|
|||||||
fontSize: 0,
|
fontSize: 0,
|
||||||
background: token.colorBgContainer,
|
background: token.colorBgContainer,
|
||||||
border: 0,
|
border: 0,
|
||||||
borderRadius: 1,
|
borderRadius: token.dotHeight,
|
||||||
outline: 'none',
|
outline: 'none',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
opacity: 0.3,
|
opacity: 0.3,
|
||||||
|
|||||||
@ -7,6 +7,7 @@ import { responsiveArray } from '../_util/responsiveObserver';
|
|||||||
import { ConfigContext } from '../config-provider';
|
import { ConfigContext } from '../config-provider';
|
||||||
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
|
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
|
||||||
import { Row } from '../grid';
|
import { Row } from '../grid';
|
||||||
|
import type { RowProps } from '../grid';
|
||||||
import useBreakpoint from '../grid/hooks/useBreakpoint';
|
import useBreakpoint from '../grid/hooks/useBreakpoint';
|
||||||
import type { PaginationConfig } from '../pagination';
|
import type { PaginationConfig } from '../pagination';
|
||||||
import Pagination from '../pagination';
|
import Pagination from '../pagination';
|
||||||
@ -28,7 +29,7 @@ export type ColumnCount = number;
|
|||||||
export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
|
export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
|
||||||
|
|
||||||
export interface ListGridType {
|
export interface ListGridType {
|
||||||
gutter?: number;
|
gutter?: RowProps['gutter'];
|
||||||
column?: ColumnCount;
|
column?: ColumnCount;
|
||||||
xs?: ColumnCount;
|
xs?: ColumnCount;
|
||||||
sm?: ColumnCount;
|
sm?: ColumnCount;
|
||||||
|
|||||||
@ -1227,6 +1227,740 @@ exports[`renders components/menu/demo/component-token.tsx extend context correct
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark ant-menu-inline-collapsed"
|
||||||
|
data-menu-list="true"
|
||||||
|
role="menu"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-selected"
|
||||||
|
data-menu-id="rc-menu-uuid-test-1"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="pie-chart"
|
||||||
|
class="anticon anticon-pie-chart ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="pie-chart"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Option 1
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
>
|
||||||
|
Option 1
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item"
|
||||||
|
data-menu-id="rc-menu-uuid-test-2"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="desktop"
|
||||||
|
class="anticon anticon-desktop ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="desktop"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32zm-40 488H136V212h752v416z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Option 2
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
>
|
||||||
|
Option 2
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item"
|
||||||
|
data-menu-id="rc-menu-uuid-test-3"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="container"
|
||||||
|
class="anticon anticon-container ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="container"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-40 824H232V687h97.9c11.6 32.8 32 62.3 59.1 84.7 34.5 28.5 78.2 44.3 123 44.3s88.5-15.7 123-44.3c27.1-22.4 47.5-51.9 59.1-84.7H792v-63H643.6l-5.2 24.7C626.4 708.5 573.2 752 512 752s-114.4-43.5-126.5-103.3l-5.2-24.7H232V136h560v752zM320 341h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 160h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Option 3
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
>
|
||||||
|
Option 3
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-submenu ant-menu-submenu-vertical ant-menu-submenu-open"
|
||||||
|
role="none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-controls="rc-menu-uuid-test-sub1-popup"
|
||||||
|
aria-expanded="true"
|
||||||
|
aria-haspopup="true"
|
||||||
|
class="ant-menu-submenu-title"
|
||||||
|
data-menu-id="rc-menu-uuid-test-sub1"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="mail"
|
||||||
|
class="anticon anticon-mail ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="mail"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Navigation One
|
||||||
|
</span>
|
||||||
|
<i
|
||||||
|
class="ant-menu-submenu-arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-menu-submenu ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-menu-submenu-popup ant-menu ant-menu-dark ant-menu-submenu-placement-rightTop"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="ant-menu ant-menu-sub ant-menu-vertical"
|
||||||
|
data-menu-list="true"
|
||||||
|
id="rc-menu-uuid-test-sub1-popup"
|
||||||
|
role="menu"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-5"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Option 5
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-6"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Option 6
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-7"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Option 7
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-8"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Option 8
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-submenu ant-menu-submenu-vertical"
|
||||||
|
role="none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-controls="rc-menu-uuid-test-sub2-popup"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="true"
|
||||||
|
class="ant-menu-submenu-title"
|
||||||
|
data-menu-id="rc-menu-uuid-test-sub2"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="appstore"
|
||||||
|
class="anticon anticon-appstore ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="appstore"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Navigation Two
|
||||||
|
</span>
|
||||||
|
<i
|
||||||
|
class="ant-menu-submenu-arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-menu-submenu ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-menu-submenu-popup ant-menu ant-menu-dark ant-menu-submenu-placement-rightTop"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="ant-menu ant-menu-sub ant-menu-vertical"
|
||||||
|
data-menu-list="true"
|
||||||
|
id="rc-menu-uuid-test-sub2-popup"
|
||||||
|
role="menu"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-9"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Option 9
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-10"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Option 10
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-submenu ant-menu-submenu-vertical"
|
||||||
|
role="none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-controls="rc-menu-uuid-test-sub3-popup"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="true"
|
||||||
|
class="ant-menu-submenu-title"
|
||||||
|
data-menu-id="rc-menu-uuid-test-sub3"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Submenu
|
||||||
|
</span>
|
||||||
|
<i
|
||||||
|
class="ant-menu-submenu-arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-menu-submenu ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-menu-submenu-popup ant-menu ant-menu-dark ant-menu-submenu-placement-rightTop"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="ant-menu ant-menu-sub ant-menu-vertical"
|
||||||
|
data-menu-list="true"
|
||||||
|
id="rc-menu-uuid-test-sub3-popup"
|
||||||
|
role="menu"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-11"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Option 11
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-12"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Option 12
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
style="display: none;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
>
|
||||||
|
Option 1
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
>
|
||||||
|
Option 2
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
>
|
||||||
|
Option 3
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
@ -422,6 +422,191 @@ exports[`renders components/menu/demo/component-token.tsx correctly 1`] = `
|
|||||||
style="display:none"
|
style="display:none"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark ant-menu-inline-collapsed"
|
||||||
|
data-menu-list="true"
|
||||||
|
role="menu"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-selected"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="pie-chart"
|
||||||
|
class="anticon anticon-pie-chart ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="pie-chart"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Option 1
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="desktop"
|
||||||
|
class="anticon anticon-desktop ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="desktop"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32zm-40 488H136V212h752v416z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Option 2
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="container"
|
||||||
|
class="anticon anticon-container ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="container"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-40 824H232V687h97.9c11.6 32.8 32 62.3 59.1 84.7 34.5 28.5 78.2 44.3 123 44.3s88.5-15.7 123-44.3c27.1-22.4 47.5-51.9 59.1-84.7H792v-63H643.6l-5.2 24.7C626.4 708.5 573.2 752 512 752s-114.4-43.5-126.5-103.3l-5.2-24.7H232V136h560v752zM320 341h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 160h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Option 3
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-submenu ant-menu-submenu-vertical ant-menu-submenu-open"
|
||||||
|
role="none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-expanded="true"
|
||||||
|
aria-haspopup="true"
|
||||||
|
class="ant-menu-submenu-title"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="mail"
|
||||||
|
class="anticon anticon-mail ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="mail"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Navigation One
|
||||||
|
</span>
|
||||||
|
<i
|
||||||
|
class="ant-menu-submenu-arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-submenu ant-menu-submenu-vertical"
|
||||||
|
role="none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="true"
|
||||||
|
class="ant-menu-submenu-title"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="appstore"
|
||||||
|
class="anticon anticon-appstore ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="appstore"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Navigation Two
|
||||||
|
</span>
|
||||||
|
<i
|
||||||
|
class="ant-menu-submenu-arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
style="display:none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
import {
|
import {
|
||||||
AppstoreOutlined,
|
AppstoreOutlined,
|
||||||
ContainerOutlined,
|
ContainerOutlined,
|
||||||
@ -6,7 +7,6 @@ import {
|
|||||||
PieChartOutlined,
|
PieChartOutlined,
|
||||||
SettingOutlined,
|
SettingOutlined,
|
||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
import React, { useState } from 'react';
|
|
||||||
import type { MenuProps } from 'antd';
|
import type { MenuProps } from 'antd';
|
||||||
import { ConfigProvider, Menu, Space } from 'antd';
|
import { ConfigProvider, Menu, Space } from 'antd';
|
||||||
|
|
||||||
@ -120,6 +120,7 @@ const App: React.FC = () => {
|
|||||||
components: {
|
components: {
|
||||||
Menu: {
|
Menu: {
|
||||||
horizontalItemBorderRadius: 6,
|
horizontalItemBorderRadius: 6,
|
||||||
|
popupBg: 'red',
|
||||||
horizontalItemHoverBg: '#f5f5f5',
|
horizontalItemHoverBg: '#f5f5f5',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -136,6 +137,7 @@ const App: React.FC = () => {
|
|||||||
darkSubMenuItemBg: '#faad14',
|
darkSubMenuItemBg: '#faad14',
|
||||||
darkItemSelectedColor: '#ffccc7',
|
darkItemSelectedColor: '#ffccc7',
|
||||||
darkItemSelectedBg: '#52c41a',
|
darkItemSelectedBg: '#52c41a',
|
||||||
|
darkPopupBg: 'red',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
@ -151,6 +153,24 @@ const App: React.FC = () => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</ConfigProvider>
|
</ConfigProvider>
|
||||||
|
<ConfigProvider
|
||||||
|
theme={{
|
||||||
|
components: {
|
||||||
|
Menu: {
|
||||||
|
darkPopupBg: 'red',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Menu
|
||||||
|
inlineCollapsed
|
||||||
|
defaultSelectedKeys={['1']}
|
||||||
|
defaultOpenKeys={['sub1']}
|
||||||
|
mode="inline"
|
||||||
|
theme="dark"
|
||||||
|
items={items2}
|
||||||
|
/>
|
||||||
|
</ConfigProvider>
|
||||||
</Space>
|
</Space>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,6 +1,9 @@
|
|||||||
import { unit, type CSSObject } from '@ant-design/cssinjs';
|
|
||||||
import { TinyColor } from '@ctrl/tinycolor';
|
|
||||||
import type { CSSProperties } from 'react';
|
import type { CSSProperties } from 'react';
|
||||||
|
import { unit } from '@ant-design/cssinjs';
|
||||||
|
import type { CSSObject } from '@ant-design/cssinjs';
|
||||||
|
import { TinyColor } from '@ctrl/tinycolor';
|
||||||
|
import type { CssUtil } from 'antd-style';
|
||||||
|
|
||||||
import { clearFix, resetComponent, resetIcon } from '../../style';
|
import { clearFix, resetComponent, resetIcon } from '../../style';
|
||||||
import { genCollapseMotion, initSlideMotion, initZoomMotion } from '../../style/motion';
|
import { genCollapseMotion, initSlideMotion, initZoomMotion } from '../../style/motion';
|
||||||
import type {
|
import type {
|
||||||
@ -14,7 +17,6 @@ import getHorizontalStyle from './horizontal';
|
|||||||
import getRTLStyle from './rtl';
|
import getRTLStyle from './rtl';
|
||||||
import getThemeStyle from './theme';
|
import getThemeStyle from './theme';
|
||||||
import getVerticalStyle from './vertical';
|
import getVerticalStyle from './vertical';
|
||||||
import type { CssUtil } from 'antd-style';
|
|
||||||
|
|
||||||
/** Component only token. Which will handle additional calculation of alias token */
|
/** Component only token. Which will handle additional calculation of alias token */
|
||||||
export interface ComponentToken {
|
export interface ComponentToken {
|
||||||
@ -293,6 +295,12 @@ export interface ComponentToken {
|
|||||||
collapsedIconSize: number;
|
collapsedIconSize: number;
|
||||||
|
|
||||||
// Dark
|
// Dark
|
||||||
|
/**
|
||||||
|
* @desc 暗色模式下的浮层菜单的背景颜色
|
||||||
|
* @descEN The background color of the overlay menu in dark mode.
|
||||||
|
*/
|
||||||
|
darkPopupBg: string;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @desc 暗色模式下的菜单项文字颜色
|
* @desc 暗色模式下的菜单项文字颜色
|
||||||
* @descEN Color of menu item text in dark mode
|
* @descEN Color of menu item text in dark mode
|
||||||
@ -915,6 +923,7 @@ export const prepareComponentToken: GetDefaultToken<'Menu'> = (token) => {
|
|||||||
darkItemColor: colorTextDark,
|
darkItemColor: colorTextDark,
|
||||||
darkDangerItemColor: colorError,
|
darkDangerItemColor: colorError,
|
||||||
darkItemBg: '#001529',
|
darkItemBg: '#001529',
|
||||||
|
darkPopupBg: '#001529',
|
||||||
darkSubMenuItemBg: '#000c17',
|
darkSubMenuItemBg: '#000c17',
|
||||||
darkItemSelectedColor: colorTextLightSolid,
|
darkItemSelectedColor: colorTextLightSolid,
|
||||||
darkItemSelectedBg: colorPrimary,
|
darkItemSelectedBg: colorPrimary,
|
||||||
@ -949,6 +958,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
|
|||||||
darkItemColor,
|
darkItemColor,
|
||||||
darkDangerItemColor,
|
darkDangerItemColor,
|
||||||
darkItemBg,
|
darkItemBg,
|
||||||
|
darkPopupBg,
|
||||||
darkSubMenuItemBg,
|
darkSubMenuItemBg,
|
||||||
darkItemSelectedColor,
|
darkItemSelectedColor,
|
||||||
darkItemSelectedBg,
|
darkItemSelectedBg,
|
||||||
@ -984,7 +994,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
|
|||||||
groupTitleColor: darkGroupTitleColor,
|
groupTitleColor: darkGroupTitleColor,
|
||||||
itemSelectedColor: darkItemSelectedColor,
|
itemSelectedColor: darkItemSelectedColor,
|
||||||
itemBg: darkItemBg,
|
itemBg: darkItemBg,
|
||||||
popupBg: darkItemBg,
|
popupBg: darkPopupBg || darkItemBg,
|
||||||
subMenuItemBg: darkSubMenuItemBg,
|
subMenuItemBg: darkSubMenuItemBg,
|
||||||
itemActiveBg: 'transparent',
|
itemActiveBg: 'transparent',
|
||||||
itemSelectedBg: darkItemSelectedBg,
|
itemSelectedBg: darkItemSelectedBg,
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import { unit, type CSSInterpolation } from '@ant-design/cssinjs';
|
import { unit } from '@ant-design/cssinjs';
|
||||||
|
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
||||||
|
|
||||||
import type { MenuToken } from '.';
|
import type { MenuToken } from '.';
|
||||||
import { genFocusOutline } from '../../style';
|
import { genFocusOutline } from '../../style';
|
||||||
@ -159,6 +160,10 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
|||||||
backgroundColor: menuSubMenuBg,
|
backgroundColor: menuSubMenuBg,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
[`&${componentCls}-submenu-popup > ${componentCls}`]: {
|
||||||
|
backgroundColor: popupBg,
|
||||||
|
},
|
||||||
|
|
||||||
[`&${componentCls}-popup > ${componentCls}`]: {
|
[`&${componentCls}-popup > ${componentCls}`]: {
|
||||||
backgroundColor: popupBg,
|
backgroundColor: popupBg,
|
||||||
},
|
},
|
||||||
|
|||||||
@ -32,9 +32,8 @@ Array [
|
|||||||
style="width: 160px; height: 160px; background-color: transparent;"
|
style="width: 160px; height: 160px; background-color: transparent;"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height: 134px; width: 134px;"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -58,9 +57,8 @@ exports[`renders components/qr-code/demo/base.tsx extend context correctly 1`] =
|
|||||||
style="width: 160px; height: 160px; background-color: transparent;"
|
style="width: 160px; height: 160px; background-color: transparent;"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height: 134px; width: 134px;"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -92,9 +90,8 @@ exports[`renders components/qr-code/demo/customColor.tsx extend context correctl
|
|||||||
style="width: 160px; height: 160px; background-color: transparent;"
|
style="width: 160px; height: 160px; background-color: transparent;"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height: 134px; width: 134px;"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -106,9 +103,8 @@ exports[`renders components/qr-code/demo/customColor.tsx extend context correctl
|
|||||||
style="width: 160px; height: 160px; background-color: rgb(245, 245, 245);"
|
style="width: 160px; height: 160px; background-color: rgb(245, 245, 245);"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height: 134px; width: 134px;"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -194,9 +190,8 @@ Array [
|
|||||||
style="width: 160px; height: 160px; background-color: transparent;"
|
style="width: 160px; height: 160px; background-color: transparent;"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height: 134px; width: 134px;"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
||||||
@ -217,9 +212,8 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1
|
|||||||
style="margin-bottom: 16px; width: 160px; height: 160px; background-color: rgb(255, 255, 255);"
|
style="margin-bottom: 16px; width: 160px; height: 160px; background-color: rgb(255, 255, 255);"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height: 134px; width: 134px;"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
@ -242,9 +236,8 @@ Array [
|
|||||||
style="margin-bottom: 16px; width: 160px; height: 160px; background-color: transparent;"
|
style="margin-bottom: 16px; width: 160px; height: 160px; background-color: transparent;"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height: 134px; width: 134px;"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>,
|
</div>,
|
||||||
<div
|
<div
|
||||||
@ -323,9 +316,8 @@ exports[`renders components/qr-code/demo/icon.tsx extend context correctly 1`] =
|
|||||||
style="width: 160px; height: 160px; background-color: transparent;"
|
style="width: 160px; height: 160px; background-color: transparent;"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height: 134px; width: 134px;"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
||||||
@ -375,9 +367,8 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height: 134px; width: 134px;"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -429,9 +420,8 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height: 134px; width: 134px;"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -452,9 +442,8 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
|
|||||||
style="width: 160px; height: 160px; background-color: transparent;"
|
style="width: 160px; height: 160px; background-color: transparent;"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height: 134px; width: 134px;"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -466,9 +455,9 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
|
|||||||
style="width: 160px; height: 160px; background-color: transparent;"
|
style="width: 160px; height: 160px; background-color: transparent;"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
height="134"
|
height="160"
|
||||||
viewBox="0 0 25 25"
|
viewBox="0 0 25 25"
|
||||||
width="134"
|
width="160"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M0,0 h25v25H0z"
|
d="M0,0 h25v25H0z"
|
||||||
|
|||||||
@ -21,9 +21,8 @@ exports[`renders components/qr-code/demo/base.tsx correctly 1`] = `
|
|||||||
style="width:160px;height:160px;background-color:transparent"
|
style="width:160px;height:160px;background-color:transparent"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height:134px;width:134px"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -53,9 +52,8 @@ exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = `
|
|||||||
style="width:160px;height:160px;background-color:transparent"
|
style="width:160px;height:160px;background-color:transparent"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height:134px;width:134px"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -67,9 +65,8 @@ exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = `
|
|||||||
style="width:160px;height:160px;background-color:#f5f5f5"
|
style="width:160px;height:160px;background-color:#f5f5f5"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height:134px;width:134px"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -153,9 +150,8 @@ Array [
|
|||||||
style="width:160px;height:160px;background-color:transparent"
|
style="width:160px;height:160px;background-color:transparent"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height:134px;width:134px"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
||||||
@ -174,9 +170,8 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
|
|||||||
style="margin-bottom:16px;width:160px;height:160px;background-color:#fff"
|
style="margin-bottom:16px;width:160px;height:160px;background-color:#fff"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height:134px;width:134px"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
@ -197,9 +192,8 @@ Array [
|
|||||||
style="margin-bottom:16px;width:160px;height:160px;background-color:transparent"
|
style="margin-bottom:16px;width:160px;height:160px;background-color:transparent"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height:134px;width:134px"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>,
|
</div>,
|
||||||
<div
|
<div
|
||||||
@ -276,9 +270,8 @@ exports[`renders components/qr-code/demo/icon.tsx correctly 1`] = `
|
|||||||
style="width:160px;height:160px;background-color:transparent"
|
style="width:160px;height:160px;background-color:transparent"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height:134px;width:134px"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
||||||
@ -326,9 +319,8 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height:134px;width:134px"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -380,9 +372,8 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height:134px;width:134px"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -401,9 +392,8 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
|
|||||||
style="width:160px;height:160px;background-color:transparent"
|
style="width:160px;height:160px;background-color:transparent"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height:134px;width:134px"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -415,9 +405,9 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
|
|||||||
style="width:160px;height:160px;background-color:transparent"
|
style="width:160px;height:160px;background-color:transparent"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
height="134"
|
height="160"
|
||||||
viewBox="0 0 25 25"
|
viewBox="0 0 25 25"
|
||||||
width="134"
|
width="160"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M0,0 h25v25H0z"
|
d="M0,0 h25v25H0z"
|
||||||
|
|||||||
@ -9,9 +9,8 @@ exports[`QRCode test should correct render 1`] = `
|
|||||||
style="width: 160px; height: 160px; background-color: transparent;"
|
style="width: 160px; height: 160px; background-color: transparent;"
|
||||||
>
|
>
|
||||||
<canvas
|
<canvas
|
||||||
height="134"
|
height="160"
|
||||||
style="height: 134px; width: 134px;"
|
width="160"
|
||||||
width="134"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -39,9 +39,7 @@ describe('QRCode test', () => {
|
|||||||
|
|
||||||
it('support custom size', () => {
|
it('support custom size', () => {
|
||||||
const { container } = render(<QRCode value="test" size={100} />);
|
const { container } = render(<QRCode value="test" size={100} />);
|
||||||
const wrapper = container.querySelector<HTMLDivElement>('.ant-qrcode');
|
expect(container.querySelector('.ant-qrcode')).toHaveStyle('width: 100px; height: 100px');
|
||||||
expect(wrapper?.style?.width).toBe('100px');
|
|
||||||
expect(wrapper?.style?.height).toBe('100px');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('support refresh', () => {
|
it('support refresh', () => {
|
||||||
|
|||||||
@ -43,7 +43,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
|||||||
| value | scanned text | string | - |
|
| value | scanned text | string | - |
|
||||||
| type | render type | `canvas \| svg ` | `canvas` | 5.6.0 |
|
| type | render type | `canvas \| svg ` | `canvas` | 5.6.0 |
|
||||||
| icon | include image url (only image link are supported) | string | - |
|
| icon | include image url (only image link are supported) | string | - |
|
||||||
| size | QRCode size | number | 128 |
|
| size | QRCode size | number | 160 |
|
||||||
| iconSize | include image size | number | 32 |
|
| iconSize | include image size | number | 32 |
|
||||||
| color | QRCode Color | string | `#000` |
|
| color | QRCode Color | string | `#000` |
|
||||||
| bgColor | QRCode Background Color | string | `transparent` | 5.5.0 |
|
| bgColor | QRCode Background Color | string | `transparent` | 5.5.0 |
|
||||||
|
|||||||
@ -47,10 +47,11 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
|
|||||||
|
|
||||||
const qrCodeProps = {
|
const qrCodeProps = {
|
||||||
value,
|
value,
|
||||||
size: size - (token.paddingSM + token.lineWidth) * 2,
|
size,
|
||||||
level: errorLevel,
|
level: errorLevel,
|
||||||
bgColor,
|
bgColor,
|
||||||
fgColor: color,
|
fgColor: color,
|
||||||
|
style: { width: undefined, height: undefined },
|
||||||
imageSettings: icon ? imageSettings : undefined,
|
imageSettings: icon ? imageSettings : undefined,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -22,9 +22,8 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
|
|||||||
borderRadius: token.borderRadiusLG,
|
borderRadius: token.borderRadiusLG,
|
||||||
border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
|
border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
|
|
||||||
[`& > ${componentCls}-mask`]: {
|
[`& > ${componentCls}-mask`]: {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
insetBlockStart: 0,
|
insetBlockStart: 0,
|
||||||
@ -44,6 +43,13 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
|
|||||||
color: token.QRCodeExpiredTextColor,
|
color: token.QRCodeExpiredTextColor,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
'> canvas': {
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
flex: 'auto',
|
||||||
|
minWidth: 0,
|
||||||
|
},
|
||||||
|
|
||||||
'&-icon': {
|
'&-icon': {
|
||||||
marginBlockEnd: token.marginXS,
|
marginBlockEnd: token.marginXS,
|
||||||
fontSize: token.controlHeight,
|
fontSize: token.controlHeight,
|
||||||
|
|||||||
@ -54,4 +54,8 @@ describe('Radio', () => {
|
|||||||
);
|
);
|
||||||
expect(getByRole('radio')).not.toBeDisabled();
|
expect(getByRole('radio')).not.toBeDisabled();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('have static property for type detecting', () => {
|
||||||
|
expect(Radio.__ANT_RADIO).toBeTruthy();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -63,4 +63,8 @@ describe('Switch', () => {
|
|||||||
// uncontrolled component, so false after click
|
// uncontrolled component, so false after click
|
||||||
expect(getByRole('switch')).not.toBeChecked();
|
expect(getByRole('switch')).not.toBeChecked();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('have static property for type detecting', () => {
|
||||||
|
expect(Switch.__ANT_SWITCH).toBeTruthy();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -16,13 +16,14 @@ There are two options for server-side rendering styles, each with advantages and
|
|||||||
Use `@ant-design/cssinjs` to extract style:
|
Use `@ant-design/cssinjs` to extract style:
|
||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
|
import React from 'react';
|
||||||
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
|
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
|
||||||
|
import type Entity from '@ant-design/cssinjs/es/Cache';
|
||||||
import { renderToString } from 'react-dom/server';
|
import { renderToString } from 'react-dom/server';
|
||||||
|
|
||||||
export default () => {
|
const App = () => {
|
||||||
// SSR Render
|
// SSR Render
|
||||||
const cache = createCache();
|
const cache = React.useMemo<Entity>(() => createCache(), []);
|
||||||
|
|
||||||
const html = renderToString(
|
const html = renderToString(
|
||||||
<StyleProvider cache={cache}>
|
<StyleProvider cache={cache}>
|
||||||
<MyApp />
|
<MyApp />
|
||||||
@ -34,17 +35,19 @@ export default () => {
|
|||||||
|
|
||||||
// Mix with style
|
// Mix with style
|
||||||
return `
|
return `
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
${styleText}
|
${styleText}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root">${html}</div>
|
<div id="root">${html}</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
```
|
```
|
||||||
|
|
||||||
## Whole Export
|
## Whole Export
|
||||||
@ -89,8 +92,8 @@ If you want to use mixed themes or custom themes, you can use the following scri
|
|||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
import fs from 'fs';
|
import fs from 'fs';
|
||||||
import { extractStyle } from '@ant-design/static-style-extract';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { extractStyle } from '@ant-design/static-style-extract';
|
||||||
import { ConfigProvider } from 'antd';
|
import { ConfigProvider } from 'antd';
|
||||||
|
|
||||||
const outputPath = './public/antd.min.css';
|
const outputPath = './public/antd.min.css';
|
||||||
@ -155,6 +158,7 @@ Then, you just need to import this file into the `pages/_app.tsx` file:
|
|||||||
```tsx
|
```tsx
|
||||||
import { StyleProvider } from '@ant-design/cssinjs';
|
import { StyleProvider } from '@ant-design/cssinjs';
|
||||||
import type { AppProps } from 'next/app';
|
import type { AppProps } from 'next/app';
|
||||||
|
|
||||||
import '../public/antd.min.css'; // add this line
|
import '../public/antd.min.css'; // add this line
|
||||||
import '../styles/globals.css';
|
import '../styles/globals.css';
|
||||||
|
|
||||||
@ -237,8 +241,8 @@ More about static-style-extract, see [static-style-extract](https://github.com/a
|
|||||||
import { createHash } from 'crypto';
|
import { createHash } from 'crypto';
|
||||||
import fs from 'fs';
|
import fs from 'fs';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import type Entity from '@ant-design/cssinjs/lib/Cache';
|
|
||||||
import { extractStyle } from '@ant-design/cssinjs';
|
import { extractStyle } from '@ant-design/cssinjs';
|
||||||
|
import type Entity from '@ant-design/cssinjs/lib/Cache';
|
||||||
|
|
||||||
export type DoExtraStyleOptions = {
|
export type DoExtraStyleOptions = {
|
||||||
cache: Entity;
|
cache: Entity;
|
||||||
@ -280,9 +284,10 @@ Export on demand using the above tools in `_document.tsx`
|
|||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
// _document.tsx
|
// _document.tsx
|
||||||
import { StyleProvider, createCache } from '@ant-design/cssinjs';
|
import { createCache, StyleProvider } from '@ant-design/cssinjs';
|
||||||
import type { DocumentContext } from 'next/document';
|
import type { DocumentContext } from 'next/document';
|
||||||
import Document, { Head, Html, Main, NextScript } from 'next/document';
|
import Document, { Head, Html, Main, NextScript } from 'next/document';
|
||||||
|
|
||||||
import { doExtraStyle } from '../scripts/genAntdCss';
|
import { doExtraStyle } from '../scripts/genAntdCss';
|
||||||
|
|
||||||
export default class MyDocument extends Document {
|
export default class MyDocument extends Document {
|
||||||
|
|||||||
@ -16,13 +16,14 @@ tag: New
|
|||||||
使用 `@ant-design/cssinjs` 将所需样式抽离：
|
使用 `@ant-design/cssinjs` 将所需样式抽离：
|
||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
|
import React from 'react';
|
||||||
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
|
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
|
||||||
|
import type Entity from '@ant-design/cssinjs/es/Cache';
|
||||||
import { renderToString } from 'react-dom/server';
|
import { renderToString } from 'react-dom/server';
|
||||||
|
|
||||||
export default () => {
|
const App = () => {
|
||||||
// SSR Render
|
// SSR Render
|
||||||
const cache = createCache();
|
const cache = React.useMemo<Entity>(() => createCache(), []);
|
||||||
|
|
||||||
const html = renderToString(
|
const html = renderToString(
|
||||||
<StyleProvider cache={cache}>
|
<StyleProvider cache={cache}>
|
||||||
<MyApp />
|
<MyApp />
|
||||||
@ -34,17 +35,19 @@ export default () => {
|
|||||||
|
|
||||||
// Mix with style
|
// Mix with style
|
||||||
return `
|
return `
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
${styleText}
|
${styleText}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root">${html}</div>
|
<div id="root">${html}</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
```
|
```
|
||||||
|
|
||||||
## 整体导出
|
## 整体导出
|
||||||
@ -89,8 +92,8 @@ fs.writeFileSync(outputPath, css);
|
|||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
import fs from 'fs';
|
import fs from 'fs';
|
||||||
import { extractStyle } from '@ant-design/static-style-extract';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { extractStyle } from '@ant-design/static-style-extract';
|
||||||
import { ConfigProvider } from 'antd';
|
import { ConfigProvider } from 'antd';
|
||||||
|
|
||||||
const outputPath = './public/antd.min.css';
|
const outputPath = './public/antd.min.css';
|
||||||
@ -155,6 +158,7 @@ fs.writeFileSync(outputPath, css);
|
|||||||
```tsx
|
```tsx
|
||||||
import { StyleProvider } from '@ant-design/cssinjs';
|
import { StyleProvider } from '@ant-design/cssinjs';
|
||||||
import type { AppProps } from 'next/app';
|
import type { AppProps } from 'next/app';
|
||||||
|
|
||||||
import '../public/antd.min.css'; // 添加这行
|
import '../public/antd.min.css'; // 添加这行
|
||||||
import '../styles/globals.css';
|
import '../styles/globals.css';
|
||||||
|
|
||||||
@ -237,8 +241,8 @@ const cssText = extractStyle((node) => (
|
|||||||
import { createHash } from 'crypto';
|
import { createHash } from 'crypto';
|
||||||
import fs from 'fs';
|
import fs from 'fs';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import type Entity from '@ant-design/cssinjs/lib/Cache';
|
|
||||||
import { extractStyle } from '@ant-design/cssinjs';
|
import { extractStyle } from '@ant-design/cssinjs';
|
||||||
|
import type Entity from '@ant-design/cssinjs/lib/Cache';
|
||||||
|
|
||||||
export type DoExtraStyleOptions = {
|
export type DoExtraStyleOptions = {
|
||||||
cache: Entity;
|
cache: Entity;
|
||||||
@ -280,9 +284,10 @@ export function doExtraStyle({
|
|||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
// _document.tsx
|
// _document.tsx
|
||||||
import { StyleProvider, createCache } from '@ant-design/cssinjs';
|
import { createCache, StyleProvider } from '@ant-design/cssinjs';
|
||||||
import type { DocumentContext } from 'next/document';
|
import type { DocumentContext } from 'next/document';
|
||||||
import Document, { Head, Html, Main, NextScript } from 'next/document';
|
import Document, { Head, Html, Main, NextScript } from 'next/document';
|
||||||
|
|
||||||
import { doExtraStyle } from '../scripts/genAntdCss';
|
import { doExtraStyle } from '../scripts/genAntdCss';
|
||||||
|
|
||||||
export default class MyDocument extends Document {
|
export default class MyDocument extends Document {
|
||||||
|
|||||||
@ -67,16 +67,20 @@ If you are using the App Router in Next.js and using antd as your component libr
|
|||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
|
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
|
||||||
// if you are using Next.js 14, use below import instead. More info: https://github.com/ant-design/ant-design/issues/45567
|
|
||||||
// import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs/lib';
|
|
||||||
import type Entity from '@ant-design/cssinjs/es/Cache';
|
import type Entity from '@ant-design/cssinjs/es/Cache';
|
||||||
import { useServerInsertedHTML } from 'next/navigation';
|
import { useServerInsertedHTML } from 'next/navigation';
|
||||||
|
|
||||||
const StyledComponentsRegistry = ({ children }: React.PropsWithChildren) => {
|
const StyledComponentsRegistry = ({ children }: React.PropsWithChildren) => {
|
||||||
const cache = React.useMemo<Entity>(() => createCache(), []);
|
const cache = React.useMemo<Entity>(() => createCache(), []);
|
||||||
useServerInsertedHTML(() => (
|
const isServerInserted = React.useRef<boolean>(false);
|
||||||
<style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />
|
useServerInsertedHTML(() => {
|
||||||
));
|
// avoid duplicate css insert
|
||||||
|
if (isServerInserted.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
isServerInserted.current = true;
|
||||||
|
return <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />;
|
||||||
|
});
|
||||||
return <StyleProvider cache={cache}>{children}</StyleProvider>;
|
return <StyleProvider cache={cache}>{children}</StyleProvider>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -67,16 +67,20 @@ export default Home;
|
|||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
|
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
|
||||||
// 如果您使用的是 Next.js 14，请改用下面的导入。更多信息： https://github.com/ant-design/ant-design/issues/45567
|
|
||||||
// import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs/lib';
|
|
||||||
import type Entity from '@ant-design/cssinjs/es/Cache';
|
import type Entity from '@ant-design/cssinjs/es/Cache';
|
||||||
import { useServerInsertedHTML } from 'next/navigation';
|
import { useServerInsertedHTML } from 'next/navigation';
|
||||||
|
|
||||||
const StyledComponentsRegistry = ({ children }: React.PropsWithChildren) => {
|
const StyledComponentsRegistry = ({ children }: React.PropsWithChildren) => {
|
||||||
const cache = React.useMemo<Entity>(() => createCache(), []);
|
const cache = React.useMemo<Entity>(() => createCache(), []);
|
||||||
useServerInsertedHTML(() => (
|
const isServerInserted = React.useRef<boolean>(false);
|
||||||
<style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />
|
useServerInsertedHTML(() => {
|
||||||
));
|
// 避免 css 重复插入
|
||||||
|
if (isServerInserted.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
isServerInserted.current = true;
|
||||||
|
return <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />;
|
||||||
|
});
|
||||||
return <StyleProvider cache={cache}>{children}</StyleProvider>;
|
return <StyleProvider cache={cache}>{children}</StyleProvider>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
12
package.json
12
package.json
@ -121,7 +121,7 @@
|
|||||||
"@rc-component/color-picker": "~1.4.1",
|
"@rc-component/color-picker": "~1.4.1",
|
||||||
"@rc-component/mutate-observer": "^1.1.0",
|
"@rc-component/mutate-observer": "^1.1.0",
|
||||||
"@rc-component/tour": "~1.11.0",
|
"@rc-component/tour": "~1.11.0",
|
||||||
"@rc-component/trigger": "^1.18.1",
|
"@rc-component/trigger": "^1.18.2",
|
||||||
"classnames": "^2.3.2",
|
"classnames": "^2.3.2",
|
||||||
"copy-to-clipboard": "^3.3.3",
|
"copy-to-clipboard": "^3.3.3",
|
||||||
"dayjs": "^1.11.1",
|
"dayjs": "^1.11.1",
|
||||||
@ -224,7 +224,7 @@
|
|||||||
"dumi-plugin-color-chunk": "^1.0.2",
|
"dumi-plugin-color-chunk": "^1.0.2",
|
||||||
"duplicate-package-checker-webpack-plugin": "^3.0.0",
|
"duplicate-package-checker-webpack-plugin": "^3.0.0",
|
||||||
"esbuild-loader": "^4.0.0",
|
"esbuild-loader": "^4.0.0",
|
||||||
"eslint": "^8.40.0",
|
"eslint": "^8.53.0",
|
||||||
"eslint-config-airbnb": "^19.0.0",
|
"eslint-config-airbnb": "^19.0.0",
|
||||||
"eslint-config-prettier": "^9.0.0",
|
"eslint-config-prettier": "^9.0.0",
|
||||||
"eslint-import-resolver-typescript": "^3.5.2",
|
"eslint-import-resolver-typescript": "^3.5.2",
|
||||||
@ -269,9 +269,9 @@
|
|||||||
"node-notifier": "^10.0.1",
|
"node-notifier": "^10.0.1",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
"open": "^9.0.0",
|
"open": "^9.0.0",
|
||||||
"prettier": "^3.0.0",
|
"prettier": "^3.1.0",
|
||||||
"prettier-plugin-jsdoc": "^1.0.1",
|
"prettier-plugin-jsdoc": "^1.1.1",
|
||||||
"pretty-format": "^29.0.0",
|
"pretty-format": "^29.7.0",
|
||||||
"prismjs": "^1.29.0",
|
"prismjs": "^1.29.0",
|
||||||
"progress": "^2.0.3",
|
"progress": "^2.0.3",
|
||||||
"puppeteer": "^21.1.1",
|
"puppeteer": "^21.1.1",
|
||||||
@ -306,7 +306,7 @@
|
|||||||
"stylelint-prettier": "^4.0.0",
|
"stylelint-prettier": "^4.0.0",
|
||||||
"sylvanas": "^0.6.1",
|
"sylvanas": "^0.6.1",
|
||||||
"terser": "^5.16.1",
|
"terser": "^5.16.1",
|
||||||
"tsx": "^3.12.8",
|
"tsx": "^4.1.0",
|
||||||
"typedoc": "^0.25.0",
|
"typedoc": "^0.25.0",
|
||||||
"typescript": "~5.2.2",
|
"typescript": "~5.2.2",
|
||||||
"vanilla-jsoneditor": "^0.18.0",
|
"vanilla-jsoneditor": "^0.18.0",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user