mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +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
|
// 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`] = `
|
exports[`renders components/carousel/demo/autoplay.tsx extend context correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-carousel"
|
class="ant-carousel"
|
||||||
|
|||||||
@ -1,5 +1,309 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// 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`] = `
|
exports[`renders components/carousel/demo/autoplay.tsx correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-carousel"
|
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/position.tsx">Position</code>
|
||||||
<code src="./demo/autoplay.tsx">Scroll automatically</code>
|
<code src="./demo/autoplay.tsx">Scroll automatically</code>
|
||||||
<code src="./demo/fade.tsx">Fade in</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>
|
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||||||
|
|
||||||
## API
|
## API
|
||||||
@ -30,6 +31,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
|||||||
|
|
||||||
| Property | Description | Type | Default | Version |
|
| Property | Description | Type | Default | Version |
|
||||||
| --- | --- | --- | --- | --- |
|
| --- | --- | --- | --- | --- |
|
||||||
|
| arrows | Whether to show switch arrows | boolean | false | 5.17.0 |
|
||||||
| autoplay | Whether to scroll automatically | boolean | false | |
|
| autoplay | Whether to scroll automatically | boolean | false | |
|
||||||
| autoplaySpeed | Delay between each auto scroll (in milliseconds) | number | 3000 | |
|
| 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` | |
|
||||||
|
|||||||
@ -35,6 +35,8 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>((props, ref) => {
|
|||||||
const {
|
const {
|
||||||
dots = true,
|
dots = true,
|
||||||
arrows = false,
|
arrows = false,
|
||||||
|
prevArrow = <button type="button" aria-label="prev" />,
|
||||||
|
nextArrow = <button type="button" aria-label="next" />,
|
||||||
draggable = false,
|
draggable = false,
|
||||||
waitForAnimate = false,
|
waitForAnimate = false,
|
||||||
dotPosition = 'bottom',
|
dotPosition = 'bottom',
|
||||||
@ -115,6 +117,8 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>((props, ref) => {
|
|||||||
dots={enableDots}
|
dots={enableDots}
|
||||||
dotsClass={dsClass}
|
dotsClass={dsClass}
|
||||||
arrows={arrows}
|
arrows={arrows}
|
||||||
|
prevArrow={prevArrow}
|
||||||
|
nextArrow={nextArrow}
|
||||||
draggable={draggable}
|
draggable={draggable}
|
||||||
verticalSwiping={vertical}
|
verticalSwiping={vertical}
|
||||||
waitForAnimate={waitForAnimate}
|
waitForAnimate={waitForAnimate}
|
||||||
|
|||||||
@ -23,6 +23,7 @@ demo:
|
|||||||
<code src="./demo/position.tsx">位置</code>
|
<code src="./demo/position.tsx">位置</code>
|
||||||
<code src="./demo/autoplay.tsx">自动切换</code>
|
<code src="./demo/autoplay.tsx">自动切换</code>
|
||||||
<code src="./demo/fade.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>
|
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||||
|
|
||||||
## API
|
## API
|
||||||
@ -31,6 +32,7 @@ demo:
|
|||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||||
| --- | --- | --- | --- | --- |
|
| --- | --- | --- | --- | --- |
|
||||||
|
| arrows | 是否显示箭头 | boolean | false | 5.17.0 |
|
||||||
| autoplay | 是否自动切换 | boolean | false | |
|
| autoplay | 是否自动切换 | boolean | false | |
|
||||||
| autoplaySpeed | 自动切换的间隔（毫秒） | number | 3000 | |
|
| autoplaySpeed | 自动切换的间隔（毫秒） | number | 3000 | |
|
||||||
| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | `bottom` | |
|
| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | `bottom` | |
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import { unit } from '@ant-design/cssinjs';
|
|||||||
|
|
||||||
import { resetComponent } from '../../style';
|
import { resetComponent } from '../../style';
|
||||||
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
import { genStyleHooks } from '../../theme/internal';
|
||||||
|
|
||||||
export interface ComponentToken {
|
export interface ComponentToken {
|
||||||
/**
|
/**
|
||||||
@ -15,6 +15,16 @@ export interface ComponentToken {
|
|||||||
* @descEN Height of indicator
|
* @descEN Height of indicator
|
||||||
*/
|
*/
|
||||||
dotHeight: number;
|
dotHeight: number;
|
||||||
|
/**
|
||||||
|
* @desc 指示点之间的间距
|
||||||
|
* @descEN gap between indicator
|
||||||
|
*/
|
||||||
|
dotGap: number;
|
||||||
|
/**
|
||||||
|
* @desc 指示点距离边缘的距离
|
||||||
|
* @descEN dot offset to Carousel edge
|
||||||
|
*/
|
||||||
|
dotOffset: number;
|
||||||
/** @deprecated Use `dotActiveWidth` instead. */
|
/** @deprecated Use `dotActiveWidth` instead. */
|
||||||
dotWidthActive: number;
|
dotWidthActive: number;
|
||||||
/**
|
/**
|
||||||
@ -22,19 +32,22 @@ export interface ComponentToken {
|
|||||||
* @descEN Width of active indicator
|
* @descEN Width of active indicator
|
||||||
*/
|
*/
|
||||||
dotActiveWidth: number;
|
dotActiveWidth: number;
|
||||||
|
/**
|
||||||
|
* @desc 切换箭头大小
|
||||||
|
* @descEN Size of arrows
|
||||||
|
*/
|
||||||
|
arrowSize: number;
|
||||||
|
/**
|
||||||
|
* @desc 切换箭头边距
|
||||||
|
* @descEN arrows offset to Carousel edge
|
||||||
|
*/
|
||||||
|
arrowOffset: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface CarouselToken extends FullToken<'Carousel'> {
|
interface CarouselToken extends FullToken<'Carousel'> {}
|
||||||
carouselArrowSize: string | number;
|
|
||||||
carouselDotOffset: string | number;
|
|
||||||
carouselDotInline: string | number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
|
const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
|
||||||
const { componentCls, antCls, carouselArrowSize, carouselDotOffset, marginXXS } = token;
|
const { componentCls, antCls } = token;
|
||||||
const arrowOffset = token.calc(carouselArrowSize).mul(-1.25).equal();
|
|
||||||
|
|
||||||
const carouselDotMargin = marginXXS;
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
[componentCls]: {
|
[componentCls]: {
|
||||||
@ -133,142 +146,176 @@ const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
|
|||||||
display: 'block',
|
display: 'block',
|
||||||
height: 'auto',
|
height: 'auto',
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
'.slick-arrow.slick-hidden': {
|
const genArrowsStyle: GenerateStyle<CarouselToken> = (token) => {
|
||||||
display: 'none',
|
const { componentCls, motionDurationSlow, arrowSize, arrowOffset } = token;
|
||||||
},
|
const arrowLength = token.calc(arrowSize).div(1.414).equal();
|
||||||
|
|
||||||
// Arrows
|
return [
|
||||||
'.slick-prev, .slick-next': {
|
{
|
||||||
position: 'absolute',
|
[componentCls]: {
|
||||||
top: '50%',
|
// Arrows
|
||||||
display: 'block',
|
'.slick-prev, .slick-next': {
|
||||||
width: carouselArrowSize,
|
position: 'absolute',
|
||||||
height: carouselArrowSize,
|
top: '50%',
|
||||||
marginTop: token.calc(carouselArrowSize).mul(-1).div(2).equal(),
|
width: arrowSize,
|
||||||
padding: 0,
|
height: arrowSize,
|
||||||
color: 'transparent',
|
transform: 'translateY(-50%)',
|
||||||
fontSize: 0,
|
color: '#fff',
|
||||||
lineHeight: 0,
|
opacity: 0.4,
|
||||||
background: 'transparent',
|
|
||||||
border: 0,
|
|
||||||
outline: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
|
|
||||||
'&:hover, &:focus': {
|
|
||||||
color: 'transparent',
|
|
||||||
background: 'transparent',
|
background: 'transparent',
|
||||||
|
padding: 0,
|
||||||
|
lineHeight: 0,
|
||||||
|
border: 0,
|
||||||
outline: 'none',
|
outline: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
zIndex: 1,
|
||||||
|
transition: `opacity ${motionDurationSlow}`,
|
||||||
|
|
||||||
'&::before': {
|
'&:hover, &:focus': {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
},
|
},
|
||||||
},
|
|
||||||
|
|
||||||
'&.slick-disabled::before': {
|
'&.slick-disabled': {
|
||||||
opacity: 0.25,
|
pointerEvents: 'none',
|
||||||
},
|
opacity: 0,
|
||||||
},
|
|
||||||
|
|
||||||
'.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-active': {
|
'&::after': {
|
||||||
width: token.dotActiveWidth,
|
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': {
|
'.slick-prev': {
|
||||||
background: token.colorBgContainer,
|
insetInlineStart: arrowOffset,
|
||||||
opacity: 1,
|
|
||||||
|
'&::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': {
|
'&.slick-active': {
|
||||||
opacity: 1,
|
width: token.dotActiveWidth,
|
||||||
|
|
||||||
|
'& button': {
|
||||||
|
background: colorBgContainer,
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
|
||||||
|
'&: hover, &:focus': {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
];
|
||||||
};
|
};
|
||||||
|
|
||||||
const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = (token) => {
|
const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = (token) => {
|
||||||
const { componentCls, carouselDotOffset, marginXXS } = token;
|
const { componentCls, dotOffset, arrowOffset, marginXXS } = token;
|
||||||
|
|
||||||
const reverseSizeOfDot = {
|
const reverseSizeOfDot = {
|
||||||
width: token.dotHeight,
|
width: token.dotHeight,
|
||||||
@ -277,6 +324,26 @@ const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = (token) => {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
[`${componentCls}-vertical`]: {
|
[`${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': {
|
'.slick-dots': {
|
||||||
top: '50%',
|
top: '50%',
|
||||||
bottom: 'auto',
|
bottom: 'auto',
|
||||||
@ -288,11 +355,11 @@ const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = (token) => {
|
|||||||
|
|
||||||
'&-left': {
|
'&-left': {
|
||||||
insetInlineEnd: 'auto',
|
insetInlineEnd: 'auto',
|
||||||
insetInlineStart: carouselDotOffset,
|
insetInlineStart: dotOffset,
|
||||||
},
|
},
|
||||||
|
|
||||||
'&-right': {
|
'&-right': {
|
||||||
insetInlineEnd: carouselDotOffset,
|
insetInlineEnd: dotOffset,
|
||||||
insetInlineStart: 'auto',
|
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;
|
const dotActiveWidth = 24;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
arrowSize: 16,
|
||||||
|
arrowOffset: token.marginXS,
|
||||||
dotWidth: 16,
|
dotWidth: 16,
|
||||||
dotHeight: 3,
|
dotHeight: 3,
|
||||||
|
dotGap: token.marginXXS,
|
||||||
|
dotOffset: 12,
|
||||||
dotWidthActive: dotActiveWidth,
|
dotWidthActive: dotActiveWidth,
|
||||||
dotActiveWidth,
|
dotActiveWidth,
|
||||||
};
|
};
|
||||||
@ -357,19 +428,13 @@ export const prepareComponentToken: GetDefaultToken<'Carousel'> = () => {
|
|||||||
// ============================== Export ==============================
|
// ============================== Export ==============================
|
||||||
export default genStyleHooks(
|
export default genStyleHooks(
|
||||||
'Carousel',
|
'Carousel',
|
||||||
(token) => {
|
(token) => [
|
||||||
const { controlHeightLG, controlHeightSM } = token;
|
genCarouselStyle(token),
|
||||||
const carouselToken = mergeToken<CarouselToken>(token, {
|
genArrowsStyle(token),
|
||||||
carouselArrowSize: token.calc(controlHeightLG).div(2).equal(),
|
genDotsStyle(token),
|
||||||
carouselDotOffset: token.calc(controlHeightSM).div(2).equal(),
|
genCarouselVerticalStyle(token),
|
||||||
});
|
genCarouselRtlStyle(token),
|
||||||
|
],
|
||||||
return [
|
|
||||||
genCarouselStyle(carouselToken),
|
|
||||||
genCarouselVerticalStyle(carouselToken),
|
|
||||||
genCarouselRtlStyle(carouselToken),
|
|
||||||
];
|
|
||||||
},
|
|
||||||
prepareComponentToken,
|
prepareComponentToken,
|
||||||
{
|
{
|
||||||
deprecatedTokens: [['dotWidthActive', 'dotActiveWidth']],
|
deprecatedTokens: [['dotWidthActive', 'dotActiveWidth']],
|
||||||
|
|||||||
@ -308,10 +308,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
|||||||
width: pickerControlIconSize,
|
width: pickerControlIconSize,
|
||||||
height: pickerControlIconSize,
|
height: pickerControlIconSize,
|
||||||
border: `0 solid currentcolor`,
|
border: `0 solid currentcolor`,
|
||||||
borderBlockStartWidth: pickerControlIconBorderWidth,
|
borderBlockWidth: `${unit(pickerControlIconBorderWidth)} 0`,
|
||||||
borderBlockEndWidth: 0,
|
borderInlineWidth: `${unit(pickerControlIconBorderWidth)} 0`,
|
||||||
borderInlineStartWidth: pickerControlIconBorderWidth,
|
|
||||||
borderInlineEndWidth: 0,
|
|
||||||
content: '""',
|
content: '""',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -326,10 +324,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
|||||||
width: pickerControlIconSize,
|
width: pickerControlIconSize,
|
||||||
height: pickerControlIconSize,
|
height: pickerControlIconSize,
|
||||||
border: '0 solid currentcolor',
|
border: '0 solid currentcolor',
|
||||||
borderBlockStartWidth: pickerControlIconBorderWidth,
|
borderBlockWidth: `${unit(pickerControlIconBorderWidth)} 0`,
|
||||||
borderBlockEndWidth: 0,
|
borderInlineWidth: `${unit(pickerControlIconBorderWidth)} 0`,
|
||||||
borderInlineStartWidth: pickerControlIconBorderWidth,
|
|
||||||
borderInlineEndWidth: 0,
|
|
||||||
content: '""',
|
content: '""',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user