diff --git a/components/skeleton/Avatar.tsx b/components/skeleton/Avatar.tsx index 4303494aa8..2b47aa6ede 100644 --- a/components/skeleton/Avatar.tsx +++ b/components/skeleton/Avatar.tsx @@ -4,6 +4,7 @@ import classNames from '../_util/classNames'; import initDefaultProps from '../_util/props-util/initDefaultProps'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import Element, { skeletonElementProps } from './Element'; +import useStyle from './style'; export const avatarProps = () => { return { @@ -23,16 +24,22 @@ const SkeletonAvatar = defineComponent({ }), setup(props) { const { prefixCls } = useConfigInject('skeleton', props); + const [wrapSSR, hashId] = useStyle(prefixCls); const cls = computed(() => - classNames(prefixCls.value, `${prefixCls.value}-element`, { - [`${prefixCls.value}-active`]: props.active, - }), + classNames( + prefixCls.value, + `${prefixCls.value}-element`, + { + [`${prefixCls.value}-active`]: props.active, + }, + hashId.value, + ), ); return () => { - return ( + return wrapSSR(
-
+ , ); }; }, diff --git a/components/skeleton/Button.tsx b/components/skeleton/Button.tsx index 40a28b8324..8e32ad00d6 100644 --- a/components/skeleton/Button.tsx +++ b/components/skeleton/Button.tsx @@ -4,6 +4,7 @@ import classNames from '../_util/classNames'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import { initDefaultProps } from '../_util/props-util'; import Element, { skeletonElementProps } from './Element'; +import useStyle from './style'; export const skeletonButtonProps = () => { return { @@ -23,17 +24,23 @@ const SkeletonButton = defineComponent({ }), setup(props) { const { prefixCls } = useConfigInject('skeleton', props); + const [wrapSSR, hashId] = useStyle(prefixCls); const cls = computed(() => - classNames(prefixCls.value, `${prefixCls.value}-element`, { - [`${prefixCls.value}-active`]: props.active, - [`${prefixCls.value}-block`]: props.block, - }), + classNames( + prefixCls.value, + `${prefixCls.value}-element`, + { + [`${prefixCls.value}-active`]: props.active, + [`${prefixCls.value}-block`]: props.block, + }, + hashId.value, + ), ); return () => { - return ( + return wrapSSR(
-
+ , ); }; }, diff --git a/components/skeleton/Image.tsx b/components/skeleton/Image.tsx index bf068d0656..6bfe8c009a 100644 --- a/components/skeleton/Image.tsx +++ b/components/skeleton/Image.tsx @@ -4,6 +4,7 @@ import useConfigInject from '../config-provider/hooks/useConfigInject'; import omit from '../_util/omit'; import type { SkeletonElementProps } from './Element'; import { skeletonElementProps } from './Element'; +import useStyle from './style'; export type SkeletonImageProps = Omit; @@ -16,9 +17,12 @@ const SkeletonImage = defineComponent({ props: omit(skeletonElementProps(), ['size', 'shape', 'active']), setup(props) { const { prefixCls } = useConfigInject('skeleton', props); - const cls = computed(() => classNames(prefixCls.value, `${prefixCls.value}-element`)); + const [wrapSSR, hashId] = useStyle(prefixCls); + const cls = computed(() => + classNames(prefixCls.value, `${prefixCls.value}-element`, hashId.value), + ); return () => { - return ( + return wrapSSR(
-
+ , ); }; }, diff --git a/components/skeleton/Input.tsx b/components/skeleton/Input.tsx index 1e1f7ccef1..a1a4e9ca94 100644 --- a/components/skeleton/Input.tsx +++ b/components/skeleton/Input.tsx @@ -5,6 +5,7 @@ import useConfigInject from '../config-provider/hooks/useConfigInject'; import type { SkeletonElementProps } from './Element'; import Element, { skeletonElementProps } from './Element'; import omit from '../_util/omit'; +import useStyle from './style'; export interface SkeletonInputProps extends Omit { size?: 'large' | 'small' | 'default'; @@ -21,17 +22,23 @@ const SkeletonInput = defineComponent({ }, setup(props) { const { prefixCls } = useConfigInject('skeleton', props); + const [wrapSSR, hashId] = useStyle(prefixCls); const cls = computed(() => - classNames(prefixCls.value, `${prefixCls.value}-element`, { - [`${prefixCls.value}-active`]: props.active, - [`${prefixCls.value}-block`]: props.block, - }), + classNames( + prefixCls.value, + `${prefixCls.value}-element`, + { + [`${prefixCls.value}-active`]: props.active, + [`${prefixCls.value}-block`]: props.block, + }, + hashId.value, + ), ); return () => { - return ( + return wrapSSR(
-
+ , ); }; }, diff --git a/components/skeleton/Skeleton.tsx b/components/skeleton/Skeleton.tsx index 022e1c3482..628667189f 100644 --- a/components/skeleton/Skeleton.tsx +++ b/components/skeleton/Skeleton.tsx @@ -9,6 +9,7 @@ import type { SkeletonParagraphProps } from './Paragraph'; import Paragraph from './Paragraph'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import Element from './Element'; +import useStyle from './style'; /* This only for skeleton internal. */ type SkeletonAvatarProps = Omit; @@ -89,6 +90,8 @@ const Skeleton = defineComponent({ }), setup(props, { slots }) { const { prefixCls, direction } = useConfigInject('skeleton', props); + const [wrapSSR, hashId] = useStyle(prefixCls); + return () => { const { loading, avatar, title, paragraph, active, round } = props; const pre = prefixCls.value; @@ -152,13 +155,14 @@ const Skeleton = defineComponent({ [`${pre}-active`]: active, [`${pre}-rtl`]: direction.value === 'rtl', [`${pre}-round`]: round, + [hashId.value]: true, }); - return ( + return wrapSSR(
{avatarNode} {contentNode} -
+ , ); } return slots.default?.(); diff --git a/components/skeleton/demo/children.vue b/components/skeleton/demo/children.vue index 9203967103..dc42a10143 100644 --- a/components/skeleton/demo/children.vue +++ b/components/skeleton/demo/children.vue @@ -17,7 +17,7 @@ Skeleton contains sub component. - diff --git a/components/skeleton/style/index.less b/components/skeleton/style/index.less deleted file mode 100644 index c4ca85b58f..0000000000 --- a/components/skeleton/style/index.less +++ /dev/null @@ -1,285 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@skeleton-prefix-cls: ~'@{ant-prefix}-skeleton'; -@skeleton-avatar-prefix-cls: ~'@{skeleton-prefix-cls}-avatar'; -@skeleton-title-prefix-cls: ~'@{skeleton-prefix-cls}-title'; -@skeleton-paragraph-prefix-cls: ~'@{skeleton-prefix-cls}-paragraph'; -@skeleton-button-prefix-cls: ~'@{skeleton-prefix-cls}-button'; -@skeleton-input-prefix-cls: ~'@{skeleton-prefix-cls}-input'; -@skeleton-image-prefix-cls: ~'@{skeleton-prefix-cls}-image'; -@skeleton-block-radius: 4px; - -.@{skeleton-prefix-cls} { - display: table; - width: 100%; - - &-header { - display: table-cell; - padding-right: @padding-md; - vertical-align: top; - - // Avatar - .@{skeleton-avatar-prefix-cls} { - .skeleton-element-avatar(); - } - } - - &-content { - display: table-cell; - width: 100%; - vertical-align: top; - - // Title - .@{skeleton-title-prefix-cls} { - width: 100%; - height: @skeleton-title-height; - margin-top: @margin-md; - background: @skeleton-color; - border-radius: @skeleton-block-radius; - - + .@{skeleton-paragraph-prefix-cls} { - margin-top: @skeleton-title-paragraph-margin-top; - } - } - - // paragraph - .@{skeleton-paragraph-prefix-cls} { - padding: 0; - - > li { - width: 100%; - height: @skeleton-paragraph-li-height; - list-style: none; - background: @skeleton-color; - border-radius: @skeleton-block-radius; - - &:last-child:not(:first-child):not(:nth-child(2)) { - width: 61%; - } - - + li { - margin-top: @skeleton-paragraph-li-margin-top; - } - } - } - } - - &-with-avatar &-content { - // Title - .@{skeleton-title-prefix-cls} { - margin-top: @margin-sm; - - + .@{skeleton-paragraph-prefix-cls} { - margin-top: @skeleton-paragraph-margin-top; - } - } - } - - &-round &-content { - .@{skeleton-title-prefix-cls}, - .@{skeleton-paragraph-prefix-cls} > li { - border-radius: 100px; - } - } - - // With active animation - &.@{skeleton-prefix-cls}-active { - & .@{skeleton-prefix-cls}-content { - .@{skeleton-title-prefix-cls}, - .@{skeleton-paragraph-prefix-cls} > li { - .skeleton-color(); - } - } - - .@{skeleton-avatar-prefix-cls} { - .skeleton-color(); - } - - .@{skeleton-button-prefix-cls} { - .skeleton-color(); - } - - .@{skeleton-input-prefix-cls} { - .skeleton-color(); - } - - .@{skeleton-image-prefix-cls} { - .skeleton-color(); - } - } - - // Skeleton Block Button, Input - &.@{skeleton-prefix-cls}-block { - width: 100%; - - .@{skeleton-button-prefix-cls} { - width: 100%; - } - - .@{skeleton-input-prefix-cls} { - width: 100%; - } - } - - // Skeleton element - &-element { - display: inline-block; - width: auto; - - .@{skeleton-button-prefix-cls} { - .skeleton-element-button(); - } - - .@{skeleton-avatar-prefix-cls} { - .skeleton-element-avatar(); - } - - .@{skeleton-input-prefix-cls} { - .skeleton-element-input(); - } - - .@{skeleton-image-prefix-cls} { - .skeleton-element-image(); - } - } -} -// Button -.skeleton-element-button() { - display: inline-block; - vertical-align: top; - background: @skeleton-color; - border-radius: @border-radius-base; - - .skeleton-element-button-size(@btn-height-base); - - &-lg { - .skeleton-element-button-size(@btn-height-lg); - } - - &-sm { - .skeleton-element-button-size(@btn-height-sm); - } -} -// Avatar -.skeleton-element-avatar() { - display: inline-block; - vertical-align: top; - background: @skeleton-color; - - .skeleton-element-avatar-size(@avatar-size-base); - - &-lg { - .skeleton-element-avatar-size(@avatar-size-lg); - } - - &-sm { - .skeleton-element-avatar-size(@avatar-size-sm); - } -} - -// Input -.skeleton-element-input() { - display: inline-block; - vertical-align: top; - background: @skeleton-color; - - .skeleton-element-input-size(@input-height-base); - - &-lg { - .skeleton-element-input-size(@input-height-lg); - } - - &-sm { - .skeleton-element-input-size(@input-height-sm); - } -} - -// Image -.skeleton-element-image() { - display: flex; - align-items: center; - justify-content: center; - vertical-align: top; - background: @skeleton-color; - - .skeleton-element-image-size(@image-size-base*2); - - &-path { - fill: #bfbfbf; - } - - &-svg { - .skeleton-element-image-size(@image-size-base); - max-width: @image-size-base * 4; - max-height: @image-size-base * 4; - } -} - -.skeleton-element-avatar-size(@size) { - width: @size; - .skeleton-element-common-size(@size); - - &.@{skeleton-avatar-prefix-cls}-circle { - border-radius: 50%; - } -} - -.skeleton-element-button-size(@size) { - width: @size * 2; - min-width: @size * 2; - .skeleton-element-common-size(@size); - - &.@{skeleton-button-prefix-cls}-circle { - width: @size; - min-width: @size; - border-radius: 50%; - } - - &.@{skeleton-button-prefix-cls}-round { - border-radius: @size; - } -} - -.skeleton-element-input-size(@size) { - width: @size * 5; - min-width: @size * 5; - .skeleton-element-common-size(@size); -} - -.skeleton-element-image-size(@size) { - width: @size; - .skeleton-element-common-size(@size); - - &.@{skeleton-image-prefix-cls}-circle { - border-radius: 50%; - } -} - -.skeleton-element-common-size(@size) { - height: @size; - line-height: @size; -} - -.skeleton-color() { - background: linear-gradient( - 90deg, - @skeleton-color 25%, - @skeleton-to-color 37%, - @skeleton-color 63% - ); - background-size: 400% 100%; - animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite; -} - -@keyframes ~"@{skeleton-prefix-cls}-loading" { - 0% { - background-position: 100% 50%; - } - - 100% { - background-position: 0 50%; - } -} - -@import './rtl'; diff --git a/components/skeleton/style/index.ts b/components/skeleton/style/index.ts new file mode 100644 index 0000000000..07cbfd48b4 --- /dev/null +++ b/components/skeleton/style/index.ts @@ -0,0 +1,388 @@ +import type { CSSObject } from '../../_util/cssinjs'; +import { Keyframes } from '../../_util/cssinjs'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; + +export type ComponentToken = { + color: string; + colorGradientEnd: string; +}; + +const skeletonClsLoading = new Keyframes(`ant-skeleton-loading`, { + '0%': { + transform: 'translateX(-37.5%)', + }, + '100%': { + transform: 'translateX(37.5%)', + }, +}); + +interface SkeletonToken extends FullToken<'Skeleton'> { + skeletonAvatarCls: string; + skeletonTitleCls: string; + skeletonParagraphCls: string; + skeletonButtonCls: string; + skeletonInputCls: string; + skeletonImageCls: string; + imageSizeBase: number; + skeletonTitleHeight: number; + skeletonBlockRadius: number; + skeletonParagraphLineHeight: number; + skeletonParagraphMarginTop: number; + skeletonLoadingBackground: string; + skeletonLoadingMotionDuration: string; + borderRadius: number; +} + +const genSkeletonElementCommonSize = (size: number): CSSObject => ({ + height: size, + lineHeight: `${size}px`, +}); + +const genSkeletonElementAvatarSize = (size: number): CSSObject => ({ + width: size, + ...genSkeletonElementCommonSize(size), +}); + +const genSkeletonColor = (token: SkeletonToken): CSSObject => ({ + position: 'relative', + // fix https://github.com/ant-design/ant-design/issues/36444 + // https://monshin.github.io/202109/css/safari-border-radius-overflow-hidden/ + /* stylelint-disable-next-line property-no-vendor-prefix,value-no-vendor-prefix */ + zIndex: 0, + overflow: 'hidden', + background: 'transparent', + '&::after': { + position: 'absolute', + top: 0, + insetInlineEnd: '-150%', + bottom: 0, + insetInlineStart: '-150%', + background: token.skeletonLoadingBackground, + animationName: skeletonClsLoading, + animationDuration: token.skeletonLoadingMotionDuration, + animationTimingFunction: 'ease', + animationIterationCount: 'infinite', + content: '""', + }, +}); + +const genSkeletonElementInputSize = (size: number): CSSObject => ({ + width: size * 5, + minWidth: size * 5, + ...genSkeletonElementCommonSize(size), +}); + +const genSkeletonElementAvatar = (token: SkeletonToken): CSSObject => { + const { skeletonAvatarCls, color, controlHeight, controlHeightLG, controlHeightSM } = token; + return { + [`${skeletonAvatarCls}`]: { + display: 'inline-block', + verticalAlign: 'top', + background: color, + ...genSkeletonElementAvatarSize(controlHeight), + }, + [`${skeletonAvatarCls}${skeletonAvatarCls}-circle`]: { + borderRadius: '50%', + }, + [`${skeletonAvatarCls}${skeletonAvatarCls}-lg`]: { + ...genSkeletonElementAvatarSize(controlHeightLG), + }, + [`${skeletonAvatarCls}${skeletonAvatarCls}-sm`]: { + ...genSkeletonElementAvatarSize(controlHeightSM), + }, + }; +}; + +const genSkeletonElementInput = (token: SkeletonToken): CSSObject => { + const { + controlHeight, + borderRadiusSM, + skeletonInputCls, + controlHeightLG, + controlHeightSM, + color, + } = token; + return { + [`${skeletonInputCls}`]: { + display: 'inline-block', + verticalAlign: 'top', + background: color, + borderRadius: borderRadiusSM, + ...genSkeletonElementInputSize(controlHeight), + }, + + [`${skeletonInputCls}-lg`]: { + ...genSkeletonElementInputSize(controlHeightLG), + }, + + [`${skeletonInputCls}-sm`]: { + ...genSkeletonElementInputSize(controlHeightSM), + }, + }; +}; + +const genSkeletonElementImageSize = (size: number): CSSObject => ({ + width: size, + ...genSkeletonElementCommonSize(size), +}); + +const genSkeletonElementImage = (token: SkeletonToken): CSSObject => { + const { skeletonImageCls, imageSizeBase, color, borderRadiusSM } = token; + return { + [`${skeletonImageCls}`]: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + verticalAlign: 'top', + background: color, + borderRadius: borderRadiusSM, + ...genSkeletonElementImageSize(imageSizeBase * 2), + [`${skeletonImageCls}-path`]: { + fill: '#bfbfbf', + }, + [`${skeletonImageCls}-svg`]: { + ...genSkeletonElementImageSize(imageSizeBase), + maxWidth: imageSizeBase * 4, + maxHeight: imageSizeBase * 4, + }, + [`${skeletonImageCls}-svg${skeletonImageCls}-svg-circle`]: { + borderRadius: '50%', + }, + }, + [`${skeletonImageCls}${skeletonImageCls}-circle`]: { + borderRadius: '50%', + }, + }; +}; +const genSkeletonElementButtonShape = ( + token: SkeletonToken, + size: number, + buttonCls: string, +): CSSObject => { + const { skeletonButtonCls } = token; + return { + [`${buttonCls}${skeletonButtonCls}-circle`]: { + width: size, + minWidth: size, + borderRadius: '50%', + }, + [`${buttonCls}${skeletonButtonCls}-round`]: { + borderRadius: size, + }, + }; +}; + +const genSkeletonElementButtonSize = (size: number): CSSObject => ({ + width: size * 2, + minWidth: size * 2, + ...genSkeletonElementCommonSize(size), +}); + +const genSkeletonElementButton = (token: SkeletonToken): CSSObject => { + const { + borderRadiusSM, + skeletonButtonCls, + controlHeight, + controlHeightLG, + controlHeightSM, + color, + } = token; + return { + [`${skeletonButtonCls}`]: { + display: 'inline-block', + verticalAlign: 'top', + background: color, + borderRadius: borderRadiusSM, + width: controlHeight * 2, + minWidth: controlHeight * 2, + ...genSkeletonElementButtonSize(controlHeight), + }, + ...genSkeletonElementButtonShape(token, controlHeight, skeletonButtonCls), + + [`${skeletonButtonCls}-lg`]: { + ...genSkeletonElementButtonSize(controlHeightLG), + }, + ...genSkeletonElementButtonShape(token, controlHeightLG, `${skeletonButtonCls}-lg`), + + [`${skeletonButtonCls}-sm`]: { + ...genSkeletonElementButtonSize(controlHeightSM), + }, + ...genSkeletonElementButtonShape(token, controlHeightSM, `${skeletonButtonCls}-sm`), + }; +}; + +// =============================== Base =============================== +const genBaseStyle: GenerateStyle = (token: SkeletonToken) => { + const { + componentCls, + skeletonAvatarCls, + skeletonTitleCls, + skeletonParagraphCls, + skeletonButtonCls, + skeletonInputCls, + skeletonImageCls, + controlHeight, + controlHeightLG, + controlHeightSM, + color, + padding, + marginSM, + borderRadius, + skeletonTitleHeight, + skeletonBlockRadius, + skeletonParagraphLineHeight, + controlHeightXS, + skeletonParagraphMarginTop, + } = token; + + return { + [`${componentCls}`]: { + display: 'table', + width: '100%', + + [`${componentCls}-header`]: { + display: 'table-cell', + paddingInlineEnd: padding, + verticalAlign: 'top', + + // Avatar + [`${skeletonAvatarCls}`]: { + display: 'inline-block', + verticalAlign: 'top', + background: color, + ...genSkeletonElementAvatarSize(controlHeight), + }, + [`${skeletonAvatarCls}-circle`]: { + borderRadius: '50%', + }, + [`${skeletonAvatarCls}-lg`]: { + ...genSkeletonElementAvatarSize(controlHeightLG), + }, + [`${skeletonAvatarCls}-sm`]: { + ...genSkeletonElementAvatarSize(controlHeightSM), + }, + }, + [`${componentCls}-content`]: { + display: 'table-cell', + width: '100%', + verticalAlign: 'top', + + // Title + [`${skeletonTitleCls}`]: { + width: '100%', + height: skeletonTitleHeight, + background: color, + borderRadius: skeletonBlockRadius, + [`+ ${skeletonParagraphCls}`]: { + marginBlockStart: controlHeightSM, + }, + }, + + // paragraph + [`${skeletonParagraphCls}`]: { + padding: 0, + '> li': { + width: '100%', + height: skeletonParagraphLineHeight, + listStyle: 'none', + background: color, + borderRadius: skeletonBlockRadius, + '+ li': { + marginBlockStart: controlHeightXS, + }, + }, + }, + + [`${skeletonParagraphCls}> li:last-child:not(:first-child):not(:nth-child(2))`]: { + width: '61%', + }, + }, + + [`&-round ${componentCls}-content`]: { + [`${skeletonTitleCls}, ${skeletonParagraphCls} > li`]: { + borderRadius, + }, + }, + }, + [`${componentCls}-with-avatar ${componentCls}-content`]: { + // Title + [`${skeletonTitleCls}`]: { + marginBlockStart: marginSM, + + [`+ ${skeletonParagraphCls}`]: { + marginBlockStart: skeletonParagraphMarginTop, + }, + }, + }, + // Skeleton element + [`${componentCls}${componentCls}-element`]: { + display: 'inline-block', + width: 'auto', + + ...genSkeletonElementButton(token), + ...genSkeletonElementAvatar(token), + ...genSkeletonElementInput(token), + ...genSkeletonElementImage(token), + }, + // Skeleton Block Button, Input + [`${componentCls}${componentCls}-block`]: { + width: '100%', + + [`${skeletonButtonCls}`]: { + width: '100%', + }, + + [`${skeletonInputCls}`]: { + width: '100%', + }, + }, + // With active animation + [`${componentCls}${componentCls}-active`]: { + [` + ${skeletonTitleCls}, + ${skeletonParagraphCls} > li, + ${skeletonAvatarCls}, + ${skeletonButtonCls}, + ${skeletonInputCls}, + ${skeletonImageCls} + `]: { + ...genSkeletonColor(token), + }, + }, + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook( + 'Skeleton', + token => { + const { componentCls } = token; + + const skeletonToken = mergeToken(token, { + skeletonAvatarCls: `${componentCls}-avatar`, + skeletonTitleCls: `${componentCls}-title`, + skeletonParagraphCls: `${componentCls}-paragraph`, + skeletonButtonCls: `${componentCls}-button`, + skeletonInputCls: `${componentCls}-input`, + skeletonImageCls: `${componentCls}-image`, + imageSizeBase: token.controlHeight * 1.5, + skeletonTitleHeight: token.controlHeight / 2, + skeletonBlockRadius: token.borderRadiusSM, + skeletonParagraphLineHeight: token.controlHeight / 2, + skeletonParagraphMarginTop: token.marginLG + token.marginXXS, + borderRadius: 100, // Large number to make capsule shape + skeletonLoadingBackground: `linear-gradient(90deg, ${token.color} 25%, ${token.colorGradientEnd} 37%, ${token.color} 63%)`, + skeletonLoadingMotionDuration: '1.4s', + }); + return [genBaseStyle(skeletonToken)]; + }, + token => { + const { colorFillContent, colorFill } = token; + + return { + color: colorFillContent, + colorGradientEnd: colorFill, + }; + }, +); diff --git a/components/skeleton/style/index.tsx b/components/skeleton/style/index.tsx deleted file mode 100644 index 3a3ab0de59..0000000000 --- a/components/skeleton/style/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import '../../style/index.less'; -import './index.less'; diff --git a/components/skeleton/style/rtl.less b/components/skeleton/style/rtl.less deleted file mode 100644 index 8ba4be3730..0000000000 --- a/components/skeleton/style/rtl.less +++ /dev/null @@ -1,48 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@skeleton-prefix-cls: ~'@{ant-prefix}-skeleton'; -@skeleton-avatar-prefix-cls: ~'@{skeleton-prefix-cls}-avatar'; -@skeleton-title-prefix-cls: ~'@{skeleton-prefix-cls}-title'; -@skeleton-paragraph-prefix-cls: ~'@{skeleton-prefix-cls}-paragraph'; - -.@{skeleton-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-header { - .@{skeleton-prefix-cls}-rtl & { - padding-right: 0; - padding-left: 16px; - } - } - - // With active animation - &.@{skeleton-prefix-cls}-active { - & .@{skeleton-prefix-cls}-content { - .@{skeleton-title-prefix-cls}, - .@{skeleton-paragraph-prefix-cls} > li { - .@{skeleton-prefix-cls}-rtl& { - animation-name: ~'@{skeleton-prefix-cls}-loading-rtl'; - } - } - } - - .@{skeleton-avatar-prefix-cls} { - .@{skeleton-prefix-cls}-rtl& { - animation-name: ~'@{skeleton-prefix-cls}-loading-rtl'; - } - } - } -} - -@keyframes ~"@{skeleton-prefix-cls}-loading-rtl" { - 0% { - background-position: 0% 50%; - } - - 100% { - background-position: 100% 50%; - } -} diff --git a/components/style.ts b/components/style.ts index 606436b77a..eb1179207a 100644 --- a/components/style.ts +++ b/components/style.ts @@ -49,7 +49,7 @@ import './layout/style'; import './list/style'; import './tree-select/style'; import './drawer/style'; -import './skeleton/style'; +// import './skeleton/style'; import './comment/style'; // import './config-provider/style'; import './empty/style'; diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index cb19bb3792..d58511a5b7 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -32,7 +32,7 @@ import type { ComponentToken as NotificationComponentToken } from '../../notific // import type { ComponentToken as ResultComponentToken } from '../../result/style'; // import type { ComponentToken as SegmentedComponentToken } from '../../segmented/style'; // import type { ComponentToken as SelectComponentToken } from '../../select/style'; -// import type { ComponentToken as SkeletonComponentToken } from '../../skeleton/style'; +import type { ComponentToken as SkeletonComponentToken } from '../../skeleton/style'; // import type { ComponentToken as SliderComponentToken } from '../../slider/style'; // import type { ComponentToken as SpaceComponentToken } from '../../space/style'; import type { ComponentToken as SpinComponentToken } from '../../spin/style'; @@ -88,7 +88,7 @@ export interface ComponentTokenMap { // Result?: ResultComponentToken; // Segmented?: SegmentedComponentToken; // Select?: SelectComponentToken; - // Skeleton?: SkeletonComponentToken; + Skeleton?: SkeletonComponentToken; // Slider?: SliderComponentToken; Spin?: SpinComponentToken; Statistic?: {};