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 e1cfc82

Browse files
feat: breadcrumb css-var (#8325)
Co-authored-by: undefined <undefined>
1 parent 171dc9e commit e1cfc82

File tree

2 files changed

+84
-51
lines changed

2 files changed

+84
-51
lines changed

‎components/breadcrumb/Breadcrumb.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import BreadcrumbItem from './BreadcrumbItem';
88
import Menu from '../menu';
99
import useConfigInject from '../config-provider/hooks/useConfigInject';
1010
import useStyle from './style';
11+
import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
1112
import type { CustomSlotsType, VueNode } from '../_util/type';
1213

1314
export interface Route {
@@ -65,7 +66,8 @@ export default defineComponent({
6566
}>,
6667
setup(props, { slots, attrs }) {
6768
const { prefixCls, direction } = useConfigInject('breadcrumb', props);
68-
const [wrapSSR, hashId] = useStyle(prefixCls);
69+
const rootCls = useCSSVarCls(prefixCls);
70+
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
6971
const getPath = (path: string, params: unknown) => {
7072
path = (path || '').replace(/^\//, '');
7173
Object.keys(params).forEach(key => {
@@ -158,6 +160,8 @@ export default defineComponent({
158160
[prefixCls.value]: true,
159161
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
160162
[`${attrs.class}`]: !!attrs.class,
163+
[rootCls.value]: true,
164+
[cssVarCls.value]: true,
161165
[hashId.value]: true,
162166
};
163167

‎components/breadcrumb/style/index.ts‎

Lines changed: 79 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,61 @@
1+
import { unit } from '../../_util/cssinjs';
12
import type { CSSObject } from '../../_util/cssinjs';
2-
import type { FullToken, GenerateStyle } from '../../theme/internal';
3-
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
4-
import { genFocusStyle, resetComponent } from '../../style';
53

6-
export interface ComponentToken {}
7-
8-
interface BreadcrumbToken extends FullToken<'Breadcrumb'> {
9-
breadcrumbBaseColor: string;
10-
breadcrumbFontSize: number;
11-
breadcrumbIconFontSize: number;
12-
breadcrumbLinkColor: string;
13-
breadcrumbLinkColorHover: string;
14-
breadcrumbLastItemColor: string;
15-
breadcrumbSeparatorMargin: number;
16-
breadcrumbSeparatorColor: string;
4+
import { genFocusStyle, resetComponent } from '../../style';
5+
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
6+
import { genStyleHooks, mergeToken } from '../../theme/internal';
7+
8+
export interface ComponentToken {
9+
/**
10+
* @desc 面包屑项文字颜色
11+
* @descEN Text color of Breadcrumb item
12+
*/
13+
itemColor: string;
14+
/**
15+
* @desc 图标大小
16+
* @descEN Icon size
17+
*/
18+
iconFontSize: number;
19+
/**
20+
* @desc 链接文字颜色
21+
* @descEN Text color of link
22+
*/
23+
linkColor: string;
24+
/**
25+
* @desc 链接文字悬浮颜色
26+
* @descEN Color of hovered link
27+
*/
28+
linkHoverColor: string;
29+
/**
30+
* @desc 最后一项文字颜色
31+
* @descEN Text color of the last item
32+
*/
33+
lastItemColor: string;
34+
/**
35+
* @desc 分隔符外间距
36+
* @descEN Margin of separator
37+
*/
38+
separatorMargin: number;
39+
/**
40+
* @desc 分隔符颜色
41+
* @descEN Color of separator
42+
*/
43+
separatorColor: string;
1744
}
1845

46+
interface BreadcrumbToken extends FullToken<'Breadcrumb'> {}
47+
1948
const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
20-
const { componentCls, iconCls } = token;
49+
const { componentCls, iconCls, calc } = token;
2150

2251
return {
2352
[componentCls]: {
2453
...resetComponent(token),
25-
color: token.breadcrumbBaseColor,
26-
fontSize: token.breadcrumbFontSize,
54+
color: token.itemColor,
55+
fontSize: token.fontSize,
2756

2857
[iconCls]: {
29-
fontSize: token.breadcrumbIconFontSize,
58+
fontSize: token.iconFontSize,
3059
},
3160

3261
ol: {
@@ -38,33 +67,29 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
3867
},
3968

4069
a: {
41-
color: token.breadcrumbLinkColor,
70+
color: token.linkColor,
4271
transition: `color ${token.motionDurationMid}`,
43-
padding: `0 ${token.paddingXXS}px`,
72+
padding: `0 ${unit(token.paddingXXS)}`,
4473
borderRadius: token.borderRadiusSM,
45-
height: token.lineHeight*token.fontSize,
74+
height: token.fontHeight,
4675
display: 'inline-block',
47-
marginInline: -token.marginXXS,
76+
marginInline: calc(token.marginXXS).mul(-1).equal(),
4877

4978
'&:hover': {
50-
color: token.breadcrumbLinkColorHover,
79+
color: token.linkHoverColor,
5180
backgroundColor: token.colorBgTextHover,
5281
},
5382

5483
...genFocusStyle(token),
5584
},
5685

57-
[`li:last-child`]: {
58-
color: token.breadcrumbLastItemColor,
59-
60-
[`& > ${componentCls}-separator`]: {
61-
display: 'none',
62-
},
86+
'li:last-child': {
87+
color: token.lastItemColor,
6388
},
6489

6590
[`${componentCls}-separator`]: {
66-
marginInline: token.breadcrumbSeparatorMargin,
67-
color: token.breadcrumbSeparatorColor,
91+
marginInline: token.separatorMargin,
92+
color: token.separatorColor,
6893
},
6994

7095
[`${componentCls}-link`]: {
@@ -78,22 +103,22 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
78103

79104
[`${componentCls}-overlay-link`]: {
80105
borderRadius: token.borderRadiusSM,
81-
height: token.lineHeight*token.fontSize,
106+
height: token.fontHeight,
82107
display: 'inline-block',
83-
padding: `0 ${token.paddingXXS}px`,
84-
marginInline: -token.marginXXS,
108+
padding: `0 ${unit(token.paddingXXS)}`,
109+
marginInline: calc(token.marginXXS).mul(-1).equal(),
85110

86111
[`> ${iconCls}`]: {
87112
marginInlineStart: token.marginXXS,
88113
fontSize: token.fontSizeIcon,
89114
},
90115

91116
'&:hover': {
92-
color: token.breadcrumbLinkColorHover,
117+
color: token.linkHoverColor,
93118
backgroundColor: token.colorBgTextHover,
94119

95120
a: {
96-
color: token.breadcrumbLinkColorHover,
121+
color: token.linkHoverColor,
97122
},
98123
},
99124

@@ -112,18 +137,22 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
112137
};
113138
};
114139

115-
// ============================== Export ==============================
116-
export default genComponentStyleHook('Breadcrumb', token => {
117-
const BreadcrumbToken = mergeToken<BreadcrumbToken>(token, {
118-
breadcrumbBaseColor: token.colorTextDescription,
119-
breadcrumbFontSize: token.fontSize,
120-
breadcrumbIconFontSize: token.fontSize,
121-
breadcrumbLinkColor: token.colorTextDescription,
122-
breadcrumbLinkColorHover: token.colorText,
123-
breadcrumbLastItemColor: token.colorText,
124-
breadcrumbSeparatorMargin: token.marginXS,
125-
breadcrumbSeparatorColor: token.colorTextDescription,
126-
});
127-
128-
return [genBreadcrumbStyle(BreadcrumbToken)];
140+
export const prepareComponentToken: GetDefaultToken<'Breadcrumb'> = token => ({
141+
itemColor: token.colorTextDescription,
142+
lastItemColor: token.colorText,
143+
iconFontSize: token.fontSize,
144+
linkColor: token.colorTextDescription,
145+
linkHoverColor: token.colorText,
146+
separatorColor: token.colorTextDescription,
147+
separatorMargin: token.marginXS,
129148
});
149+
150+
// ============================== Export ==============================
151+
export default genStyleHooks(
152+
'Breadcrumb',
153+
token => {
154+
const breadcrumbToken = mergeToken<BreadcrumbToken>(token, {});
155+
return genBreadcrumbStyle(breadcrumbToken);
156+
},
157+
prepareComponentToken,
158+
);

0 commit comments

Comments
(0)

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