mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-23 23:18:36 +08:00
56 lines
1.1 KiB
TypeScript
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;
|