mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-04 17:09:46 +08:00
4eff22497d
* feat: AnchorInk * feat: update * feat: update ink * test: add test * feat: handle with nested link * feat: improve * fix: lint * feat: get direction from context in AnchorLink * docs: update demo * test: update snapshot * test: update snapshot * test: update snapshot * test: update test cases * test: update snapshot * test: update snapshots * test: update snapshots * test: update test cases * test: update test cases * docs: update * test: improve * docs: update demo * doc: update demos * doc: update demos again * feat: use scroll-into-view-if-needed * fix: hide scrollbar * docs: update demos * fix: active transition for horizontal anchor * chore: fix terser (#39617) * chore: fix terser * chore: clean up * test: update snapshot * feat: improve code style * feat: anchor ink improvement * feat: improve code style * fix: lint issue * test: update snapshots * docs: simplified the demo * feat: Merge the AnchorInk component back into the Anchor component * feat: Adjust DOM order * test: update snapshots * docs: Improve the document * feat: simplify css classnames * test: update snapshots Co-authored-by: 二货爱吃白萝卜 <smith3816@gmail.com>
83 lines
1.8 KiB
TypeScript
83 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Anchor } from 'antd';
|
|
|
|
const App: React.FC = () => (
|
|
<>
|
|
<div style={{ padding: '20px' }}>
|
|
<Anchor
|
|
direction="horizontal"
|
|
items={[
|
|
{
|
|
key: 'part-1',
|
|
href: '#part-1',
|
|
title: 'Part 1',
|
|
},
|
|
{
|
|
key: 'part-2',
|
|
href: '#part-2',
|
|
title: 'Part 2',
|
|
},
|
|
{
|
|
key: 'part-3',
|
|
href: '#part-3',
|
|
title: 'Part 3',
|
|
},
|
|
{
|
|
key: 'part-4',
|
|
href: '#part-4',
|
|
title: 'Part 4',
|
|
},
|
|
{
|
|
key: 'part-5',
|
|
href: '#part-5',
|
|
title: 'Part 5',
|
|
},
|
|
{
|
|
key: 'part-6',
|
|
href: '#part-6',
|
|
title: 'Part 6',
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div
|
|
id="part-1"
|
|
style={{
|
|
width: '100vw',
|
|
height: '100vh',
|
|
textAlign: 'center',
|
|
background: 'rgba(0,255,0,0.02)',
|
|
}}
|
|
/>
|
|
<div
|
|
id="part-2"
|
|
style={{
|
|
width: '100vw',
|
|
height: '100vh',
|
|
textAlign: 'center',
|
|
background: 'rgba(0,0,255,0.02)',
|
|
}}
|
|
/>
|
|
<div
|
|
id="part-3"
|
|
style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#FFFBE9' }}
|
|
/>
|
|
<div
|
|
id="part-4"
|
|
style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#F4EAD5' }}
|
|
/>
|
|
<div
|
|
id="part-5"
|
|
style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#DAE2B6' }}
|
|
/>
|
|
<div
|
|
id="part-6"
|
|
style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#CCD6A6' }}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
export default App;
|