You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
528 lines
32 KiB
528 lines
32 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[7610],{591264:function(p,c,t){t.r(c);var _=t(502143),m=t(968521),h=t(720719),g=t(28840),v=t(759907),o=t(828089),Z=t(825673),f=t(902068),k=t(574399),b=t(863942),P=t(316073),x=t(24628),y=t(719260),A=t(956140),i=t(127179),a=t(905388),E=t(40428),C=t(606965),D=t(268696),w=t(587302),r=t(424128),O=t(249706),M=t(795127),R=t(116846),L=t(212039),T=t(73024),I=t(553913),l=t(606641),s=t(667294),n=t(370917);function d(){var u=(0,l.eL)(),e=u.texts;return(0,n.tZ)(l.dY,null,(0,n.tZ)(s.Fragment,null,(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)("p",null,e[0].value),(0,n.tZ)("h2",{id:"\u4F55\u65F6\u4F7F\u7528"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4F55\u65F6\u4F7F\u7528",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"\u4F55\u65F6\u4F7F\u7528"),(0,n.tZ)("p",null,e[1].value),(0,n.tZ)("blockquote",null,(0,n.tZ)("p",null,e[2].value),(0,n.tZ)("p",null,e[3].value,(0,n.tZ)("code",null,e[4].value),e[5].value,(0,n.tZ)("code",null,e[6].value),e[7].value)),(0,n.tZ)("h2",{id:"\u4EE3\u7801\u6F14\u793A"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4EE3\u7801\u6F14\u793A",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"\u4EE3\u7801\u6F14\u793A")),(0,n.tZ)(a.Z,{items:[{demo:{id:"components-anchor-demo-basic"},previewerProps:{iframe:"200",title:"\u57FA\u672C",filename:"components/anchor/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Anchor, Row, Col } from 'antd';
|
|
const App = () => (
|
|
<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
|
|
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',
|
|
},
|
|
]}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u6700\u7B80\u5355\u7684\u7528\u6CD5\u3002</p>"}},{demo:{id:"components-anchor-demo-horizontal"},previewerProps:{iframe:"200",title:"\u6A2A\u5411 Anchor",filename:"components/anchor/demo/horizontal.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Anchor } from 'antd';
|
|
const App = () => (
|
|
<>
|
|
<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;
|
|
`,description:"<p>\u6A2A\u5411 Anchor\u3002</p>"}},{demo:{id:"components-anchor-demo-static"},previewerProps:{title:"\u9759\u6001\u4F4D\u7F6E",filename:"components/anchor/demo/static.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Anchor } from 'antd';
|
|
const App = () => (
|
|
<Anchor
|
|
affix={false}
|
|
items={[
|
|
{
|
|
key: '1',
|
|
href: '#components-anchor-demo-basic',
|
|
title: 'Basic demo',
|
|
},
|
|
{
|
|
key: '2',
|
|
href: '#components-anchor-demo-static',
|
|
title: 'Static demo',
|
|
},
|
|
{
|
|
key: '3',
|
|
href: '#api',
|
|
title: 'API',
|
|
children: [
|
|
{
|
|
key: '4',
|
|
href: '#anchor-props',
|
|
title: 'Anchor Props',
|
|
},
|
|
{
|
|
key: '5',
|
|
href: '#link-props',
|
|
title: 'Link Props',
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u4E0D\u6D6E\u52A8\uFF0C\u72B6\u6001\u4E0D\u968F\u9875\u9762\u6EDA\u52A8\u53D8\u5316\u3002</p>"}},{demo:{id:"components-anchor-demo-onclick"},previewerProps:{title:"\u81EA\u5B9A\u4E49 onClick \u4E8B\u4EF6",filename:"components/anchor/demo/onClick.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Anchor } from 'antd';
|
|
const handleClick = (e, link) => {
|
|
e.preventDefault();
|
|
console.log(link);
|
|
};
|
|
const App = () => (
|
|
<Anchor
|
|
affix={false}
|
|
onClick={handleClick}
|
|
items={[
|
|
{
|
|
key: '1',
|
|
href: '#components-anchor-demo-basic',
|
|
title: 'Basic demo',
|
|
},
|
|
{
|
|
key: '2',
|
|
href: '#components-anchor-demo-static',
|
|
title: 'Static demo',
|
|
},
|
|
{
|
|
key: '3',
|
|
href: '#api',
|
|
title: 'API',
|
|
children: [
|
|
{
|
|
key: '4',
|
|
href: '#anchor-props',
|
|
title: 'Anchor Props',
|
|
},
|
|
{
|
|
key: '5',
|
|
href: '#link-props',
|
|
title: 'Link Props',
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u70B9\u51FB\u951A\u70B9\u4E0D\u8BB0\u5F55\u5386\u53F2\u3002</p>"}},{demo:{id:"components-anchor-demo-customizehighlight"},previewerProps:{title:"\u81EA\u5B9A\u4E49\u951A\u70B9\u9AD8\u4EAE",filename:"components/anchor/demo/customizeHighlight.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Anchor } from 'antd';
|
|
const getCurrentAnchor = () => '#components-anchor-demo-static';
|
|
const App = () => (
|
|
<Anchor
|
|
affix={false}
|
|
getCurrentAnchor={getCurrentAnchor}
|
|
items={[
|
|
{
|
|
key: '1',
|
|
href: '#components-anchor-demo-basic',
|
|
title: 'Basic demo',
|
|
},
|
|
{
|
|
key: '2',
|
|
href: '#components-anchor-demo-static',
|
|
title: 'Static demo',
|
|
},
|
|
{
|
|
key: '3',
|
|
href: '#api',
|
|
title: 'API',
|
|
children: [
|
|
{
|
|
key: '4',
|
|
href: '#anchor-props',
|
|
title: 'Anchor Props',
|
|
},
|
|
{
|
|
key: '5',
|
|
href: '#link-props',
|
|
title: 'Link Props',
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u81EA\u5B9A\u4E49\u951A\u70B9\u9AD8\u4EAE\u3002</p>"}},{demo:{id:"components-anchor-demo-targetoffset"},previewerProps:{iframe:"200",title:"\u8BBE\u7F6E\u951A\u70B9\u6EDA\u52A8\u504F\u79FB\u91CF",filename:"components/anchor/demo/targetOffset.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useEffect, useState } from 'react';
|
|
import { Anchor, Row, Col } from 'antd';
|
|
const App = () => {
|
|
const topRef = React.useRef(null);
|
|
const [targetOffset, setTargetOffset] = useState();
|
|
useEffect(() => {
|
|
setTargetOffset(topRef.current?.clientHeight);
|
|
}, []);
|
|
return (
|
|
<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}
|
|
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',
|
|
},
|
|
]}
|
|
/>
|
|
</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>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u951A\u70B9\u76EE\u6807\u6EDA\u52A8\u5230\u5C4F\u5E55\u6B63\u4E2D\u95F4\u3002</p>"}},{demo:{id:"components-anchor-demo-onchange"},previewerProps:{title:"\u76D1\u542C\u951A\u70B9\u94FE\u63A5\u6539\u53D8",filename:"components/anchor/demo/onChange.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Anchor } from 'antd';
|
|
const onChange = (link) => {
|
|
console.log('Anchor:OnChange', link);
|
|
};
|
|
const App = () => (
|
|
<Anchor
|
|
affix={false}
|
|
onChange={onChange}
|
|
items={[
|
|
{
|
|
key: '1',
|
|
href: '#components-anchor-demo-basic',
|
|
title: 'Basic demo',
|
|
},
|
|
{
|
|
key: '2',
|
|
href: '#components-anchor-demo-static',
|
|
title: 'Static demo',
|
|
},
|
|
{
|
|
key: '3',
|
|
href: '#api',
|
|
title: 'API',
|
|
children: [
|
|
{
|
|
key: '4',
|
|
href: '#anchor-props',
|
|
title: 'Anchor Props',
|
|
},
|
|
{
|
|
key: '5',
|
|
href: '#link-props',
|
|
title: 'Link Props',
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u76D1\u542C\u951A\u70B9\u94FE\u63A5\u6539\u53D8</p>"}},{demo:{id:"components-anchor-demo-replace"},previewerProps:{iframe:"200",title:"\u66FF\u6362\u5386\u53F2\u4E2D\u7684 href",filename:"components/anchor/demo/replace.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Anchor, Col, Row } from 'antd';
|
|
import React from 'react';
|
|
const App = () => (
|
|
<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
|
|
replace
|
|
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',
|
|
},
|
|
]}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u66FF\u6362\u6D4F\u89C8\u5668\u5386\u53F2\u8BB0\u5F55\u4E2D\u7684\u8DEF\u5F84\uFF0C\u540E\u9000\u6309\u94AE\u5C06\u8FD4\u56DE\u5230\u4E0A\u4E00\u9875\u800C\u4E0D\u662F\u4E0A\u4E00\u4E2A\u951A\u70B9\u3002</p>"}},{demo:{id:"components-anchor-demo-legacy-anchor"},previewerProps:{debug:!0,title:"\u5E9F\u5F03\u7684 JSX \u793A\u4F8B",filename:"components/anchor/demo/legacy-anchor.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Anchor } from 'antd';
|
|
const { Link } = Anchor;
|
|
const App = () => (
|
|
<Anchor affix={false}>
|
|
<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>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u8C03\u8BD5\u4F7F\u7528</p>"}},{demo:{id:"components-anchor-demo-component-token"},previewerProps:{debug:!0,title:"\u7EC4\u4EF6 Token",filename:"components/anchor/demo/component-token.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Anchor, Col, ConfigProvider, Row } from 'antd';
|
|
import React from 'react';
|
|
|
|
/** Test usage. Do not use in your production. */
|
|
|
|
export default () => (
|
|
<ConfigProvider
|
|
theme={{
|
|
components: {
|
|
Anchor: {
|
|
linkPaddingBlock: 100,
|
|
linkPaddingInlineStart: 50,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<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
|
|
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',
|
|
},
|
|
]}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</ConfigProvider>
|
|
);
|
|
`,description:"<p>Component Token Debug.</p>"}}]}),(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)("h2",{id:"api"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"API"),(0,n.tZ)("h3",{id:"anchor-props"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#anchor-props",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Anchor Props"),(0,n.tZ)(o.Z,{className:"component-api-table"},(0,n.tZ)("thead",null,(0,n.tZ)("tr",null,(0,n.tZ)("th",null,e[8].value),(0,n.tZ)("th",null,e[9].value),(0,n.tZ)("th",null,e[10].value),(0,n.tZ)("th",null,e[11].value),(0,n.tZ)("th",null,e[12].value))),(0,n.tZ)("tbody",null,(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[13].value),(0,n.tZ)("td",null,e[14].value),(0,n.tZ)("td",null,e[15].value),(0,n.tZ)("td",null,e[16].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[17].value),(0,n.tZ)("td",null,e[18].value),(0,n.tZ)("td",null,e[19].value),(0,n.tZ)("td",null,e[20].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[21].value),(0,n.tZ)("td",null,e[22].value),(0,n.tZ)("td",null,e[23].value),(0,n.tZ)("td",null,e[24].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[25].value),(0,n.tZ)("td",null,e[26].value),(0,n.tZ)("td",null,e[27].value),(0,n.tZ)("td",null,e[28].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[29].value),(0,n.tZ)("td",null,e[30].value),(0,n.tZ)("td",null,e[31].value),(0,n.tZ)("td",null),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[32].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[33].value),e[34].value),(0,n.tZ)("td",null,e[35].value),(0,n.tZ)("td",null,e[36].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[37].value),(0,n.tZ)("td",null,e[38].value,(0,n.tZ)(r.Z,{to:"#components-anchor-demo-targetoffset",sourceType:"Link"},e[39].value)),(0,n.tZ)("td",null,e[40].value),(0,n.tZ)("td",null,e[41].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[42].value),(0,n.tZ)("td",null,e[43].value),(0,n.tZ)("td",null,e[44].value),(0,n.tZ)("td",null,e[45].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[46].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[47].value),e[48].value),(0,n.tZ)("td",null,e[49].value),(0,n.tZ)("td",null,e[50].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[51].value),(0,n.tZ)("td",null,e[52].value),(0,n.tZ)("td",null,e[53].value,(0,n.tZ)(r.Z,{to:"#anchoritem",sourceType:"Link"},e[54].value)),(0,n.tZ)("td",null,e[55].value),(0,n.tZ)("td",null,e[56].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[57].value),(0,n.tZ)("td",null,e[58].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[59].value),e[60].value,(0,n.tZ)("code",null,e[61].value)),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[62].value)),(0,n.tZ)("td",null,e[63].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[64].value),(0,n.tZ)("td",null,e[65].value),(0,n.tZ)("td",null,e[66].value),(0,n.tZ)("td",null,e[67].value),(0,n.tZ)("td",null,e[68].value)))),(0,n.tZ)("h3",{id:"anchoritem"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#anchoritem",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"AnchorItem"),(0,n.tZ)(o.Z,{className:"component-api-table"},(0,n.tZ)("thead",null,(0,n.tZ)("tr",null,(0,n.tZ)("th",null,e[69].value),(0,n.tZ)("th",null,e[70].value),(0,n.tZ)("th",null,e[71].value),(0,n.tZ)("th",null,e[72].value),(0,n.tZ)("th",null,e[73].value))),(0,n.tZ)("tbody",null,(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[74].value),(0,n.tZ)("td",null,e[75].value),(0,n.tZ)("td",null,e[76].value),(0,n.tZ)("td",null,e[77].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[78].value),(0,n.tZ)("td",null,e[79].value),(0,n.tZ)("td",null,e[80].value),(0,n.tZ)("td",null,e[81].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[82].value),(0,n.tZ)("td",null,e[83].value),(0,n.tZ)("td",null,e[84].value),(0,n.tZ)("td",null,e[85].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[86].value),(0,n.tZ)("td",null,e[87].value),(0,n.tZ)("td",null,e[88].value),(0,n.tZ)("td",null,e[89].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[90].value),(0,n.tZ)("td",null,e[91].value,(0,n.tZ)("code",null,e[92].value)),(0,n.tZ)("td",null,(0,n.tZ)(r.Z,{to:"#anchoritem",sourceType:"Link"},e[93].value),e[94].value),(0,n.tZ)("td",null,e[95].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[96].value),(0,n.tZ)("td",null,e[97].value),(0,n.tZ)("td",null,e[98].value),(0,n.tZ)("td",null,e[99].value),(0,n.tZ)("td",null,e[100].value)))),(0,n.tZ)("h3",{id:"link-props"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#link-props",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Link Props"),(0,n.tZ)("p",null,e[101].value),(0,n.tZ)(o.Z,{className:"component-api-table"},(0,n.tZ)("thead",null,(0,n.tZ)("tr",null,(0,n.tZ)("th",null,e[102].value),(0,n.tZ)("th",null,e[103].value),(0,n.tZ)("th",null,e[104].value),(0,n.tZ)("th",null,e[105].value),(0,n.tZ)("th",null,e[106].value))),(0,n.tZ)("tbody",null,(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[107].value),(0,n.tZ)("td",null,e[108].value),(0,n.tZ)("td",null,e[109].value),(0,n.tZ)("td",null,e[110].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[111].value),(0,n.tZ)("td",null,e[112].value),(0,n.tZ)("td",null,e[113].value),(0,n.tZ)("td",null,e[114].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[115].value),(0,n.tZ)("td",null,e[116].value),(0,n.tZ)("td",null,e[117].value),(0,n.tZ)("td",null,e[118].value),(0,n.tZ)("td",null)))),(0,n.tZ)("h2",{id:"design-token"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,n.tZ)(i.Z,{component:"Anchor"})))}c.default=d}}]);
|
|
|