Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2d3f40a

Browse files
feat: skeleton css-var (#8326)
Co-authored-by: undefined <undefined>
1 parent e1cfc82 commit 2d3f40a

File tree

6 files changed

+161
-109
lines changed

6 files changed

+161
-109
lines changed

‎components/skeleton/Avatar.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import initDefaultProps from '../_util/props-util/initDefaultProps';
55
import useConfigInject from '../config-provider/hooks/useConfigInject';
66
import Element, { skeletonElementProps } from './Element';
77
import useStyle from './style';
8+
import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
89

910
export const avatarProps = () => {
1011
return {
@@ -24,14 +25,17 @@ const SkeletonAvatar = defineComponent({
2425
}),
2526
setup(props) {
2627
const { prefixCls } = useConfigInject('skeleton', props);
27-
const [wrapSSR, hashId] = useStyle(prefixCls);
28+
const rootCls = useCSSVarCls(prefixCls);
29+
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
2830
const cls = computed(() =>
2931
classNames(
3032
prefixCls.value,
3133
`${prefixCls.value}-element`,
3234
{
3335
[`${prefixCls.value}-active`]: props.active,
3436
},
37+
rootCls.value,
38+
cssVarCls.value,
3539
hashId.value,
3640
),
3741
);

‎components/skeleton/Button.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import useConfigInject from '../config-provider/hooks/useConfigInject';
55
import { initDefaultProps } from '../_util/props-util';
66
import Element, { skeletonElementProps } from './Element';
77
import useStyle from './style';
8+
import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
89

910
export const skeletonButtonProps = () => {
1011
return {
@@ -24,7 +25,8 @@ const SkeletonButton = defineComponent({
2425
}),
2526
setup(props) {
2627
const { prefixCls } = useConfigInject('skeleton', props);
27-
const [wrapSSR, hashId] = useStyle(prefixCls);
28+
const rootCls = useCSSVarCls(prefixCls);
29+
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
2830
const cls = computed(() =>
2931
classNames(
3032
prefixCls.value,
@@ -33,6 +35,8 @@ const SkeletonButton = defineComponent({
3335
[`${prefixCls.value}-active`]: props.active,
3436
[`${prefixCls.value}-block`]: props.block,
3537
},
38+
rootCls.value,
39+
cssVarCls.value,
3640
hashId.value,
3741
),
3842
);

‎components/skeleton/Image.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import omit from '../_util/omit';
55
import type { SkeletonElementProps } from './Element';
66
import { skeletonElementProps } from './Element';
77
import useStyle from './style';
8+
import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
89

910
export type SkeletonImageProps = Omit<SkeletonElementProps, 'size' | 'shape' | 'active'>;
1011

@@ -17,9 +18,16 @@ const SkeletonImage = defineComponent({
1718
props: omit(skeletonElementProps(), ['size', 'shape', 'active']),
1819
setup(props) {
1920
const { prefixCls } = useConfigInject('skeleton', props);
20-
const [wrapSSR, hashId] = useStyle(prefixCls);
21+
const rootCls = useCSSVarCls(prefixCls);
22+
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
2123
const cls = computed(() =>
22-
classNames(prefixCls.value, `${prefixCls.value}-element`, hashId.value),
24+
classNames(
25+
prefixCls.value,
26+
`${prefixCls.value}-element`,
27+
rootCls.value,
28+
hashId.value,
29+
cssVarCls.value,
30+
),
2331
);
2432
return () => {
2533
return wrapSSR(

‎components/skeleton/Input.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type { SkeletonElementProps } from './Element';
66
import Element, { skeletonElementProps } from './Element';
77
import omit from '../_util/omit';
88
import useStyle from './style';
9+
import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
910

1011
export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
1112
size?: 'large' | 'small' | 'default';
@@ -22,7 +23,8 @@ const SkeletonInput = defineComponent({
2223
},
2324
setup(props) {
2425
const { prefixCls } = useConfigInject('skeleton', props);
25-
const [wrapSSR, hashId] = useStyle(prefixCls);
26+
const rootCls = useCSSVarCls(prefixCls);
27+
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
2628
const cls = computed(() =>
2729
classNames(
2830
prefixCls.value,
@@ -31,7 +33,9 @@ const SkeletonInput = defineComponent({
3133
[`${prefixCls.value}-active`]: props.active,
3234
[`${prefixCls.value}-block`]: props.block,
3335
},
36+
rootCls.value,
3437
hashId.value,
38+
cssVarCls.value,
3539
),
3640
);
3741
return () => {

‎components/skeleton/Skeleton.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Paragraph from './Paragraph';
1010
import useConfigInject from '../config-provider/hooks/useConfigInject';
1111
import Element from './Element';
1212
import useStyle from './style';
13+
import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
1314

1415
/* This only for skeleton internal. */
1516
type SkeletonAvatarProps = Omit<AvatarProps, 'active'>;
@@ -90,7 +91,8 @@ const Skeleton = defineComponent({
9091
}),
9192
setup(props, { slots }) {
9293
const { prefixCls, direction } = useConfigInject('skeleton', props);
93-
const [wrapSSR, hashId] = useStyle(prefixCls);
94+
const rootCls = useCSSVarCls(prefixCls);
95+
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
9496

9597
return () => {
9698
const { loading, avatar, title, paragraph, active, round } = props;
@@ -155,7 +157,9 @@ const Skeleton = defineComponent({
155157
[`${pre}-active`]: active,
156158
[`${pre}-rtl`]: direction.value === 'rtl',
157159
[`${pre}-round`]: round,
160+
[rootCls.value]: true,
158161
[hashId.value]: true,
162+
[cssVarCls.value]: true,
159163
});
160164

161165
return wrapSSR(

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /