mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
docs: adjust icons (#39074)
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
def280b6a1
commit
fc1e818e99
@ -1,77 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
// @ts-ignore
|
||||
import GitHubButton from 'react-github-button';
|
||||
import useSiteToken from '../../../hooks/useSiteToken';
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
const useStyle = () => {
|
||||
const { token } = useSiteToken();
|
||||
|
||||
const { antCls, colorPrimary } = token;
|
||||
|
||||
return {
|
||||
githubBtn: css`
|
||||
display: flex;
|
||||
flex-flow: nowrap;
|
||||
height: auto;
|
||||
|
||||
.gh-btn {
|
||||
height: auto;
|
||||
padding: 1px 4px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
.gh-ico {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gh-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-count {
|
||||
height: auto;
|
||||
padding: 4px 8px;
|
||||
color: #000;
|
||||
font-weight: normal;
|
||||
background: #fff;
|
||||
|
||||
&:hover {
|
||||
color: ${colorPrimary};
|
||||
}
|
||||
}
|
||||
|
||||
${antCls}-row-rtl & {
|
||||
.gh-count {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
`,
|
||||
responsiveMode: css`
|
||||
.gh-count {
|
||||
display: none !important;
|
||||
}
|
||||
`,
|
||||
};
|
||||
};
|
||||
|
||||
export interface GithubProps {
|
||||
responsive: null | 'narrow' | 'crowded';
|
||||
}
|
||||
|
||||
export default ({ responsive }: GithubProps) => {
|
||||
const style = useStyle();
|
||||
|
||||
return (
|
||||
<GitHubButton
|
||||
css={[style.githubBtn, responsive && style.responsiveMode]}
|
||||
type="stargazers"
|
||||
namespace="ant-design"
|
||||
repo="ant-design"
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -103,7 +103,6 @@ export interface NavigationProps extends SharedProps {
|
||||
isClient: boolean;
|
||||
responsive: null | 'narrow' | 'crowded';
|
||||
directionText: string;
|
||||
showTechUIButton: boolean;
|
||||
onLangChange: () => void;
|
||||
onDirectionChange: () => void;
|
||||
}
|
||||
@ -114,7 +113,6 @@ export default ({
|
||||
isMobile,
|
||||
responsive,
|
||||
directionText,
|
||||
showTechUIButton,
|
||||
onLangChange,
|
||||
onDirectionChange,
|
||||
}: NavigationProps) => {
|
||||
@ -223,21 +221,6 @@ export default ({
|
||||
),
|
||||
key: 'docs/resources',
|
||||
},
|
||||
showTechUIButton
|
||||
? {
|
||||
label: (
|
||||
<Tooltip title="TechUI">
|
||||
<a href="https://techui.alipay.com" target="__blank" rel="noopener noreferrer">
|
||||
<img
|
||||
style={{ width: '1em', height: '1em', transform: `scale(1.8) translateY(-5%)` }}
|
||||
src="https://gw.alipayobjects.com/zos/hitu-asset/562e1bb6-edd1-4c87-8e5c-fa01b768b7c8/hitu-1617851234091-image.png"
|
||||
/>
|
||||
</a>
|
||||
</Tooltip>
|
||||
),
|
||||
key: 'tech-ui',
|
||||
}
|
||||
: null,
|
||||
isZhCN &&
|
||||
isClient &&
|
||||
window.location.host !== 'ant-design.antgroup.com' &&
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { Button, Tooltip } from 'antd';
|
||||
import useSharedStyle from './style';
|
||||
import useSiteToken from '../../../hooks/useSiteToken';
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
@ -14,22 +13,47 @@ export interface LangBtnProps {
|
||||
onClick?: React.MouseEventHandler;
|
||||
}
|
||||
|
||||
const BASE_SIZE = '1.2em';
|
||||
|
||||
const useStyle = () => {
|
||||
const { token } = useSiteToken();
|
||||
const { controlHeightSM } = token;
|
||||
const { controlHeight, motionDurationMid } = token;
|
||||
|
||||
return {
|
||||
btn: css`
|
||||
color: ${token.colorText};
|
||||
border-color: ${token.colorBorder};
|
||||
padding: 0 !important;
|
||||
width: ${controlHeightSM}px;
|
||||
height: ${controlHeightSM}px;
|
||||
width: ${controlHeight}px;
|
||||
height: ${controlHeight}px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: ${token.borderRadius}px;
|
||||
transition: all ${motionDurationMid};
|
||||
cursor: pointer;
|
||||
|
||||
.btn-inner {
|
||||
transition: all ${motionDurationMid};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: ${token.colorBgTextHover};
|
||||
|
||||
.btn-inner {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: ${BASE_SIZE};
|
||||
height: ${BASE_SIZE};
|
||||
}
|
||||
|
||||
.anticon {
|
||||
font-size: ${BASE_SIZE};
|
||||
}
|
||||
`,
|
||||
};
|
||||
@ -46,14 +70,13 @@ export default function LangBtn({
|
||||
}: LangBtnProps) {
|
||||
const { token } = useSiteToken();
|
||||
const style = useStyle();
|
||||
const sharedStyle = useSharedStyle();
|
||||
|
||||
let label1Style: React.CSSProperties;
|
||||
let label2Style: React.CSSProperties;
|
||||
|
||||
const iconStyle: React.CSSProperties = {
|
||||
position: 'absolute',
|
||||
fontSize: '1em',
|
||||
fontSize: BASE_SIZE,
|
||||
lineHeight: 1,
|
||||
border: `1px solid ${token.colorText}`,
|
||||
color: token.colorText,
|
||||
@ -85,39 +108,36 @@ export default function LangBtn({
|
||||
}
|
||||
|
||||
let node = (
|
||||
<Button
|
||||
size="small"
|
||||
onClick={onClick}
|
||||
css={[sharedStyle.headerButton, style.btn]}
|
||||
key="lang-button"
|
||||
>
|
||||
{pure ? (
|
||||
value === 1 ? (
|
||||
label1
|
||||
<button onClick={onClick} css={[style.btn]} key="lang-button">
|
||||
<div className="btn-inner">
|
||||
{pure ? (
|
||||
value === 1 ? (
|
||||
label1
|
||||
) : (
|
||||
label2
|
||||
)
|
||||
) : (
|
||||
label2
|
||||
)
|
||||
) : (
|
||||
<div style={{ position: 'relative', width: '1em', height: '1em' }}>
|
||||
<span
|
||||
style={{
|
||||
...iconStyle,
|
||||
...label1Style,
|
||||
}}
|
||||
>
|
||||
{label1}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
...iconStyle,
|
||||
...label2Style,
|
||||
}}
|
||||
>
|
||||
{label2}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
<div style={{ position: 'relative', width: BASE_SIZE, height: BASE_SIZE }}>
|
||||
<span
|
||||
style={{
|
||||
...iconStyle,
|
||||
...label1Style,
|
||||
}}
|
||||
>
|
||||
{label1}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
...iconStyle,
|
||||
...label2Style,
|
||||
}}
|
||||
>
|
||||
{label2}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
|
||||
if (tooltip1 || tooltip2) {
|
||||
|
||||
@ -2,9 +2,8 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState }
|
||||
import { FormattedMessage, useIntl } from 'dumi';
|
||||
import DumiSearchBar from 'dumi/theme-default/slots/SearchBar';
|
||||
import classNames from 'classnames';
|
||||
import { Button, Col, Modal, Popover, Row, Select, Typography } from 'antd';
|
||||
import { MenuOutlined } from '@ant-design/icons';
|
||||
import canUseDom from 'rc-util/lib/Dom/canUseDom';
|
||||
import { Col, Modal, Popover, Row, Select, Typography } from 'antd';
|
||||
import { MenuOutlined, GithubOutlined } from '@ant-design/icons';
|
||||
import type { DirectionType } from 'antd/es/config-provider';
|
||||
import * as utils from '../../utils';
|
||||
import { getThemeConfig, ping } from '../../utils';
|
||||
@ -20,7 +19,6 @@ import { ClassNames, css } from '@emotion/react';
|
||||
import useSiteToken from '../../../hooks/useSiteToken';
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import SwitchBtn from './SwitchBtn';
|
||||
import useSharedStyle from './style';
|
||||
|
||||
const RESPONSIVE_XS = 1120;
|
||||
const RESPONSIVE_SM = 1200;
|
||||
@ -164,7 +162,6 @@ interface HeaderState {
|
||||
menuVisible: boolean;
|
||||
windowWidth: number;
|
||||
searching: boolean;
|
||||
showTechUIButton: boolean;
|
||||
}
|
||||
|
||||
// ================================= Header =================================
|
||||
@ -205,7 +202,6 @@ const Header: React.FC<HeaderProps> = (props) => {
|
||||
menuVisible: false,
|
||||
windowWidth: 1400,
|
||||
searching: false,
|
||||
showTechUIButton: false,
|
||||
});
|
||||
const { direction, isMobile } = useContext<SiteContextProps>(SiteContext);
|
||||
const pingTimer = useRef<NodeJS.Timeout | null>(null);
|
||||
@ -214,7 +210,6 @@ const Header: React.FC<HeaderProps> = (props) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const style = useStyle();
|
||||
const sharedStyle = useSharedStyle();
|
||||
|
||||
const handleHideMenu = useCallback(() => {
|
||||
setHeaderState((prev) => ({ ...prev, menuVisible: false }));
|
||||
@ -245,7 +240,6 @@ const Header: React.FC<HeaderProps> = (props) => {
|
||||
window.addEventListener('resize', onWindowResize);
|
||||
pingTimer.current = ping((status) => {
|
||||
if (status !== 'timeout' && status !== 'error') {
|
||||
setHeaderState((prev) => ({ ...prev, showTechUIButton: true }));
|
||||
if (
|
||||
// process.env.NODE_ENV === 'production' &&
|
||||
window.location.host !== 'ant-design.antgroup.com' &&
|
||||
@ -316,7 +310,7 @@ const Header: React.FC<HeaderProps> = (props) => {
|
||||
[direction],
|
||||
);
|
||||
|
||||
const { menuVisible, windowWidth, searching, showTechUIButton } = headerState;
|
||||
const { menuVisible, windowWidth, searching } = headerState;
|
||||
const docVersions: Record<string, string> = {
|
||||
[antdVersion]: antdVersion,
|
||||
...themeConfig?.docVersions,
|
||||
@ -355,7 +349,6 @@ const Header: React.FC<HeaderProps> = (props) => {
|
||||
{...sharedProps}
|
||||
responsive={responsive}
|
||||
isMobile={isMobile}
|
||||
showTechUIButton={showTechUIButton}
|
||||
directionText={nextDirectionText}
|
||||
onLangChange={onLangChange}
|
||||
onDirectionChange={onDirectionChange}
|
||||
@ -414,6 +407,7 @@ const Header: React.FC<HeaderProps> = (props) => {
|
||||
{versionOptions}
|
||||
</Select>
|
||||
</Popover>,
|
||||
<More key="more" {...sharedProps} />,
|
||||
<SwitchBtn
|
||||
key="lang"
|
||||
onClick={onLangChange}
|
||||
@ -437,8 +431,16 @@ const Header: React.FC<HeaderProps> = (props) => {
|
||||
tooltip2="RTL"
|
||||
pure
|
||||
/>,
|
||||
<More key="more" {...sharedProps} />,
|
||||
<Github key="github" responsive={responsive} />,
|
||||
<a href="https://github.com/ant-design/ant-design" target="_blank">
|
||||
<SwitchBtn
|
||||
key="github"
|
||||
value={1}
|
||||
label1={<GithubOutlined />}
|
||||
tooltip1="Github"
|
||||
label2={null}
|
||||
pure
|
||||
/>
|
||||
</a>,
|
||||
];
|
||||
|
||||
if (windowWidth < RESPONSIVE_XS) {
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
import { css } from '@emotion/react';
|
||||
import useSiteToken from '../../../hooks/useSiteToken';
|
||||
|
||||
const useSharedStyle = () => {
|
||||
const { token } = useSiteToken();
|
||||
|
||||
return {
|
||||
headerButton: css`
|
||||
color: ${token.colorText};
|
||||
border-color: ${token.colorBorder};
|
||||
`,
|
||||
};
|
||||
};
|
||||
|
||||
export default useSharedStyle;
|
||||
@ -299,6 +299,27 @@ export default () => {
|
||||
};
|
||||
```
|
||||
|
||||
### Shadow DOM Usage
|
||||
|
||||
Since `<style />` tag insertion is different from normal DOM in Shadow DOM scenario, you need to use `StyleProvider` of `@ant-design/cssinjs` to configure the `container` property to set the insertion position:
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { StyleProvider } from '@ant-design/cssinjs';
|
||||
|
||||
const shadowRoot = someEle.attachShadow({ mode: 'open' });
|
||||
const container = document.createElement('div');
|
||||
shadowRoot.appendChild(container);
|
||||
const root = createRoot(container);
|
||||
|
||||
root.render(
|
||||
<StyleProvider container={shadowRoot}>
|
||||
<MyApp />
|
||||
</StyleProvider>,
|
||||
);
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Theme
|
||||
|
||||
@ -299,6 +299,27 @@ export default () => {
|
||||
};
|
||||
```
|
||||
|
||||
### Shadow DOM 场景
|
||||
|
||||
在 Shadow DOM 场景中，由于其添加 `<style />` 标签的方式与普通 DOM 不同，所以需要使用 `@ant-design/cssinjs` 的 `StyleProvider` 配置 `container` 属性用于设置插入位置：
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { StyleProvider } from '@ant-design/cssinjs';
|
||||
|
||||
const shadowRoot = someEle.attachShadow({ mode: 'open' });
|
||||
const container = document.createElement('div');
|
||||
shadowRoot.appendChild(container);
|
||||
const root = createRoot(container);
|
||||
|
||||
root.render(
|
||||
<StyleProvider container={shadowRoot}>
|
||||
<MyApp />
|
||||
</StyleProvider>,
|
||||
);
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Theme
|
||||
|
||||
@ -191,6 +191,10 @@ Please ref dynamic theme document [Compatible Adjustment](/docs/react/customize-
|
||||
|
||||
Same as above. You can adjust antd css priority to override. Related issue: [#38794](https://github.com/ant-design/ant-design/issues/38794)
|
||||
|
||||
## How to let CSS-in-JS work with shadow DOM?
|
||||
|
||||
Please ref document [Shadow Dom Usage](/docs/react/customize-theme#shadow-dom-usage).
|
||||
|
||||
## How to support SSR？
|
||||
|
||||
Please ref dynamic theme document [SSR](/docs/react/customize-theme#server-side-render-ssr) part.
|
||||
|
||||
@ -212,6 +212,10 @@ ConfigProvider.config({
|
||||
|
||||
同上，你可以调整 antd 样式优先级以覆盖。相关 issue: [#38794](https://github.com/ant-design/ant-design/issues/38794)
|
||||
|
||||
## CSS-in-JS 如何与 Shadow DOM 一同使用？
|
||||
|
||||
请参考文档 [Shadow Dom 场景](/docs/react/customize-theme-cn#shadow-dom-场景) 内容。
|
||||
|
||||
## 如何支持 SSR？
|
||||
|
||||
请参考动态主题文档 [服务端渲染](/docs/react/customize-theme-cn#服务端渲染) 部分内容。
|
||||
|
||||
Loading…
Reference in New Issue
Block a user