mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
feat: migrate less to token for Carousel (#42157)
* feat: rename Carousel token * docs: add component-token demo * fix: use dotActiveWidth instead of dotWidthActive * fix: use deprecatedTokens option
This commit is contained in:
muxin
GitHub
parent
ccb7251384
commit
ffedddb211
@ -468,6 +468,240 @@ exports[`renders components/carousel/demo/basic.tsx extend context correctly 1`]
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/carousel/demo/component-token.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-carousel"
|
||||
>
|
||||
<div
|
||||
class="slick-slider slick-initialized"
|
||||
dir="ltr"
|
||||
>
|
||||
<div
|
||||
class="slick-list"
|
||||
>
|
||||
<div
|
||||
class="slick-track"
|
||||
style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="slick-slide slick-cloned"
|
||||
data-index="-1"
|
||||
style="width: 0px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width: 100%; display: inline-block;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
|
||||
>
|
||||
4
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="false"
|
||||
class="slick-slide slick-active slick-current"
|
||||
data-index="0"
|
||||
style="outline: none; width: 0px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width: 100%; display: inline-block;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
|
||||
>
|
||||
1
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="slick-slide"
|
||||
data-index="1"
|
||||
style="outline: none; width: 0px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width: 100%; display: inline-block;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
|
||||
>
|
||||
2
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="slick-slide"
|
||||
data-index="2"
|
||||
style="outline: none; width: 0px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width: 100%; display: inline-block;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
|
||||
>
|
||||
3
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="slick-slide"
|
||||
data-index="3"
|
||||
style="outline: none; width: 0px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width: 100%; display: inline-block;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
|
||||
>
|
||||
4
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="slick-slide slick-cloned"
|
||||
data-index="4"
|
||||
style="width: 0px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width: 100%; display: inline-block;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
|
||||
>
|
||||
1
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="slick-slide slick-cloned"
|
||||
data-index="5"
|
||||
style="width: 0px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width: 100%; display: inline-block;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
|
||||
>
|
||||
2
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="slick-slide slick-cloned"
|
||||
data-index="6"
|
||||
style="width: 0px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width: 100%; display: inline-block;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
|
||||
>
|
||||
3
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="slick-slide slick-cloned"
|
||||
data-index="7"
|
||||
style="width: 0px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width: 100%; display: inline-block;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
|
||||
>
|
||||
4
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="slick-dots slick-dots-bottom"
|
||||
style="display: block;"
|
||||
>
|
||||
<li
|
||||
class="slick-active"
|
||||
>
|
||||
<button>
|
||||
1
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class=""
|
||||
>
|
||||
<button>
|
||||
2
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class=""
|
||||
>
|
||||
<button>
|
||||
3
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class=""
|
||||
>
|
||||
<button>
|
||||
4
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/carousel/demo/fade.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-carousel"
|
||||
|
||||
@ -468,6 +468,240 @@ exports[`renders components/carousel/demo/basic.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/carousel/demo/component-token.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-carousel"
|
||||
>
|
||||
<div
|
||||
class="slick-slider slick-initialized"
|
||||
dir="ltr"
|
||||
>
|
||||
<div
|
||||
class="slick-list"
|
||||
>
|
||||
<div
|
||||
class="slick-track"
|
||||
style="width:900%;left:-100%"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="slick-slide slick-cloned"
|
||||
data-index="-1"
|
||||
style="width:11.11111111111111%"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width:100%;display:inline-block"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
|
||||
>
|
||||
4
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="false"
|
||||
class="slick-slide slick-active slick-current"
|
||||
data-index="0"
|
||||
style="outline:none;width:11.11111111111111%"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width:100%;display:inline-block"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
|
||||
>
|
||||
1
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="slick-slide"
|
||||
data-index="1"
|
||||
style="outline:none;width:11.11111111111111%"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width:100%;display:inline-block"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
|
||||
>
|
||||
2
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="slick-slide"
|
||||
data-index="2"
|
||||
style="outline:none;width:11.11111111111111%"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width:100%;display:inline-block"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
|
||||
>
|
||||
3
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="slick-slide"
|
||||
data-index="3"
|
||||
style="outline:none;width:11.11111111111111%"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width:100%;display:inline-block"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
|
||||
>
|
||||
4
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="slick-slide slick-cloned"
|
||||
data-index="4"
|
||||
style="width:11.11111111111111%"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width:100%;display:inline-block"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
|
||||
>
|
||||
1
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="slick-slide slick-cloned"
|
||||
data-index="5"
|
||||
style="width:11.11111111111111%"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width:100%;display:inline-block"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
|
||||
>
|
||||
2
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="slick-slide slick-cloned"
|
||||
data-index="6"
|
||||
style="width:11.11111111111111%"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width:100%;display:inline-block"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
|
||||
>
|
||||
3
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="slick-slide slick-cloned"
|
||||
data-index="7"
|
||||
style="width:11.11111111111111%"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="width:100%;display:inline-block"
|
||||
tabindex="-1"
|
||||
>
|
||||
<h3
|
||||
style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
|
||||
>
|
||||
4
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="slick-dots slick-dots-bottom"
|
||||
style="display:block"
|
||||
>
|
||||
<li
|
||||
class="slick-active"
|
||||
>
|
||||
<button>
|
||||
1
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class=""
|
||||
>
|
||||
<button>
|
||||
2
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class=""
|
||||
>
|
||||
<button>
|
||||
3
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class=""
|
||||
>
|
||||
<button>
|
||||
4
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/carousel/demo/fade.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-carousel"
|
||||
|
||||
7
components/carousel/demo/component-token.md
Normal file
7
components/carousel/demo/component-token.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
Component Token Debug.
|
||||
|
||||
## en-US
|
||||
|
||||
Component Token Debug.
|
||||
41
components/carousel/demo/component-token.tsx
Normal file
41
components/carousel/demo/component-token.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { Carousel, ConfigProvider } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
/** Test usage. Do not use in your production. */
|
||||
const contentStyle: React.CSSProperties = {
|
||||
margin: 0,
|
||||
height: '160px',
|
||||
color: '#fff',
|
||||
lineHeight: '160px',
|
||||
textAlign: 'center',
|
||||
background: '#364d79',
|
||||
};
|
||||
|
||||
export default () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Carousel: {
|
||||
dotWidth: 50,
|
||||
dotHeight: 50,
|
||||
dotActiveWidth: 80,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Carousel>
|
||||
<div>
|
||||
<h3 style={contentStyle}>1</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={contentStyle}>2</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={contentStyle}>3</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={contentStyle}>4</h3>
|
||||
</div>
|
||||
</Carousel>
|
||||
</ConfigProvider>
|
||||
);
|
||||
@ -23,6 +23,7 @@ A carousel component. Scales with its container.
|
||||
<code src="./demo/position.tsx">Position</code>
|
||||
<code src="./demo/autoplay.tsx">Scroll automatically</code>
|
||||
<code src="./demo/fade.tsx">Fade in</code>
|
||||
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -24,6 +24,7 @@ demo:
|
||||
<code src="./demo/position.tsx">位置</code>
|
||||
<code src="./demo/autoplay.tsx">自动切换</code>
|
||||
<code src="./demo/fade.tsx">渐显</code>
|
||||
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import { resetComponent } from '../../style';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import { resetComponent } from '../../style';
|
||||
|
||||
export interface ComponentToken {
|
||||
dotWidth: number;
|
||||
dotHeight: number;
|
||||
/** @deprecated Use `dotActiveWidth` instead. */
|
||||
dotWidthActive: number;
|
||||
dotActiveWidth: number;
|
||||
}
|
||||
|
||||
interface CarouselToken extends FullToken<'Carousel'> {
|
||||
@ -233,7 +235,7 @@ const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
|
||||
},
|
||||
|
||||
'&.slick-active': {
|
||||
width: token.dotWidthActive,
|
||||
width: token.dotActiveWidth,
|
||||
|
||||
'& button': {
|
||||
background: token.colorBgContainer,
|
||||
@ -342,9 +344,17 @@ export default genComponentStyleHook(
|
||||
genCarouselRtlStyle(carouselToken),
|
||||
];
|
||||
},
|
||||
{
|
||||
() => {
|
||||
const dotActiveWidth = 24;
|
||||
|
||||
return {
|
||||
dotWidth: 16,
|
||||
dotHeight: 3,
|
||||
dotWidthActive: 24,
|
||||
dotWidthActive: dotActiveWidth,
|
||||
dotActiveWidth,
|
||||
};
|
||||
},
|
||||
{
|
||||
deprecatedTokens: [['dotWidthActive', 'dotActiveWidth']],
|
||||
},
|
||||
);
|
||||
|
||||
@ -50,7 +50,14 @@ This document contains the correspondence between all the less variables related
|
||||
|
||||
<!-- ### Card -->
|
||||
|
||||
<!-- ### Carousel -->
|
||||
## Carousel
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less variables | Component Token | Note |
|
||||
| --- | --- | --- |
|
||||
| `@carousel-dot-width` | `dotWidth` | - |
|
||||
| `@carousel-dot-height` | `dotHeight` | - |
|
||||
| `@carousel-dot-active-width` | `dotActiveWidth` | - |
|
||||
|
||||
<!-- ### Cascader -->
|
||||
|
||||
|
||||
@ -50,7 +50,14 @@ title: Less 变量迁移 Design Token
|
||||
|
||||
<!-- ### Card 卡片 -->
|
||||
|
||||
<!-- ### Carousel 走马灯 -->
|
||||
## Carousel 走马灯
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less 变量 | Component Token | 备注 |
|
||||
| --- | --- | --- |
|
||||
| `@carousel-dot-width` | `dotWidth` | - |
|
||||
| `@carousel-dot-height` | `dotHeight` | - |
|
||||
| `@carousel-dot-active-width` | `dotActiveWidth` | - |
|
||||
|
||||
<!-- ### Cascader 级联选择 -->
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user