mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
parent
cdc4e50873
commit
030f38594c
@ -1,3 +1,4 @@
|
||||
import type { CSSProperties } from 'react';
|
||||
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
|
||||
import { textEllipsis } from '../../style';
|
||||
import { genCompactItemStyle } from '../../style/compact-item';
|
||||
@ -20,6 +21,26 @@ export interface ComponentToken {
|
||||
* @descEN Height of dropdown
|
||||
*/
|
||||
dropdownHeight: number;
|
||||
/**
|
||||
* @desc 选项选中时背景色
|
||||
* @descEN Background color of selected item
|
||||
*/
|
||||
optionSelectedBg: string;
|
||||
/**
|
||||
* @desc 选项选中时字重
|
||||
* @descEN Font weight of selected item
|
||||
*/
|
||||
optionSelectedFontWeight: CSSProperties['fontWeight'];
|
||||
/**
|
||||
* @desc 选项内间距
|
||||
* @descEN Padding of menu item
|
||||
*/
|
||||
optionPadding: CSSProperties['padding'];
|
||||
/**
|
||||
* @desc 选项菜单(单列)内间距
|
||||
* @descEN Padding of menu item (single column)
|
||||
*/
|
||||
menuPadding: CSSProperties['padding'];
|
||||
}
|
||||
|
||||
type CascaderToken = FullToken<'Cascader'>;
|
||||
@ -33,10 +54,6 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
|
||||
${cascaderMenuItemCls}-loading-icon
|
||||
`;
|
||||
|
||||
const itemPaddingVertical = Math.round(
|
||||
(token.controlHeight - token.fontSize * token.lineHeight) / 2,
|
||||
);
|
||||
|
||||
return [
|
||||
// =====================================================
|
||||
// == Control ==
|
||||
@ -91,7 +108,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
|
||||
minWidth: token.controlItemWidth,
|
||||
height: token.dropdownHeight,
|
||||
margin: 0,
|
||||
padding: token.paddingXXS,
|
||||
padding: token.menuPadding,
|
||||
overflow: 'auto',
|
||||
verticalAlign: 'top',
|
||||
listStyle: 'none',
|
||||
@ -106,7 +123,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
alignItems: 'center',
|
||||
padding: `${itemPaddingVertical}px ${token.paddingSM}px`,
|
||||
padding: token.optionPadding,
|
||||
lineHeight: token.lineHeight,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
@ -130,8 +147,8 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
|
||||
|
||||
[`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
|
||||
[`&, &:hover`]: {
|
||||
fontWeight: token.fontWeightStrong,
|
||||
backgroundColor: token.controlItemBgActive,
|
||||
fontWeight: token.optionSelectedFontWeight,
|
||||
backgroundColor: token.optionSelectedBg,
|
||||
},
|
||||
},
|
||||
|
||||
@ -170,8 +187,22 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Cascader', (token) => [genBaseStyle(token)], {
|
||||
controlWidth: 184,
|
||||
controlItemWidth: 111,
|
||||
dropdownHeight: 180,
|
||||
});
|
||||
export default genComponentStyleHook(
|
||||
'Cascader',
|
||||
(token) => [genBaseStyle(token)],
|
||||
(token) => {
|
||||
const itemPaddingVertical = Math.round(
|
||||
(token.controlHeight - token.fontSize * token.lineHeight) / 2,
|
||||
);
|
||||
|
||||
return {
|
||||
controlWidth: 184,
|
||||
controlItemWidth: 111,
|
||||
dropdownHeight: 180,
|
||||
optionSelectedBg: token.controlItemBgActive,
|
||||
optionSelectedFontWeight: token.fontWeightStrong,
|
||||
optionPadding: `${itemPaddingVertical}px ${token.paddingSM}px`,
|
||||
menuPadding: token.paddingXXS,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
@ -227,7 +227,19 @@ export default App;
|
||||
| `@carousel-dot-height` | `dotHeight` | - |
|
||||
| `@carousel-dot-active-width` | `dotActiveWidth` | - |
|
||||
|
||||
<!-- ### Cascader -->
|
||||
### Cascader
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less variables | Component Token | Note |
|
||||
| --- | --- | --- |
|
||||
| `@cascader-bg` | - | Deprecated |
|
||||
| `@cascader-item-selected-bg` | `optionSelectedBg` | - |
|
||||
| `@cascader-menu-bg` | - | Deprecated |
|
||||
| `@cascader-menu-border-color-split` | `colorSplit` | Global Token |
|
||||
| `@cascader-dropdown-vertical-padding` | `optionPadding` | - |
|
||||
| `@cascader-dropdown-edge-child-vertical-padding` | `menuPadding` | - |
|
||||
| `@cascader-dropdown-font-size` | - | Deprecated |
|
||||
| `@cascader-dropdown-line-height` | `lineHeight` | Global Token |
|
||||
|
||||
<!-- ### Checkbox -->
|
||||
|
||||
|
@ -227,7 +227,19 @@ export default App;
|
||||
| `@carousel-dot-height` | `dotHeight` | - |
|
||||
| `@carousel-dot-active-width` | `dotActiveWidth` | - |
|
||||
|
||||
<!-- ### Cascader 级联选择 -->
|
||||
### Cascader 级联选择
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less 变量 | Component Token | 备注 |
|
||||
| --- | --- | --- |
|
||||
| `@cascader-bg` | - | 已废弃 |
|
||||
| `@cascader-item-selected-bg` | `optionSelectedBg` | - |
|
||||
| `@cascader-menu-bg` | - | 已废弃 |
|
||||
| `@cascader-menu-border-color-split` | `colorSplit` | 全局 Token |
|
||||
| `@cascader-dropdown-vertical-padding` | `optionPadding` | - |
|
||||
| `@cascader-dropdown-edge-child-vertical-padding` | `menuPadding` | - |
|
||||
| `@cascader-dropdown-font-size` | - | 已废弃 |
|
||||
| `@cascader-dropdown-line-height` | `lineHeight` | 全局 Token |
|
||||
|
||||
### Checkbox 多选框
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user