mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-04 04:58:55 +08:00
feat: layout support css variable theme (#45794)
* feat: layout support cssVar * feat: optimize code * feat: optimize code * feat: optimize code
This commit is contained in:
parent
df169cc4c9
commit
cb6d377f61
@ -6,6 +6,7 @@ import { ConfigContext } from '../config-provider';
|
|||||||
import { LayoutContext } from './context';
|
import { LayoutContext } from './context';
|
||||||
import useHasSider from './hooks/useHasSider';
|
import useHasSider from './hooks/useHasSider';
|
||||||
import useStyle from './style';
|
import useStyle from './style';
|
||||||
|
import useCSSVar from './style/cssVar';
|
||||||
|
|
||||||
export interface GeneratorProps {
|
export interface GeneratorProps {
|
||||||
suffixCls?: string;
|
suffixCls?: string;
|
||||||
@ -83,7 +84,8 @@ const BasicLayout = React.forwardRef<HTMLDivElement, BasicPropsWithTagName>((pro
|
|||||||
|
|
||||||
const mergedHasSider = useHasSider(siders, children, hasSider);
|
const mergedHasSider = useHasSider(siders, children, hasSider);
|
||||||
|
|
||||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
const [, hashId] = useStyle(prefixCls);
|
||||||
|
const wrapCSSVar = useCSSVar(prefixCls);
|
||||||
const classString = classNames(
|
const classString = classNames(
|
||||||
prefixCls,
|
prefixCls,
|
||||||
{
|
{
|
||||||
@ -110,7 +112,7 @@ const BasicLayout = React.forwardRef<HTMLDivElement, BasicPropsWithTagName>((pro
|
|||||||
[],
|
[],
|
||||||
);
|
);
|
||||||
|
|
||||||
return wrapSSR(
|
return wrapCSSVar(
|
||||||
<LayoutContext.Provider value={contextValue}>
|
<LayoutContext.Provider value={contextValue}>
|
||||||
<Tag
|
<Tag
|
||||||
ref={ref}
|
ref={ref}
|
||||||
|
4
components/layout/style/cssVar.ts
Normal file
4
components/layout/style/cssVar.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import { genCSSVarRegister } from '../../theme/internal';
|
||||||
|
import { prepareComponentToken } from '.';
|
||||||
|
|
||||||
|
export default genCSSVarRegister('Layout', prepareComponentToken);
|
@ -1,6 +1,6 @@
|
|||||||
import type { CSSObject } from '@ant-design/cssinjs';
|
import { unit, type CSSObject } from '@ant-design/cssinjs';
|
||||||
import type { CSSProperties } from 'react';
|
import type { CSSProperties } from 'react';
|
||||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||||
import { genComponentStyleHook } from '../../theme/internal';
|
import { genComponentStyleHook } from '../../theme/internal';
|
||||||
import genLayoutLightStyle from './light';
|
import genLayoutLightStyle from './light';
|
||||||
|
|
||||||
@ -181,7 +181,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
|||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
height: triggerHeight,
|
height: triggerHeight,
|
||||||
color: triggerColor,
|
color: triggerColor,
|
||||||
lineHeight: `${triggerHeight}px`,
|
lineHeight: unit(triggerHeight),
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
background: triggerBg,
|
background: triggerBg,
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
@ -196,7 +196,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
|||||||
'&-trigger': {
|
'&-trigger': {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: headerHeight,
|
top: headerHeight,
|
||||||
insetInlineEnd: -zeroTriggerWidth,
|
insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
width: zeroTriggerWidth,
|
width: zeroTriggerWidth,
|
||||||
height: zeroTriggerHeight,
|
height: zeroTriggerHeight,
|
||||||
@ -227,7 +227,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
|||||||
},
|
},
|
||||||
|
|
||||||
'&-right': {
|
'&-right': {
|
||||||
insetInlineStart: -zeroTriggerWidth,
|
insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
|
||||||
borderStartStartRadius: borderRadius,
|
borderStartStartRadius: borderRadius,
|
||||||
borderStartEndRadius: 0,
|
borderStartEndRadius: 0,
|
||||||
borderEndEndRadius: 0,
|
borderEndEndRadius: 0,
|
||||||
@ -249,7 +249,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
|||||||
height: headerHeight,
|
height: headerHeight,
|
||||||
padding: headerPadding,
|
padding: headerPadding,
|
||||||
color: headerColor,
|
color: headerColor,
|
||||||
lineHeight: `${headerHeight}px`,
|
lineHeight: unit(headerHeight),
|
||||||
background: headerBg,
|
background: headerBg,
|
||||||
|
|
||||||
// Other components/menu/style/index.less line:686
|
// Other components/menu/style/index.less line:686
|
||||||
@ -277,11 +277,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
// ============================== Export ==============================
|
export const prepareComponentToken: GetDefaultToken<'Layout'> = (token) => {
|
||||||
export default genComponentStyleHook(
|
|
||||||
'Layout',
|
|
||||||
(token) => [genLayoutStyle(token)],
|
|
||||||
(token) => {
|
|
||||||
const {
|
const {
|
||||||
colorBgLayout,
|
colorBgLayout,
|
||||||
controlHeight,
|
controlHeight,
|
||||||
@ -318,7 +314,13 @@ export default genComponentStyleHook(
|
|||||||
lightTriggerBg: colorBgContainer,
|
lightTriggerBg: colorBgContainer,
|
||||||
lightTriggerColor: colorText,
|
lightTriggerColor: colorText,
|
||||||
};
|
};
|
||||||
},
|
};
|
||||||
|
|
||||||
|
// ============================== Export ==============================
|
||||||
|
export default genComponentStyleHook(
|
||||||
|
'Layout',
|
||||||
|
(token) => [genLayoutStyle(token)],
|
||||||
|
prepareComponentToken,
|
||||||
{
|
{
|
||||||
deprecatedTokens: [
|
deprecatedTokens: [
|
||||||
['colorBgBody', 'bodyBg'],
|
['colorBgBody', 'bodyBg'],
|
||||||
|
Loading…
Reference in New Issue
Block a user