mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

docs: Adjust Anchor demo (#39488)

Browse Source
This commit is contained in:
二货爱吃白萝卜 2022-12-12 19:44:32 +08:00 committed by GitHub
parent cd7f38b42a
commit de31c90b08
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 338 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

257
components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1,77 +1,79 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`] = `
<div>
<div
class="ant-row"
>
<div
class=""
class="ant-col ant-col-16"
>
<div
class="ant-anchor-wrapper"
style="max-height:100vh"
>
id="part-1"
style="height:100vh;background:rgba(255,0,0,0.02)"
/>
<div
id="part-2"
style="height:100vh;background:rgba(0,255,0,0.02)"
/>
<div
id="part-3"
style="height:100vh;background:rgba(0,0,255,0.02)"
/>
</div>
<div
class="ant-col ant-col-8"
>
<div>
<div
class="ant-anchor"
class=""
>
<div
class="ant-anchor-ink"
class="ant-anchor-wrapper"
style="max-height:100vh"
>
<span
class="ant-anchor-ink-ball"
/>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#components-anchor-demo-basic"
title="Basic demo"
>
Basic demo
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#components-anchor-demo-static"
title="Static demo"
>
Static demo
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#api"
title="API"
>
API
</a>
<div
class="ant-anchor-link"
class="ant-anchor"
>
<a
class="ant-anchor-link-title"
href="#anchor-props"
title="Anchor Props"
<div
class="ant-anchor-ink"
>
Anchor Props
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#link-props"
title="Link Props"
<span
class="ant-anchor-ink-ball"
/>
</div>
<div
class="ant-anchor-link"
>
Link Props
</a>
<a
class="ant-anchor-link-title"
href="#part-1"
title="Part 1"
>
Part 1
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#part-2"
title="Part 2"
>
Part 2
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#part-3"
title="Part 3"
>
Part 3
</a>
</div>
</div>
</div>
</div>
@ -379,79 +381,96 @@ exports[`renders ./components/anchor/demo/static.tsx extend context correctly 1`
exports[`renders ./components/anchor/demo/targetOffset.tsx extend context correctly 1`] = `
<div>
<div
class=""
class="ant-row"
>
<div
class="ant-anchor-wrapper"
style="max-height:100vh"
class="ant-col ant-col-18"
>
<div
class="ant-anchor"
id="part-1"
style="height:100vh;background:rgba(255,0,0,0.02);margin-top:30vh"
>
Part 1
</div>
<div
id="part-2"
style="height:100vh;background:rgba(0,255,0,0.02)"
>
Part 2
</div>
<div
id="part-3"
style="height:100vh;background:rgba(0,0,255,0.02)"
>
Part 3
</div>
</div>
<div
class="ant-col ant-col-6"
>
<div>
<div
class="ant-anchor-ink"
class=""
>
<span
class="ant-anchor-ink-ball"
/>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#components-anchor-demo-basic"
title="Basic demo"
>
Basic demo
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#components-anchor-demo-static"
title="Static demo"
>
Static demo
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#api"
title="API"
>
API
</a>
<div
class="ant-anchor-link"
class="ant-anchor-wrapper"
style="max-height:100vh"
>
<a
class="ant-anchor-link-title"
href="#anchor-props"
title="Anchor Props"
<div
class="ant-anchor"
>
Anchor Props
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#link-props"
title="Link Props"
>
Link Props
</a>
<div
class="ant-anchor-ink"
>
<span
class="ant-anchor-ink-ball"
/>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#part-1"
title="Part 1"
>
Part 1
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#part-2"
title="Part 2"
>
Part 2
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#part-3"
title="Part 3"
>
Part 3
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
style="height:30vh;background:rgba(0,0,0,0.85);position:fixed;top:0;left:0;width:75%;color:#FFF"
>
<div>
Fixed Top Block
</div>
</div>
</div>
`;

257
components/anchor/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -1,77 +1,79 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = `
<div>
<div
class="ant-row"
>
<div
class=""
class="ant-col ant-col-16"
>
<div
class="ant-anchor-wrapper"
style="max-height:100vh"
>
id="part-1"
style="height:100vh;background:rgba(255,0,0,0.02)"
/>
<div
id="part-2"
style="height:100vh;background:rgba(0,255,0,0.02)"
/>
<div
id="part-3"
style="height:100vh;background:rgba(0,0,255,0.02)"
/>
</div>
<div
class="ant-col ant-col-8"
>
<div>
<div
class="ant-anchor"
class=""
>
<div
class="ant-anchor-ink"
class="ant-anchor-wrapper"
style="max-height:100vh"
>
<span
class="ant-anchor-ink-ball"
/>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#components-anchor-demo-basic"
title="Basic demo"
>
Basic demo
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#components-anchor-demo-static"
title="Static demo"
>
Static demo
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#api"
title="API"
>
API
</a>
<div
class="ant-anchor-link"
class="ant-anchor"
>
<a
class="ant-anchor-link-title"
href="#anchor-props"
title="Anchor Props"
<div
class="ant-anchor-ink"
>
Anchor Props
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#link-props"
title="Link Props"
<span
class="ant-anchor-ink-ball"
/>
</div>
<div
class="ant-anchor-link"
>
Link Props
</a>
<a
class="ant-anchor-link-title"
href="#part-1"
title="Part 1"
>
Part 1
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#part-2"
title="Part 2"
>
Part 2
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#part-3"
title="Part 3"
>
Part 3
</a>
</div>
</div>
</div>
</div>
@ -379,79 +381,96 @@ exports[`renders ./components/anchor/demo/static.tsx correctly 1`] = `
exports[`renders ./components/anchor/demo/targetOffset.tsx correctly 1`] = `
<div>
<div
class=""
class="ant-row"
>
<div
class="ant-anchor-wrapper"
style="max-height:100vh"
class="ant-col ant-col-18"
>
<div
class="ant-anchor"
id="part-1"
style="height:100vh;background:rgba(255,0,0,0.02);margin-top:30vh"
>
Part 1
</div>
<div
id="part-2"
style="height:100vh;background:rgba(0,255,0,0.02)"
>
Part 2
</div>
<div
id="part-3"
style="height:100vh;background:rgba(0,0,255,0.02)"
>
Part 3
</div>
</div>
<div
class="ant-col ant-col-6"
>
<div>
<div
class="ant-anchor-ink"
class=""
>
<span
class="ant-anchor-ink-ball"
/>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#components-anchor-demo-basic"
title="Basic demo"
>
Basic demo
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#components-anchor-demo-static"
title="Static demo"
>
Static demo
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#api"
title="API"
>
API
</a>
<div
class="ant-anchor-link"
class="ant-anchor-wrapper"
style="max-height:100vh"
>
<a
class="ant-anchor-link-title"
href="#anchor-props"
title="Anchor Props"
<div
class="ant-anchor"
>
Anchor Props
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#link-props"
title="Link Props"
>
Link Props
</a>
<div
class="ant-anchor-ink"
>
<span
class="ant-anchor-ink-ball"
/>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#part-1"
title="Part 1"
>
Part 1
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#part-2"
title="Part 2"
>
Part 2
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#part-3"
title="Part 3"
>
Part 3
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
style="height:30vh;background:rgba(0,0,0,0.85);position:fixed;top:0;left:0;width:75%;color:#FFF"
>
<div>
Fixed Top Block
</div>
</div>
</div>
`;

24
components/anchor/demo/basic.tsx
View File

@ -1,17 +1,23 @@
import React from 'react';
import { Anchor } from 'antd';
import { Anchor, Row, Col } from 'antd';
const { Link } = Anchor;
const App: React.FC = () => (
<Anchor>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#api" title="API">
<Link href="#anchor-props" title="Anchor Props" />
<Link href="#link-props" title="Link Props" />
</Link>
</Anchor>
<Row>
<Col span={16}>
<div id="part-1" style={{ height: '100vh', background: 'rgba(255,0,0,0.02)' }} />
<div id="part-2" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }} />
<div id="part-3" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }} />
</Col>
<Col span={8}>
<Anchor>
<Link href="#part-1" title="Part 1" />
<Link href="#part-2" title="Part 2" />
<Link href="#part-3" title="Part 3" />
</Anchor>
</Col>
</Row>
);
export default App;

