dumi-theme-antd
Version:
Ant Design 5.0 官网风格类似的 dumi2 主题插件
89 lines • 2.67 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { Typography } from 'antd';
import * as React from 'react';
import { useContext } from 'react';
import useSiteToken from "../../../hooks/useSiteToken";
import SiteContext from "dumi/theme/slots/SiteContext";
import { jsx as ___EmotionJSX } from "@emotion/react";
export function GroupMask(_ref) {
var children = _ref.children,
style = _ref.style,
disabled = _ref.disabled;
var additionalStyle = disabled ? {} : {
position: 'relative',
background: 'rgba(255,255,255,0.1)',
backdropFilter: 'blur(25px)',
zIndex: 1
};
return ___EmotionJSX("div", {
className: "site-mask",
style: _objectSpread(_objectSpread({
position: 'relative'
}, style), additionalStyle)
}, children);
}
export default function Group(props) {
var id = props.id,
title = props.title,
titleColor = props.titleColor,
description = props.description,
children = props.children,
decoration = props.decoration,
background = props.background,
collapse = props.collapse;
var _useSiteToken = useSiteToken(),
token = _useSiteToken.token;
var _useContext = useContext(SiteContext),
isMobile = _useContext.isMobile;
var marginStyle = collapse ? {} : {
maxWidth: 1208,
marginInline: 'auto',
boxSizing: 'border-box',
paddingInline: isMobile ? token.margin : token.marginXXL
};
var childNode = ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
style: {
textAlign: 'center'
}
}, ___EmotionJSX(Typography.Title, {
id: id,
level: 1,
style: {
fontWeight: 900,
color: titleColor,
// Special for the title
fontFamily: "AliPuHui, ".concat(token.fontFamily),
fontSize: isMobile ? token.fontSizeHeading2 : token.fontSizeHeading1
}
}, title), ___EmotionJSX(Typography.Paragraph, {
style: {
marginBottom: isMobile ? token.marginXXL : token.marginFarXS,
color: titleColor
}
}, description)), ___EmotionJSX("div", {
style: marginStyle
}, children ? ___EmotionJSX("div", null, children) : ___EmotionJSX("div", {
style: {
borderRadius: token.borderRadiusLG,
minHeight: 300,
background: '#e9e9e9'
}
})));
return ___EmotionJSX("div", {
style: {
position: 'relative',
background: background,
transition: "all ".concat(token.motionDurationSlow)
}
}, ___EmotionJSX("div", {
style: {
position: 'absolute',
inset: 0
}
}, decoration), ___EmotionJSX(GroupMask, {
disabled: !!background,
style: {
paddingBlock: token.marginFarSM
}
}, childNode));
}