mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 01:13:58 +08:00
feat: Carousel support arrows for switching (#48542)
* feat: Carousel support arrows function * fix: order matters * feat: Carousel support arrows in vertical mode * chore: update snapshot * Apply suggestions from code review Signed-off-by: afc163 <afc163@gmail.com> * chore: fix lint * chore: fix lint * chore: dotMargin => dotGap --------- Signed-off-by: afc163 <afc163@gmail.com>
This commit is contained in:
afc163
GitHub
parent
2d237d0e93
commit
ed127e9418
@ -1,5 +1,316 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders components/carousel/demo/arrows.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-carousel"
|
||||
>
|
||||
<div
|
||||
class="slick-slider slick-initialized"
|
||||
dir="ltr"
|
||||
>
|
||||
<button
|
||||
aria-label="prev"
|
||||
class="slick-arrow slick-prev slick-disabled"
|
||||
currentslide="0"
|
||||
data-role="none"
|
||||
slidecount="4"
|
||||
style="display: block;"
|
||||
type="button"
|
||||
/>
|
||||
<div
|
||||
class="slick-list"
|
||||
>
|
||||
<div
|
||||
class="slick-track"
|
||||
style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<button
|
||||
aria-label="next"
|
||||
class="slick-arrow slick-next"
|
||||
currentslide="0"
|
||||
data-role="none"
|
||||
slidecount="4"
|
||||
style="display: block;"
|
||||
type="button"
|
||||
/>
|
||||
<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>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-carousel ant-carousel-vertical"
|
||||
>
|
||||
<div
|
||||
class="slick-slider slick-vertical slick-initialized"
|
||||
dir="ltr"
|
||||
>
|
||||
<button
|
||||
aria-label="prev"
|
||||
class="slick-arrow slick-prev slick-disabled"
|
||||
currentslide="0"
|
||||
data-role="none"
|
||||
slidecount="4"
|
||||
style="display: block;"
|
||||
type="button"
|
||||
/>
|
||||
<div
|
||||
class="slick-list"
|
||||
style="height: 0px;"
|
||||
>
|
||||
<div
|
||||
class="slick-track"
|
||||
style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<button
|
||||
aria-label="next"
|
||||
class="slick-arrow slick-next"
|
||||
currentslide="0"
|
||||
data-role="none"
|
||||
slidecount="4"
|
||||
style="display: block;"
|
||||
type="button"
|
||||
/>
|
||||
<ul
|
||||
class="slick-dots slick-dots-left"
|
||||
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/arrows.tsx extend context correctly 2`] = `
|
||||
[
|
||||
"Warning: React does not recognize the \`%s\` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase \`%s\` instead. If you accidentally passed it from a parent component, remove it from the DOM element.%s",
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/carousel/demo/autoplay.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-carousel"
|
||||
|
||||
@ -1,5 +1,309 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders components/carousel/demo/arrows.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-carousel"
|
||||
>
|
||||
<div
|
||||
class="slick-slider slick-initialized"
|
||||
dir="ltr"
|
||||
>
|
||||
<button
|
||||
aria-label="prev"
|
||||
class="slick-arrow slick-prev slick-disabled"
|
||||
currentslide="0"
|
||||
data-role="none"
|
||||
slidecount="4"
|
||||
style="display:block"
|
||||
type="button"
|
||||
/>
|
||||
<div
|
||||
class="slick-list"
|
||||
>
|
||||
<div
|
||||
class="slick-track"
|
||||
style="width:400%;left:0%"
|
||||
>
|
||||
<div
|
||||
aria-hidden="false"
|
||||
class="slick-slide slick-active slick-current"
|
||||
data-index="0"
|
||||
style="outline:none;width:25%"
|
||||
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:25%"
|
||||
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:25%"
|
||||
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:25%"
|
||||
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>
|
||||
<button
|
||||
aria-label="next"
|
||||
class="slick-arrow slick-next"
|
||||
currentslide="0"
|
||||
data-role="none"
|
||||
slidecount="4"
|
||||
style="display:block"
|
||||
type="button"
|
||||
/>
|
||||
<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>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-carousel ant-carousel-vertical"
|
||||
>
|
||||
<div
|
||||
class="slick-slider slick-vertical slick-initialized"
|
||||
dir="ltr"
|
||||
>
|
||||
<button
|
||||
aria-label="prev"
|
||||
class="slick-arrow slick-prev slick-disabled"
|
||||
currentslide="0"
|
||||
data-role="none"
|
||||
slidecount="4"
|
||||
style="display:block"
|
||||
type="button"
|
||||
/>
|
||||
<div
|
||||
class="slick-list"
|
||||
>
|
||||
<div
|
||||
class="slick-track"
|
||||
style="width:400%;left:0%"
|
||||
>
|
||||
<div
|
||||
aria-hidden="false"
|
||||
class="slick-slide slick-active slick-current"
|
||||
data-index="0"
|
||||
style="outline:none;width:25%"
|
||||
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:25%"
|
||||
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:25%"
|
||||
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:25%"
|
||||
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>
|
||||
<button
|
||||
aria-label="next"
|
||||
class="slick-arrow slick-next"
|
||||
currentslide="0"
|
||||
data-role="none"
|
||||
slidecount="4"
|
||||
style="display:block"
|
||||
type="button"
|
||||
/>
|
||||
<ul
|
||||
class="slick-dots slick-dots-left"
|
||||
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/autoplay.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-carousel"
|
||||
|
||||
7
components/carousel/demo/arrows.md
Normal file
7
components/carousel/demo/arrows.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
显示切换箭头。
|
||||
|
||||
## en-US
|
||||
|
||||
Show the arrows for switching.
|
||||
47
components/carousel/demo/arrows.tsx
Normal file
47
components/carousel/demo/arrows.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import { Carousel } from 'antd';
|
||||
|
||||
const contentStyle: React.CSSProperties = {
|
||||
margin: 0,
|
||||
height: '160px',
|
||||
color: '#fff',
|
||||
lineHeight: '160px',
|
||||
textAlign: 'center',
|
||||
background: '#364d79',
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Carousel arrows infinite={false}>
|
||||
<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>
|
||||
<br />
|
||||
<Carousel arrows dotPosition="left" infinite={false}>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -22,6 +22,7 @@ demo:
|
||||
<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/arrows.tsx" version="5.17.0">Arrows for switching</code>
|
||||
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||||
|
||||
## API
|
||||
@ -30,6 +31,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| arrows | Whether to show switch arrows | boolean | false | 5.17.0 |
|
||||
| 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` | |
|
||||
|
||||
@ -35,6 +35,8 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>((props, ref) => {
|
||||
const {
|
||||
dots = true,
|
||||
arrows = false,
|
||||
prevArrow = <button type="button" aria-label="prev" />,
|
||||
nextArrow = <button type="button" aria-label="next" />,
|
||||
draggable = false,
|
||||
waitForAnimate = false,
|
||||
dotPosition = 'bottom',
|
||||
@ -115,6 +117,8 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>((props, ref) => {
|
||||
dots={enableDots}
|
||||
dotsClass={dsClass}
|
||||
arrows={arrows}
|
||||
prevArrow={prevArrow}
|
||||
nextArrow={nextArrow}
|
||||
draggable={draggable}
|
||||
verticalSwiping={vertical}
|
||||
waitForAnimate={waitForAnimate}
|
||||
|
||||
@ -23,6 +23,7 @@ demo:
|
||||
<code src="./demo/position.tsx">位置</code>
|
||||
<code src="./demo/autoplay.tsx">自动切换</code>
|
||||
<code src="./demo/fade.tsx">渐显</code>
|
||||
<code src="./demo/arrows.tsx" version="5.17.0">切换箭头</code>
|
||||
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||
|
||||
## API
|
||||
@ -31,6 +32,7 @@ demo:
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| arrows | 是否显示箭头 | boolean | false | 5.17.0 |
|
||||
| autoplay | 是否自动切换 | boolean | false | |
|
||||
| autoplaySpeed | 自动切换的间隔（毫秒） | number | 3000 | |
|
||||
| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | `bottom` | |
|
||||
|
||||
@ -2,7 +2,7 @@ import { unit } from '@ant-design/cssinjs';
|
||||
|
||||
import { resetComponent } from '../../style';
|
||||
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
import { genStyleHooks } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
@ -15,6 +15,16 @@ export interface ComponentToken {
|
||||
* @descEN Height of indicator
|
||||
*/
|
||||
dotHeight: number;
|
||||
/**
|
||||
* @desc 指示点之间的间距
|
||||
* @descEN gap between indicator
|
||||
*/
|
||||
dotGap: number;
|
||||
/**
|
||||
* @desc 指示点距离边缘的距离
|
||||
* @descEN dot offset to Carousel edge
|
||||
*/
|
||||
dotOffset: number;
|
||||
/** @deprecated Use `dotActiveWidth` instead. */
|
||||
dotWidthActive: number;
|
||||
/**
|
||||
@ -22,19 +32,22 @@ export interface ComponentToken {
|
||||
* @descEN Width of active indicator
|
||||
*/
|
||||
dotActiveWidth: number;
|
||||
/**
|
||||
* @desc 切换箭头大小
|
||||
* @descEN Size of arrows
|
||||
*/
|
||||
arrowSize: number;
|
||||
/**
|
||||
* @desc 切换箭头边距
|
||||
* @descEN arrows offset to Carousel edge
|
||||
*/
|
||||
arrowOffset: number;
|
||||
}
|
||||
|
||||
interface CarouselToken extends FullToken<'Carousel'> {
|
||||
carouselArrowSize: string | number;
|
||||
carouselDotOffset: string | number;
|
||||
carouselDotInline: string | number;
|
||||
}
|
||||
interface CarouselToken extends FullToken<'Carousel'> {}
|
||||
|
||||
const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
|
||||
const { componentCls, antCls, carouselArrowSize, carouselDotOffset, marginXXS } = token;
|
||||
const arrowOffset = token.calc(carouselArrowSize).mul(-1.25).equal();
|
||||
|
||||
const carouselDotMargin = marginXXS;
|
||||
const { componentCls, antCls } = token;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
@ -133,142 +146,176 @@ const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
|
||||
display: 'block',
|
||||
height: 'auto',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
'.slick-arrow.slick-hidden': {
|
||||
display: 'none',
|
||||
},
|
||||
const genArrowsStyle: GenerateStyle<CarouselToken> = (token) => {
|
||||
const { componentCls, motionDurationSlow, arrowSize, arrowOffset } = token;
|
||||
const arrowLength = token.calc(arrowSize).div(1.414).equal();
|
||||
|
||||
// Arrows
|
||||
'.slick-prev, .slick-next': {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
display: 'block',
|
||||
width: carouselArrowSize,
|
||||
height: carouselArrowSize,
|
||||
marginTop: token.calc(carouselArrowSize).mul(-1).div(2).equal(),
|
||||
padding: 0,
|
||||
color: 'transparent',
|
||||
fontSize: 0,
|
||||
lineHeight: 0,
|
||||
background: 'transparent',
|
||||
border: 0,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
|
||||
'&:hover, &:focus': {
|
||||
color: 'transparent',
|
||||
return [
|
||||
{
|
||||
[componentCls]: {
|
||||
// Arrows
|
||||
'.slick-prev, .slick-next': {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
width: arrowSize,
|
||||
height: arrowSize,
|
||||
transform: 'translateY(-50%)',
|
||||
color: '#fff',
|
||||
opacity: 0.4,
|
||||
background: 'transparent',
|
||||
padding: 0,
|
||||
lineHeight: 0,
|
||||
border: 0,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
zIndex: 1,
|
||||
transition: `opacity ${motionDurationSlow}`,
|
||||
|
||||
'&::before': {
|
||||
'&:hover, &:focus': {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
|
||||
'&.slick-disabled::before': {
|
||||
opacity: 0.25,
|
||||
},
|
||||
},
|
||||
|
||||
'.slick-prev': {
|
||||
insetInlineStart: arrowOffset,
|
||||
|
||||
'&::before': {
|
||||
content: '"←"',
|
||||
},
|
||||
},
|
||||
|
||||
'.slick-next': {
|
||||
insetInlineEnd: arrowOffset,
|
||||
|
||||
'&::before': {
|
||||
content: '"→"',
|
||||
},
|
||||
},
|
||||
|
||||
// Dots
|
||||
'.slick-dots': {
|
||||
position: 'absolute',
|
||||
insetInlineEnd: 0,
|
||||
bottom: 0,
|
||||
insetInlineStart: 0,
|
||||
zIndex: 15,
|
||||
display: 'flex !important',
|
||||
justifyContent: 'center',
|
||||
paddingInlineStart: 0,
|
||||
margin: 0,
|
||||
listStyle: 'none',
|
||||
|
||||
'&-bottom': {
|
||||
bottom: carouselDotOffset,
|
||||
},
|
||||
|
||||
'&-top': {
|
||||
top: carouselDotOffset,
|
||||
bottom: 'auto',
|
||||
},
|
||||
|
||||
li: {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
flex: '0 1 auto',
|
||||
boxSizing: 'content-box',
|
||||
width: token.dotWidth,
|
||||
height: token.dotHeight,
|
||||
marginInline: carouselDotMargin,
|
||||
padding: 0,
|
||||
textAlign: 'center',
|
||||
textIndent: -999,
|
||||
verticalAlign: 'top',
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
|
||||
button: {
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
height: token.dotHeight,
|
||||
padding: 0,
|
||||
color: 'transparent',
|
||||
fontSize: 0,
|
||||
background: token.colorBgContainer,
|
||||
border: 0,
|
||||
borderRadius: token.dotHeight,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
opacity: 0.3,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
|
||||
'&: hover, &:focus': {
|
||||
opacity: 0.75,
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
inset: token.calc(carouselDotMargin).mul(-1).equal(),
|
||||
content: '""',
|
||||
},
|
||||
'&.slick-disabled': {
|
||||
pointerEvents: 'none',
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
'&.slick-active': {
|
||||
width: token.dotActiveWidth,
|
||||
'&::after': {
|
||||
boxSizing: 'border-box',
|
||||
position: 'absolute',
|
||||
top: token.calc(arrowSize).sub(arrowLength).div(2).equal(),
|
||||
insetInlineStart: token.calc(arrowSize).sub(arrowLength).div(2).equal(),
|
||||
display: 'inline-block',
|
||||
width: arrowLength,
|
||||
height: arrowLength,
|
||||
border: `0 solid currentcolor`,
|
||||
borderInlineWidth: '2px 0',
|
||||
borderBlockWidth: '2px 0',
|
||||
borderRadius: 1,
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
|
||||
'& button': {
|
||||
background: token.colorBgContainer,
|
||||
opacity: 1,
|
||||
'.slick-prev': {
|
||||
insetInlineStart: arrowOffset,
|
||||
|
||||
'&::after': {
|
||||
transform: 'rotate(-45deg)',
|
||||
},
|
||||
},
|
||||
|
||||
'.slick-next': {
|
||||
insetInlineEnd: arrowOffset,
|
||||
|
||||
'&::after': {
|
||||
transform: 'rotate(135deg)',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const genDotsStyle: GenerateStyle<CarouselToken> = (token) => {
|
||||
const {
|
||||
componentCls,
|
||||
dotOffset,
|
||||
dotWidth,
|
||||
dotHeight,
|
||||
dotGap,
|
||||
colorBgContainer,
|
||||
motionDurationSlow,
|
||||
} = token;
|
||||
return [
|
||||
{
|
||||
[componentCls]: {
|
||||
'.slick-dots': {
|
||||
position: 'absolute',
|
||||
insetInlineEnd: 0,
|
||||
bottom: 0,
|
||||
insetInlineStart: 0,
|
||||
zIndex: 15,
|
||||
display: 'flex !important',
|
||||
justifyContent: 'center',
|
||||
paddingInlineStart: 0,
|
||||
margin: 0,
|
||||
listStyle: 'none',
|
||||
|
||||
'&-bottom': {
|
||||
bottom: dotOffset,
|
||||
},
|
||||
|
||||
'&-top': {
|
||||
top: dotOffset,
|
||||
bottom: 'auto',
|
||||
},
|
||||
|
||||
li: {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
flex: '0 1 auto',
|
||||
boxSizing: 'content-box',
|
||||
width: dotWidth,
|
||||
height: dotHeight,
|
||||
marginInline: dotGap,
|
||||
padding: 0,
|
||||
textAlign: 'center',
|
||||
textIndent: -999,
|
||||
verticalAlign: 'top',
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
|
||||
button: {
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
height: dotHeight,
|
||||
padding: 0,
|
||||
color: 'transparent',
|
||||
fontSize: 0,
|
||||
background: colorBgContainer,
|
||||
border: 0,
|
||||
borderRadius: dotHeight,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
opacity: 0.2,
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
|
||||
'&: hover, &:focus': {
|
||||
opacity: 0.75,
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
inset: token.calc(dotGap).mul(-1).equal(),
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
|
||||
'&: hover, &:focus': {
|
||||
opacity: 1,
|
||||
'&.slick-active': {
|
||||
width: token.dotActiveWidth,
|
||||
|
||||
'& button': {
|
||||
background: colorBgContainer,
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
'&: hover, &:focus': {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
];
|
||||
};
|
||||
|
||||
const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = (token) => {
|
||||
const { componentCls, carouselDotOffset, marginXXS } = token;
|
||||
const { componentCls, dotOffset, arrowOffset, marginXXS } = token;
|
||||
|
||||
const reverseSizeOfDot = {
|
||||
width: token.dotHeight,
|
||||
@ -277,6 +324,26 @@ const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = (token) => {
|
||||
|
||||
return {
|
||||
[`${componentCls}-vertical`]: {
|
||||
'.slick-prev, .slick-next': {
|
||||
insetInlineStart: '50%',
|
||||
marginBlockStart: 'unset',
|
||||
transform: 'translateX(-50%)',
|
||||
},
|
||||
'.slick-prev': {
|
||||
insetBlockStart: arrowOffset,
|
||||
insetInlineStart: '50%',
|
||||
|
||||
'&::after': {
|
||||
transform: 'rotate(45deg)',
|
||||
},
|
||||
},
|
||||
'.slick-next': {
|
||||
insetBlockStart: 'auto',
|
||||
insetBlockEnd: arrowOffset,
|
||||
'&::after': {
|
||||
transform: 'rotate(-135deg)',
|
||||
},
|
||||
},
|
||||
'.slick-dots': {
|
||||
top: '50%',
|
||||
bottom: 'auto',
|
||||
@ -288,11 +355,11 @@ const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = (token) => {
|
||||
|
||||
'&-left': {
|
||||
insetInlineEnd: 'auto',
|
||||
insetInlineStart: carouselDotOffset,
|
||||
insetInlineStart: dotOffset,
|
||||
},
|
||||
|
||||
'&-right': {
|
||||
insetInlineEnd: carouselDotOffset,
|
||||
insetInlineEnd: dotOffset,
|
||||
insetInlineStart: 'auto',
|
||||
},
|
||||
|
||||
@ -343,12 +410,16 @@ const genCarouselRtlStyle: GenerateStyle<CarouselToken> = (token) => {
|
||||
];
|
||||
};
|
||||
|
||||
export const prepareComponentToken: GetDefaultToken<'Carousel'> = () => {
|
||||
export const prepareComponentToken: GetDefaultToken<'Carousel'> = (token) => {
|
||||
const dotActiveWidth = 24;
|
||||
|
||||
return {
|
||||
arrowSize: 16,
|
||||
arrowOffset: token.marginXS,
|
||||
dotWidth: 16,
|
||||
dotHeight: 3,
|
||||
dotGap: token.marginXXS,
|
||||
dotOffset: 12,
|
||||
dotWidthActive: dotActiveWidth,
|
||||
dotActiveWidth,
|
||||
};
|
||||
@ -357,19 +428,13 @@ export const prepareComponentToken: GetDefaultToken<'Carousel'> = () => {
|
||||
// ============================== Export ==============================
|
||||
export default genStyleHooks(
|
||||
'Carousel',
|
||||
(token) => {
|
||||
const { controlHeightLG, controlHeightSM } = token;
|
||||
const carouselToken = mergeToken<CarouselToken>(token, {
|
||||
carouselArrowSize: token.calc(controlHeightLG).div(2).equal(),
|
||||
carouselDotOffset: token.calc(controlHeightSM).div(2).equal(),
|
||||
});
|
||||
|
||||
return [
|
||||
genCarouselStyle(carouselToken),
|
||||
genCarouselVerticalStyle(carouselToken),
|
||||
genCarouselRtlStyle(carouselToken),
|
||||
];
|
||||
},
|
||||
(token) => [
|
||||
genCarouselStyle(token),
|
||||
genArrowsStyle(token),
|
||||
genDotsStyle(token),
|
||||
genCarouselVerticalStyle(token),
|
||||
genCarouselRtlStyle(token),
|
||||
],
|
||||
prepareComponentToken,
|
||||
{
|
||||
deprecatedTokens: [['dotWidthActive', 'dotActiveWidth']],
|
||||
|
||||
@ -308,10 +308,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
width: pickerControlIconSize,
|
||||
height: pickerControlIconSize,
|
||||
border: `0 solid currentcolor`,
|
||||
borderBlockStartWidth: pickerControlIconBorderWidth,
|
||||
borderBlockEndWidth: 0,
|
||||
borderInlineStartWidth: pickerControlIconBorderWidth,
|
||||
borderInlineEndWidth: 0,
|
||||
borderBlockWidth: `${unit(pickerControlIconBorderWidth)} 0`,
|
||||
borderInlineWidth: `${unit(pickerControlIconBorderWidth)} 0`,
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
@ -326,10 +324,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
width: pickerControlIconSize,
|
||||
height: pickerControlIconSize,
|
||||
border: '0 solid currentcolor',
|
||||
borderBlockStartWidth: pickerControlIconBorderWidth,
|
||||
borderBlockEndWidth: 0,
|
||||
borderInlineStartWidth: pickerControlIconBorderWidth,
|
||||
borderInlineEndWidth: 0,
|
||||
borderBlockWidth: `${unit(pickerControlIconBorderWidth)} 0`,
|
||||
borderInlineWidth: `${unit(pickerControlIconBorderWidth)} 0`,
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user