mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

docs: tweak demo toggle button style (#51184)

Browse Source
This commit is contained in:
afc163 2024-10-10 13:38:45 +08:00 committed by GitHub
parent 7236216823
commit f2445a89ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
.dumi/theme/builtins/DemoWrapper/index.tsx
View File

@ -1,13 +1,6 @@
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import { import { BugOutlined, CodeOutlined, ExperimentOutlined } from '@ant-design/icons';
BugFilled, import { ConfigProvider, Tooltip, Button } from 'antd';
BugOutlined,
CodeFilled,
CodeOutlined,
ExperimentFilled,
ExperimentOutlined,
} from '@ant-design/icons';
import { ConfigProvider, Tooltip } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import { DumiDemoGrid, FormattedMessage } from 'dumi'; import { DumiDemoGrid, FormattedMessage } from 'dumi';
@ -33,10 +26,6 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
const [expandAll, setExpandAll] = useLayoutState(false); const [expandAll, setExpandAll] = useLayoutState(false);
const [enableCssVar, setEnableCssVar] = useLayoutState(true); const [enableCssVar, setEnableCssVar] = useLayoutState(true);
const expandTriggerClass = classNames('code-box-expand-trigger', {
'code-box-expand-trigger-active': expandAll,
});
const handleVisibleToggle = () => { const handleVisibleToggle = () => {
setShowDebug?.(!showDebug); setShowDebug?.(!showDebug);
}; };
@ -84,29 +73,35 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
<FormattedMessage id={`app.component.examples.${expandAll ? 'collapse' : 'expand'}`} /> <FormattedMessage id={`app.component.examples.${expandAll ? 'collapse' : 'expand'}`} />
} }
> >
{expandAll ? ( <Button
<CodeFilled className={expandTriggerClass} onClick={handleExpandToggle} /> type="text"
) : ( size="small"
<CodeOutlined className={expandTriggerClass} onClick={handleExpandToggle} /> icon={<CodeOutlined />}
)} onClick={handleExpandToggle}
className={expandAll ? 'icon-enabled' : ''}
/>
</Tooltip> </Tooltip>
<Tooltip <Tooltip
title={ title={
<FormattedMessage id={`app.component.examples.${showDebug ? 'hide' : 'visible'}`} /> <FormattedMessage id={`app.component.examples.${showDebug ? 'hide' : 'visible'}`} />
} }
> >
{showDebug ? ( <Button
<BugFilled className={expandTriggerClass} onClick={handleVisibleToggle} /> type="text"
) : ( size="small"
<BugOutlined className={expandTriggerClass} onClick={handleVisibleToggle} /> icon={<BugOutlined />}
)} onClick={handleVisibleToggle}
className={showDebug ? 'icon-enabled' : ''}
/>
</Tooltip> </Tooltip>
<Tooltip title={enableCssVar ? locale.disableCssVar : locale.enableCssVar}> <Tooltip title={enableCssVar ? locale.disableCssVar : locale.enableCssVar}>
{enableCssVar ? ( <Button
<ExperimentFilled className={expandTriggerClass} onClick={handleCssVarToggle} /> type="text"
) : ( size="small"
<ExperimentOutlined className={expandTriggerClass} onClick={handleCssVarToggle} /> icon={<ExperimentOutlined />}
)} onClick={handleCssVarToggle}
className={enableCssVar ? 'icon-enabled' : ''}
/>
</Tooltip> </Tooltip>
</span> </span>
<ConfigProvider theme={{ cssVar: enableCssVar, hashed: !enableCssVar }}> <ConfigProvider theme={{ cssVar: enableCssVar, hashed: !enableCssVar }}>

25
.dumi/theme/common/styles/Demo.tsx
View File

@ -71,18 +71,6 @@ const GlobalDemoStyles: React.FC = () => {
border: 1px solid ${token.colorPrimary}; border: 1px solid ${token.colorPrimary};
} }
&-expand-trigger {
position: relative;
color: #3b4357;
font-size: ${token.fontSizeXL}px;
cursor: pointer;
opacity: 0.75;
transition: all ${token.motionDurationSlow};
&:hover {
opacity: 1;
}
}
&-title { &-title {
position: absolute; position: absolute;
top: -14px; top: -14px;
@ -358,7 +346,18 @@ const GlobalDemoStyles: React.FC = () => {
inset-inline-end: 0; inset-inline-end: 0;
display: flex; display: flex;
align-items: center; align-items: center;
column-gap: ${token.marginSM}px; column-gap: ${token.marginXS}px;
${antCls}-btn {
opacity: 0.6;
&.icon-enabled {
background: ${token.colorFillSecondary};
opacity: 1;
${iconCls} {
color: ${token.colorTextBase};
font-weight: bold;
}
}
} }
${antCls}-row-rtl { ${antCls}-row-rtl {