mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
refactor: move Carousel to css in js (#34634)
* refactor: move to css in js * move some styles * fix styles * add more styles * add variables * add rtl styles * use rootPrefixCls * fix rtl style * improve code style * use context * fix some issues * refactor: argument usage * refactor: argument usage * remove unused css code
This commit is contained in:
afc163
GitHub
parent
72bb437548
commit
0e7e4fbef5
@ -2,6 +2,7 @@ import * as React from 'react';
|
|||||||
import SlickCarousel, { Settings } from '@ant-design/react-slick';
|
import SlickCarousel, { Settings } from '@ant-design/react-slick';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { ConfigContext } from '../config-provider';
|
import { ConfigContext } from '../config-provider';
|
||||||
|
import useStyle from './style';
|
||||||
|
|
||||||
export type CarouselEffect = 'scrollx' | 'fade';
|
export type CarouselEffect = 'scrollx' | 'fade';
|
||||||
export type DotPosition = 'top' | 'bottom' | 'left' | 'right';
|
export type DotPosition = 'top' | 'bottom' | 'left' | 'right';
|
||||||
@ -78,12 +79,18 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
|
|||||||
typeof dots === 'boolean' ? false : dots?.className,
|
typeof dots === 'boolean' ? false : dots?.className,
|
||||||
);
|
);
|
||||||
|
|
||||||
const className = classNames(prefixCls, {
|
const [wrapSSR, hashId] = useStyle(prefixCls, getPrefixCls());
|
||||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
||||||
[`${prefixCls}-vertical`]: newProps.vertical,
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
const className = classNames(
|
||||||
|
prefixCls,
|
||||||
|
{
|
||||||
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||||
|
[`${prefixCls}-vertical`]: newProps.vertical,
|
||||||
|
},
|
||||||
|
hashId,
|
||||||
|
);
|
||||||
|
|
||||||
|
return wrapSSR(
|
||||||
<div className={className}>
|
<div className={className}>
|
||||||
<SlickCarousel
|
<SlickCarousel
|
||||||
ref={slickRef}
|
ref={slickRef}
|
||||||
@ -93,7 +100,7 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
|
|||||||
arrows={arrows}
|
arrows={arrows}
|
||||||
draggable={draggable}
|
draggable={draggable}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,294 +1,294 @@
|
|||||||
@import '../../style/themes/index';
|
// @import '../../style/themes/index';
|
||||||
@import '../../style/mixins/index';
|
// @import '../../style/mixins/index';
|
||||||
|
|
||||||
@carousel-prefix-cls: ~'@{ant-prefix}-carousel';
|
// @carousel-prefix-cls: ~'@{ant-prefix}-carousel';
|
||||||
|
|
||||||
.@{carousel-prefix-cls} {
|
// .@{carousel-prefix-cls} {
|
||||||
.reset-component();
|
// .reset-component();
|
||||||
|
|
||||||
.slick-slider {
|
// .slick-slider {
|
||||||
position: relative;
|
// position: relative;
|
||||||
display: block;
|
// display: block;
|
||||||
box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
touch-action: pan-y;
|
// touch-action: pan-y;
|
||||||
-webkit-touch-callout: none;
|
// -webkit-touch-callout: none;
|
||||||
-webkit-tap-highlight-color: transparent;
|
// -webkit-tap-highlight-color: transparent;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.slick-list {
|
// .slick-list {
|
||||||
position: relative;
|
// position: relative;
|
||||||
display: block;
|
// display: block;
|
||||||
margin: 0;
|
// margin: 0;
|
||||||
padding: 0;
|
// padding: 0;
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
|
|
||||||
&:focus {
|
// &:focus {
|
||||||
outline: none;
|
// outline: none;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&.dragging {
|
// &.dragging {
|
||||||
cursor: pointer;
|
// cursor: pointer;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.slick-slide {
|
// .slick-slide {
|
||||||
pointer-events: none;
|
// pointer-events: none;
|
||||||
|
|
||||||
// https://github.com/ant-design/ant-design/issues/23294
|
// // https://github.com/ant-design/ant-design/issues/23294
|
||||||
input.@{ant-prefix}-radio-input,
|
// input.@{ant-prefix}-radio-input,
|
||||||
input.@{ant-prefix}-checkbox-input {
|
// input.@{ant-prefix}-checkbox-input {
|
||||||
visibility: hidden;
|
// visibility: hidden;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&.slick-active {
|
// &.slick-active {
|
||||||
pointer-events: auto;
|
// pointer-events: auto;
|
||||||
|
|
||||||
input.@{ant-prefix}-radio-input,
|
// input.@{ant-prefix}-radio-input,
|
||||||
input.@{ant-prefix}-checkbox-input {
|
// input.@{ant-prefix}-checkbox-input {
|
||||||
visibility: visible;
|
// visibility: visible;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// fix Carousel content height not match parent node
|
// // fix Carousel content height not match parent node
|
||||||
// when children is empty node
|
// // when children is empty node
|
||||||
// https://github.com/ant-design/ant-design/issues/25878
|
// // https://github.com/ant-design/ant-design/issues/25878
|
||||||
> div > div {
|
// > div > div {
|
||||||
vertical-align: bottom;
|
// vertical-align: bottom;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.slick-slider .slick-track,
|
// .slick-slider .slick-track,
|
||||||
.slick-slider .slick-list {
|
// .slick-slider .slick-list {
|
||||||
transform: translate3d(0, 0, 0);
|
// transform: translate3d(0, 0, 0);
|
||||||
touch-action: pan-y;
|
// touch-action: pan-y;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.slick-track {
|
// .slick-track {
|
||||||
position: relative;
|
// position: relative;
|
||||||
top: 0;
|
// top: 0;
|
||||||
left: 0;
|
// left: 0;
|
||||||
display: block;
|
// display: block;
|
||||||
|
|
||||||
&::before,
|
// &::before,
|
||||||
&::after {
|
// &::after {
|
||||||
display: table;
|
// display: table;
|
||||||
content: '';
|
// content: '';
|
||||||
}
|
// }
|
||||||
|
|
||||||
&::after {
|
// &::after {
|
||||||
clear: both;
|
// clear: both;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.slick-loading & {
|
// .slick-loading & {
|
||||||
visibility: hidden;
|
// visibility: hidden;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.slick-slide {
|
// .slick-slide {
|
||||||
display: none;
|
// display: none;
|
||||||
float: left;
|
// float: left;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
min-height: 1px;
|
// min-height: 1px;
|
||||||
|
|
||||||
img {
|
// img {
|
||||||
display: block;
|
// display: block;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&.slick-loading img {
|
// &.slick-loading img {
|
||||||
display: none;
|
// display: none;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&.dragging img {
|
// &.dragging img {
|
||||||
pointer-events: none;
|
// pointer-events: none;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.slick-initialized .slick-slide {
|
// .slick-initialized .slick-slide {
|
||||||
display: block;
|
// display: block;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.slick-loading .slick-slide {
|
// .slick-loading .slick-slide {
|
||||||
visibility: hidden;
|
// visibility: hidden;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.slick-vertical .slick-slide {
|
// .slick-vertical .slick-slide {
|
||||||
display: block;
|
// display: block;
|
||||||
height: auto;
|
// height: auto;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.slick-arrow.slick-hidden {
|
// .slick-arrow.slick-hidden {
|
||||||
display: none;
|
// display: none;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Arrows
|
// // Arrows
|
||||||
.slick-prev,
|
// .slick-prev,
|
||||||
.slick-next {
|
// .slick-next {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 50%;
|
// top: 50%;
|
||||||
display: block;
|
// display: block;
|
||||||
width: 20px;
|
// width: 20px;
|
||||||
height: 20px;
|
// height: 20px;
|
||||||
margin-top: -10px;
|
// margin-top: -10px;
|
||||||
padding: 0;
|
// padding: 0;
|
||||||
color: transparent;
|
// color: transparent;
|
||||||
font-size: 0;
|
// font-size: 0;
|
||||||
line-height: 0;
|
// line-height: 0;
|
||||||
background: transparent;
|
// background: transparent;
|
||||||
border: 0;
|
// border: 0;
|
||||||
outline: none;
|
// outline: none;
|
||||||
cursor: pointer;
|
// cursor: pointer;
|
||||||
|
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
color: transparent;
|
// color: transparent;
|
||||||
background: transparent;
|
// background: transparent;
|
||||||
outline: none;
|
// outline: none;
|
||||||
|
|
||||||
&::before {
|
// &::before {
|
||||||
opacity: 1;
|
// opacity: 1;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
&.slick-disabled::before {
|
// &.slick-disabled::before {
|
||||||
opacity: 0.25;
|
// opacity: 0.25;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.slick-prev {
|
// .slick-prev {
|
||||||
left: -25px;
|
// left: -25px;
|
||||||
|
|
||||||
&::before {
|
// &::before {
|
||||||
content: '←';
|
// content: '←';
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.slick-next {
|
// .slick-next {
|
||||||
right: -25px;
|
// right: -25px;
|
||||||
|
|
||||||
&::before {
|
// &::before {
|
||||||
content: '→';
|
// content: '→';
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Dots
|
// // Dots
|
||||||
.slick-dots {
|
// .slick-dots {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
right: 0;
|
// right: 0;
|
||||||
bottom: 0;
|
// bottom: 0;
|
||||||
left: 0;
|
// left: 0;
|
||||||
z-index: 15;
|
// z-index: 15;
|
||||||
display: flex !important;
|
// display: flex !important;
|
||||||
justify-content: center;
|
// justify-content: center;
|
||||||
margin-right: 15%;
|
// margin-right: 15%;
|
||||||
margin-left: 15%;
|
// margin-left: 15%;
|
||||||
padding-left: 0;
|
// padding-left: 0;
|
||||||
list-style: none;
|
// list-style: none;
|
||||||
|
|
||||||
&-bottom {
|
// &-bottom {
|
||||||
bottom: 12px;
|
// bottom: 12px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-top {
|
// &-top {
|
||||||
top: 12px;
|
// top: 12px;
|
||||||
bottom: auto;
|
// bottom: auto;
|
||||||
}
|
// }
|
||||||
|
|
||||||
li {
|
// li {
|
||||||
position: relative;
|
// position: relative;
|
||||||
display: inline-block;
|
// display: inline-block;
|
||||||
flex: 0 1 auto;
|
// flex: 0 1 auto;
|
||||||
box-sizing: content-box;
|
// box-sizing: content-box;
|
||||||
width: @carousel-dot-width;
|
// width: @carousel-dot-width;
|
||||||
height: @carousel-dot-height;
|
// height: @carousel-dot-height;
|
||||||
margin: 0 2px;
|
// margin: 0 2px;
|
||||||
margin-right: 3px;
|
// margin-right: 3px;
|
||||||
margin-left: 3px;
|
// margin-left: 3px;
|
||||||
padding: 0;
|
// padding: 0;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
text-indent: -999px;
|
// text-indent: -999px;
|
||||||
vertical-align: top;
|
// vertical-align: top;
|
||||||
transition: all 0.5s;
|
// transition: all 0.5s;
|
||||||
|
|
||||||
button {
|
// button {
|
||||||
display: block;
|
// display: block;
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
height: @carousel-dot-height;
|
// height: @carousel-dot-height;
|
||||||
padding: 0;
|
// padding: 0;
|
||||||
color: transparent;
|
// color: transparent;
|
||||||
font-size: 0;
|
// font-size: 0;
|
||||||
background: @component-background;
|
// background: @component-background;
|
||||||
border: 0;
|
// border: 0;
|
||||||
border-radius: 1px;
|
// border-radius: 1px;
|
||||||
outline: none;
|
// outline: none;
|
||||||
cursor: pointer;
|
// cursor: pointer;
|
||||||
opacity: 0.3;
|
// opacity: 0.3;
|
||||||
transition: all 0.5s;
|
// transition: all 0.5s;
|
||||||
|
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
opacity: 0.75;
|
// opacity: 0.75;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
&.slick-active {
|
// &.slick-active {
|
||||||
width: @carousel-dot-active-width;
|
// width: @carousel-dot-active-width;
|
||||||
|
|
||||||
& button {
|
// & button {
|
||||||
background: @component-background;
|
// background: @component-background;
|
||||||
opacity: 1;
|
// opacity: 1;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
opacity: 1;
|
// opacity: 1;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{ant-prefix}-carousel-vertical {
|
// .@{ant-prefix}-carousel-vertical {
|
||||||
.slick-dots {
|
// .slick-dots {
|
||||||
top: 50%;
|
// top: 50%;
|
||||||
bottom: auto;
|
// bottom: auto;
|
||||||
flex-direction: column;
|
// flex-direction: column;
|
||||||
width: @carousel-dot-height;
|
// width: @carousel-dot-height;
|
||||||
height: auto;
|
// height: auto;
|
||||||
margin: 0;
|
// margin: 0;
|
||||||
transform: translateY(-50%);
|
// transform: translateY(-50%);
|
||||||
|
|
||||||
&-left {
|
// &-left {
|
||||||
right: auto;
|
// right: auto;
|
||||||
left: 12px;
|
// left: 12px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-right {
|
// &-right {
|
||||||
right: 12px;
|
// right: 12px;
|
||||||
left: auto;
|
// left: auto;
|
||||||
}
|
// }
|
||||||
|
|
||||||
li {
|
// li {
|
||||||
width: @carousel-dot-height;
|
// width: @carousel-dot-height;
|
||||||
height: @carousel-dot-width;
|
// height: @carousel-dot-width;
|
||||||
margin: 4px 2px;
|
// margin: 4px 2px;
|
||||||
vertical-align: baseline;
|
// vertical-align: baseline;
|
||||||
|
|
||||||
button {
|
// button {
|
||||||
width: @carousel-dot-height;
|
// width: @carousel-dot-height;
|
||||||
height: @carousel-dot-width;
|
// height: @carousel-dot-width;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&.slick-active {
|
// &.slick-active {
|
||||||
width: @carousel-dot-height;
|
// width: @carousel-dot-height;
|
||||||
height: @carousel-dot-active-width;
|
// height: @carousel-dot-active-width;
|
||||||
|
|
||||||
button {
|
// button {
|
||||||
width: @carousel-dot-height;
|
// width: @carousel-dot-height;
|
||||||
height: @carousel-dot-active-width;
|
// height: @carousel-dot-active-width;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@import './rtl';
|
// @import './rtl';
|
||||||
|
|||||||
@ -1,2 +1,355 @@
|
|||||||
import '../../style/index.less';
|
// deps-lint-skip-all
|
||||||
import './index.less';
|
import type { CSSObject } from '@ant-design/cssinjs';
|
||||||
|
import {
|
||||||
|
DerivativeToken,
|
||||||
|
resetComponent,
|
||||||
|
UseComponentStyleResult,
|
||||||
|
useStyleRegister,
|
||||||
|
useToken,
|
||||||
|
GenerateStyle,
|
||||||
|
} from '../../_util/theme';
|
||||||
|
|
||||||
|
interface CarouselToken extends DerivativeToken {
|
||||||
|
antPrefixCls: string;
|
||||||
|
carouselPrefixCls: string;
|
||||||
|
carouselDotWidth: CSSObject['width'];
|
||||||
|
carouselDotHeight: CSSObject['height'];
|
||||||
|
carouselDotActiveWidth: CSSObject['width'];
|
||||||
|
}
|
||||||
|
|
||||||
|
const genCarouselStyle: GenerateStyle<CarouselToken, CSSObject> = token => {
|
||||||
|
const { carouselPrefixCls, antPrefixCls } = token;
|
||||||
|
|
||||||
|
return {
|
||||||
|
[`.${carouselPrefixCls}`]: {
|
||||||
|
...resetComponent(token),
|
||||||
|
|
||||||
|
'.slick-slider': {
|
||||||
|
position: 'relative',
|
||||||
|
display: 'block',
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
touchAction: 'pan-y',
|
||||||
|
WebkitTouchCallout: 'none',
|
||||||
|
WebkitTapHighlightColor: 'transparent',
|
||||||
|
|
||||||
|
'.slick-track, .slick-list': {
|
||||||
|
transform: 'translate3d(0, 0, 0)',
|
||||||
|
touchAction: 'pan-y',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'.slick-list': {
|
||||||
|
position: 'relative',
|
||||||
|
display: 'block',
|
||||||
|
margin: 0,
|
||||||
|
padding: 0,
|
||||||
|
overflow: 'hidden',
|
||||||
|
|
||||||
|
'&:focus': {
|
||||||
|
outline: 'none',
|
||||||
|
},
|
||||||
|
|
||||||
|
'&.dragging': {
|
||||||
|
cursor: 'pointer',
|
||||||
|
},
|
||||||
|
|
||||||
|
'.slick-slide': {
|
||||||
|
pointerEvents: 'none',
|
||||||
|
|
||||||
|
// https://github.com/ant-design/ant-design/issues/23294
|
||||||
|
[`input.${antPrefixCls}-radio-input, input.${antPrefixCls}-checkbox-input`]: {
|
||||||
|
visibility: 'hidden',
|
||||||
|
},
|
||||||
|
|
||||||
|
'&.slick-active': {
|
||||||
|
pointerEvents: 'auto',
|
||||||
|
|
||||||
|
[`input.${antPrefixCls}-radio-input, input.${antPrefixCls}-checkbox-input`]: {
|
||||||
|
visibility: 'visible',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// fix Carousel content height not match parent node
|
||||||
|
// when children is empty node
|
||||||
|
// https://github.com/ant-design/ant-design/issues/25878
|
||||||
|
'> div > div': {
|
||||||
|
verticalAlign: 'bottom',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'.slick-track': {
|
||||||
|
position: 'relative',
|
||||||
|
top: 0,
|
||||||
|
insetInlineStart: 0,
|
||||||
|
display: 'block',
|
||||||
|
|
||||||
|
'&::before, &::after': {
|
||||||
|
display: 'table',
|
||||||
|
content: '""',
|
||||||
|
},
|
||||||
|
|
||||||
|
'&::after': {
|
||||||
|
clear: 'both',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'.slick-slide': {
|
||||||
|
display: 'none',
|
||||||
|
float: 'left',
|
||||||
|
height: '100%',
|
||||||
|
minHeight: 1,
|
||||||
|
|
||||||
|
img: {
|
||||||
|
display: 'block',
|
||||||
|
},
|
||||||
|
|
||||||
|
'&.dragging img': {
|
||||||
|
pointerEvents: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'.slick-initialized .slick-slide': {
|
||||||
|
display: 'block',
|
||||||
|
},
|
||||||
|
|
||||||
|
'.slick-vertical .slick-slide': {
|
||||||
|
display: 'block',
|
||||||
|
height: 'auto',
|
||||||
|
},
|
||||||
|
|
||||||
|
'.slick-arrow.slick-hidden': {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Arrows
|
||||||
|
'.slick-prev, .slick-next': {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
display: 'block',
|
||||||
|
// FIXME hardcode in v4
|
||||||
|
width: 20,
|
||||||
|
height: 20,
|
||||||
|
marginTop: '-10px',
|
||||||
|
padding: 0,
|
||||||
|
color: 'transparent',
|
||||||
|
fontSize: 0,
|
||||||
|
lineHeight: 0,
|
||||||
|
background: 'transparent',
|
||||||
|
border: 0,
|
||||||
|
outline: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
|
||||||
|
'&:hover, &:focus': {
|
||||||
|
color: 'transparent',
|
||||||
|
background: 'transparent',
|
||||||
|
outline: 'none',
|
||||||
|
|
||||||
|
'&::before': {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'&.slick-disabled::before': {
|
||||||
|
opacity: 0.25,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'.slick-prev': {
|
||||||
|
// FIXME hardcode in v4
|
||||||
|
insetInlineStart: -25,
|
||||||
|
|
||||||
|
'&::before': {
|
||||||
|
content: '←',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'.slick-next': {
|
||||||
|
// FIXME hardcode in v4
|
||||||
|
insetInlineEnd: -25,
|
||||||
|
|
||||||
|
'&::before': {
|
||||||
|
content: '→',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Dots
|
||||||
|
'.slick-dots': {
|
||||||
|
position: 'absolute',
|
||||||
|
insetInlineEnd: 0,
|
||||||
|
bottom: 0,
|
||||||
|
insetInlineStart: 0,
|
||||||
|
zIndex: 15,
|
||||||
|
display: 'flex !important',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginInlineEnd: '15%',
|
||||||
|
marginInlineStart: '15%',
|
||||||
|
paddingInlineStart: 0,
|
||||||
|
listStyle: 'none',
|
||||||
|
|
||||||
|
'&-bottom': {
|
||||||
|
// FIXME hardcode in v4
|
||||||
|
bottom: '12px',
|
||||||
|
},
|
||||||
|
|
||||||
|
'&-top': {
|
||||||
|
// FIXME hardcode in v4
|
||||||
|
top: '12px',
|
||||||
|
bottom: 'auto',
|
||||||
|
},
|
||||||
|
|
||||||
|
li: {
|
||||||
|
position: 'relative',
|
||||||
|
display: 'inline-block',
|
||||||
|
flex: '0 1 auto',
|
||||||
|
boxSizing: 'content-box',
|
||||||
|
width: token.carouselDotWidth,
|
||||||
|
height: token.carouselDotHeight,
|
||||||
|
margin: '0 2px',
|
||||||
|
// FIXME hardcode in v4
|
||||||
|
marginInlineEnd: 3,
|
||||||
|
marginInlineStart: 3,
|
||||||
|
padding: 0,
|
||||||
|
textAlign: 'center',
|
||||||
|
textIndent: '-999px',
|
||||||
|
verticalAlign: 'top',
|
||||||
|
transition: `all ${token.motionDurationSlow}`,
|
||||||
|
|
||||||
|
button: {
|
||||||
|
display: 'block',
|
||||||
|
width: '100%',
|
||||||
|
height: token.carouselDotHeight,
|
||||||
|
padding: 0,
|
||||||
|
color: 'transparent',
|
||||||
|
fontSize: 0,
|
||||||
|
background: token.colorBgComponent,
|
||||||
|
border: 0,
|
||||||
|
borderRadius: 1,
|
||||||
|
outline: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
opacity: 0.3,
|
||||||
|
transition: `all ${token.motionDurationSlow}`,
|
||||||
|
|
||||||
|
'&: hover, &:focus': {
|
||||||
|
opacity: 0.75,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'&.slick-active': {
|
||||||
|
width: token.carouselDotActiveWidth,
|
||||||
|
|
||||||
|
'& button': {
|
||||||
|
background: token.colorBgComponent,
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
|
||||||
|
'&: hover, &:focus': {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const genCarouselVerticalStyle: GenerateStyle<CarouselToken, CSSObject> = token => {
|
||||||
|
const { carouselPrefixCls } = token;
|
||||||
|
|
||||||
|
const reverseSizeOfDot = {
|
||||||
|
width: token.carouselDotHeight,
|
||||||
|
height: token.carouselDotWidth,
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
[`.${carouselPrefixCls}-vertical`]: {
|
||||||
|
'.slick-dots': {
|
||||||
|
top: '50%',
|
||||||
|
bottom: 'auto',
|
||||||
|
flexDirection: 'column',
|
||||||
|
width: token.carouselDotHeight,
|
||||||
|
height: 'auto',
|
||||||
|
margin: 0,
|
||||||
|
transform: 'translateY(-50%)',
|
||||||
|
|
||||||
|
'&-left': {
|
||||||
|
insetInlineEnd: 'auto',
|
||||||
|
insetInlineStart: '12px',
|
||||||
|
},
|
||||||
|
|
||||||
|
'&-right': {
|
||||||
|
insetInlineEnd: '12px',
|
||||||
|
insetInlineStart: 'auto',
|
||||||
|
},
|
||||||
|
|
||||||
|
li: {
|
||||||
|
// reverse width and height in vertical situation
|
||||||
|
...reverseSizeOfDot,
|
||||||
|
margin: '4px 2px',
|
||||||
|
verticalAlign: 'baseline',
|
||||||
|
|
||||||
|
button: reverseSizeOfDot,
|
||||||
|
|
||||||
|
'&.slick-active': {
|
||||||
|
...reverseSizeOfDot,
|
||||||
|
|
||||||
|
button: reverseSizeOfDot,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const genCarouselRtlStyle: GenerateStyle<CarouselToken> = token => {
|
||||||
|
const { carouselPrefixCls } = token;
|
||||||
|
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
[`.${carouselPrefixCls}-rtl`]: {
|
||||||
|
direction: 'rtl',
|
||||||
|
|
||||||
|
// Dots
|
||||||
|
'.slick-dots': {
|
||||||
|
[`.${carouselPrefixCls}-rtl&`]: {
|
||||||
|
flexDirection: 'row-reverse',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
[`.${carouselPrefixCls}-vertical`]: {
|
||||||
|
'.slick-dots': {
|
||||||
|
[`.${carouselPrefixCls}-rtl&`]: {
|
||||||
|
flexDirection: 'column',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================== Export ==============================
|
||||||
|
export default function useStyle(prefixCls: string, antPrefixCls: string): UseComponentStyleResult {
|
||||||
|
const [theme, token, hashId] = useToken();
|
||||||
|
|
||||||
|
const carouselToken: CarouselToken = {
|
||||||
|
...token,
|
||||||
|
carouselPrefixCls: prefixCls,
|
||||||
|
antPrefixCls,
|
||||||
|
|
||||||
|
// FIXME
|
||||||
|
carouselDotWidth: 16,
|
||||||
|
carouselDotHeight: 3,
|
||||||
|
carouselDotActiveWidth: 24,
|
||||||
|
};
|
||||||
|
|
||||||
|
return [
|
||||||
|
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
|
||||||
|
genCarouselStyle(carouselToken),
|
||||||
|
genCarouselVerticalStyle(carouselToken),
|
||||||
|
genCarouselRtlStyle(carouselToken),
|
||||||
|
]),
|
||||||
|
hashId,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|||||||
@ -1,54 +1,54 @@
|
|||||||
@import '../../style/themes/index';
|
// @import '../../style/themes/index';
|
||||||
@import '../../style/mixins/index';
|
// @import '../../style/mixins/index';
|
||||||
|
|
||||||
@carousel-prefix-cls: ~'@{ant-prefix}-carousel';
|
// @carousel-prefix-cls: ~'@{ant-prefix}-carousel';
|
||||||
|
|
||||||
.@{carousel-prefix-cls} {
|
// .@{carousel-prefix-cls} {
|
||||||
&-rtl {
|
// &-rtl {
|
||||||
direction: rtl;
|
// direction: rtl;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.slick-track {
|
// .slick-track {
|
||||||
.@{carousel-prefix-cls}-rtl & {
|
// .@{carousel-prefix-cls}-rtl & {
|
||||||
right: 0;
|
// right: 0;
|
||||||
left: auto;
|
// left: auto;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.slick-prev {
|
// .slick-prev {
|
||||||
.@{carousel-prefix-cls}-rtl & {
|
// .@{carousel-prefix-cls}-rtl & {
|
||||||
right: -25px;
|
// right: -25px;
|
||||||
left: auto;
|
// left: auto;
|
||||||
|
|
||||||
&::before {
|
// &::before {
|
||||||
content: '→';
|
// content: '→';
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.slick-next {
|
// .slick-next {
|
||||||
.@{carousel-prefix-cls}-rtl & {
|
// .@{carousel-prefix-cls}-rtl & {
|
||||||
right: auto;
|
// right: auto;
|
||||||
left: -25px;
|
// left: -25px;
|
||||||
|
|
||||||
&::before {
|
// &::before {
|
||||||
content: '←';
|
// content: '←';
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Dots
|
// // Dots
|
||||||
.slick-dots {
|
// .slick-dots {
|
||||||
.@{carousel-prefix-cls}-rtl& {
|
// .@{carousel-prefix-cls}-rtl& {
|
||||||
flex-direction: row-reverse;
|
// flex-direction: row-reverse;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{ant-prefix}-carousel-vertical {
|
// .@{ant-prefix}-carousel-vertical {
|
||||||
.slick-dots {
|
// .slick-dots {
|
||||||
.@{carousel-prefix-cls}-rtl& {
|
// .@{carousel-prefix-cls}-rtl& {
|
||||||
flex-direction: column;
|
// flex-direction: column;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user