ant-design/components/anchor/demo/horizontal.tsx
MadCcc afcdc3fbe2
chore: try to fix screenshot (#44817)
* chore: try to fix screenshot

* chore: set small viewport

* chore: rm wait until

* chore: minimize demo

* chore: support onlyViewPort

* chore: better logic

* chore: config demos

* chore: update

* refactor: rename

* chore: update

* chore: update

* chore: update
2023-09-14 16:59:11 +08:00

56 lines
1.1 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',
},
]}
/>
</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>
</>
);
export default App;