53
components/anchor/demo/targetOffset.tsx
View File

@ -1,24 +1,57 @@
import React, { useEffect, useState } from 'react';
import { Anchor } from 'antd';
import { Anchor, Row, Col } from 'antd';
const { Link } = Anchor;
const App: React.FC = () => {
const topRef = React.useRef<HTMLDivElement>(null);
const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);
useEffect(() => {
setTargetOffset(window.innerHeight / 2);
setTargetOffset(topRef.current?.clientHeight);
}, []);
return (
<Anchor targetOffset={targetOffset}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#api" title="API">
<Link href="#anchor-props" title="Anchor Props" />
<Link href="#link-props" title="Link Props" />
</Link>
</Anchor>
<div>
<Row>
<Col span={18}>
<div
id="part-1"
style={{ height: '100vh', background: 'rgba(255,0,0,0.02)', marginTop: '30vh' }}
>
Part 1
</div>
<div id="part-2" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }}>
Part 2
</div>
<div id="part-3" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }}>
Part 3
</div>
</Col>
<Col span={6}>
<Anchor targetOffset={targetOffset}>
<Link href="#part-1" title="Part 1" />
<Link href="#part-2" title="Part 2" />
<Link href="#part-3" title="Part 3" />
</Anchor>
</Col>
</Row>
<div
style={{
height: '30vh',
background: 'rgba(0,0,0,0.85)',
position: 'fixed',
top: 0,
left: 0,
width: '75%',
color: '#FFF',
}}
ref={topRef}
>
<div>Fixed Top Block</div>
</div>
</div>
);
};

4
components/anchor/index.en-US.md
View File

@ -22,11 +22,11 @@ For displaying anchor hyperlinks on page and jumping between them.
## Examples
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">Basic</code>
<code src="./demo/basic.tsx" iframe="200">Basic</code>
<code src="./demo/static.tsx">Static Anchor</code>
<code src="./demo/onClick.tsx">Customize the onClick event</code>
<code src="./demo/customizeHighlight.tsx">Customize the anchor highlight</code>
<code src="./demo/targetOffset.tsx">Set Anchor scroll offset</code>
<code src="./demo/targetOffset.tsx" iframe="200">Set Anchor scroll offset</code>
<code src="./demo/onChange.tsx">Listening for anchor link change</code>
## API

4
components/anchor/index.zh-CN.md
View File

@ -23,11 +23,11 @@ group:
## 代码演示
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">基本</code>
<code src="./demo/basic.tsx" iframe="200">基本</code>
<code src="./demo/static.tsx">静态位置</code>
<code src="./demo/onClick.tsx">自定义 onClick 事件</code>
<code src="./demo/customizeHighlight.tsx">自定义锚点高亮</code>
<code src="./demo/targetOffset.tsx">设置锚点滚动偏移量</code>
<code src="./demo/targetOffset.tsx" iframe="200">设置锚点滚动偏移量</code>
<code src="./demo/onChange.tsx">监听锚点链接改变</code>
## API