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

docs: the LTR icon uses svg to better fit the dark theme (#42798)

Browse Source 
* docs: the LTR icon uses svg to better fit the dark theme

* docs: new `DirectionIcon`
This commit is contained in:
KuangPengfei 2023-06-05 00:51:16 +08:00 committed by GitHub
parent 71c155f043
commit 1b2313cb5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.dumi/theme/common/DirectionIcon.tsx Normal file
View File

@ -0,0 +1,18 @@
import Icon from '@ant-design/icons';
import type { DirectionType } from 'antd/es/config-provider';
import React from 'react';
const ltrD =
'M448 64l512 0 0 128-128 0 0 768-128 0 0-768-128 0 0 768-128 0 0-448c-123.712 0-224-100.288-224-224s100.288-224 224-224zM64 448l256 224-256 224z';
const rtlD =
'M256 64l512 0 0 128-128 0 0 768-128 0 0-768-128 0 0 768-128 0 0-448c-123.712 0-224-100.288-224-224s100.288-224 224-224zM960 896l-256-224 256-224z';
const DirectionIcon: React.FC<{ direction: DirectionType }> = (props) => (
<Icon {...props}>
<svg viewBox="0 0 1024 1024" fill="currentColor">
<path d={props.direction === 'ltr' ? ltrD : rtlD} />
</svg>
</Icon>
);
export default DirectionIcon;

20
.dumi/theme/slots/Header/index.tsx
View File

@ -7,15 +7,16 @@ import DumiSearchBar from 'dumi/theme-default/slots/SearchBar';
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import useLocale from '../../../hooks/useLocale'; import useLocale from '../../../hooks/useLocale';
import useSiteToken from '../../../hooks/useSiteToken'; import useSiteToken from '../../../hooks/useSiteToken';
import DirectionIcon from '../../common/DirectionIcon';
import * as utils from '../../utils'; import * as utils from '../../utils';
import { getThemeConfig, ping } from '../../utils'; import { getThemeConfig, ping } from '../../utils';
import type { SiteContextProps } from '../SiteContext'; import type { SiteContextProps } from '../SiteContext';
import SiteContext from '../SiteContext'; import SiteContext from '../SiteContext';
import type { SharedProps } from './interface';
import Logo from './Logo'; import Logo from './Logo';
import More from './More'; import More from './More';
import Navigation from './Navigation'; import Navigation from './Navigation';
import SwitchBtn from './SwitchBtn'; import SwitchBtn from './SwitchBtn';
import type { SharedProps } from './interface';
const RESPONSIVE_XS = 1120; const RESPONSIVE_XS = 1120;
const RESPONSIVE_SM = 1200; const RESPONSIVE_SM = 1200;
@ -95,6 +96,9 @@ const useStyle = () => {
} }
} }
`, `,
dataDirectionIcon: css`
width: 16px;
`,
popoverMenu: { popoverMenu: {
width: 300, width: 300,
@ -311,19 +315,9 @@ const Header: React.FC = () => {
key="direction" key="direction"
onClick={onDirectionChange} onClick={onDirectionChange}
value={direction === 'rtl' ? 2 : 1} value={direction === 'rtl' ? 2 : 1}
label1={ label1={<DirectionIcon css={style.dataDirectionIcon} direction="ltr" />}
<img
src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*6k0CTJA-HxUAAAAAAAAAAAAADrJ8AQ/original"
alt="direction"
/>
}
tooltip1="LTR" tooltip1="LTR"
label2={ label2={<DirectionIcon css={style.dataDirectionIcon} direction="rtl" />}
<img
src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SZoaQqm2hwsAAAAAAAAAAAAADrJ8AQ/original"
alt="LTR"
/>
}
tooltip2="RTL" tooltip2="RTL"
pure pure
/>, />,