test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 19:49:59 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

feat: Tree add indentSize token (#51010)

Browse Source
This commit is contained in:
afc163 2024-09-29 13:26:05 +08:00 committed by GitHub
parent c20c70d905
commit 4303e5e28a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/tree/demo/component-token.tsx
View File

@ -48,6 +48,7 @@ const App: React.FC = () => {
Tree: {
nodeHoverBg: '#fff2f0',
nodeSelectedBg: '#ffa39e',
indentSize: 80,
},
},
}}

27
components/tree/style/index.ts
View File

@ -13,6 +13,11 @@ export interface TreeSharedToken {
* @descEN Node title height
*/
titleHeight: number;
/**
* @desc 缩进宽度
* @descEN Indent width of tree
*/
indentSize?: number;
/**
* @desc 节点悬浮态背景色
* @descEN Background color of hovered node
@ -94,7 +99,15 @@ type TreeToken = FullToken<'Tree'> & {
};
export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => {
const { treeCls, treeNodeCls, treeNodePadding, titleHeight, nodeSelectedBg, nodeHoverBg } = token;
const {
treeCls,
treeNodeCls,
treeNodePadding,
titleHeight,
indentSize,
nodeSelectedBg,
nodeHoverBg,
} = token;
const treeCheckBoxMarginHorizontal = token.paddingXS;
return {
@ -223,7 +236,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
userSelect: 'none',
'&-unit': {
display: 'inline-block',
width: titleHeight,
width: indentSize,
},
},
@ -534,12 +547,14 @@ export const genTreeStyle = (
};
export const initComponentToken = (token: AliasToken): TreeSharedToken => {
const { controlHeightSM } = token;
const { controlHeightSM, controlItemBgHover, controlItemBgActive } = token;
const titleHeight = controlHeightSM;
return {
titleHeight: controlHeightSM,
nodeHoverBg: token.controlItemBgHover,
nodeSelectedBg: token.controlItemBgActive,
titleHeight,
indentSize: titleHeight,
nodeHoverBg: controlItemBgHover,
nodeSelectedBg: controlItemBgActive,
};
};