3826-1ed4e3d28b8eb3ab6cda.js

(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[3826],{83826:(n,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>_});var t=a(73450),p=a(73118),o=a(27378),e=a(57318),c=a(5905),l=a(39550),u=a(74473),i=a(3454),k=a(24246);function r(n,s){var a=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);s&&(t=t.filter((function(s){return Object.getOwnPropertyDescriptor(n,s).enumerable}))),a.push.apply(a,t)}return a}function d(n){for(var s=1;s<arguments.length;s++){var a=null!=arguments[s]?arguments[s]:{};s%2?r(Object(a),!0).forEach((function(s){(0,t.Z)(n,s,a[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):r(Object(a)).forEach((function(s){Object.defineProperty(n,s,Object.getOwnPropertyDescriptor(a,s))}))}return n}var g=function(){var n=[{link:"页面目录一",title:"页面目录一页面目录一页面目录一"},{link:"页面目录二",title:"页面目录二"},{link:"页面目录三",title:"页面目录三"},{link:"页面目录四",title:"页面目录四"}],s=()=>{var s=(0,o.useRef)(null);return(0,k.jsx)("div",{className:"zent-demo-elevator-basic",ref:s,children:(0,k.jsx)(c.q,{getContainer:()=>s.current,children:(0,k.jsxs)(l.W,{children:[(0,k.jsx)(u.r,{span:14,children:(0,k.jsx)("div",{className:"zent-demo-elevator-basic__block",children:n.map((n=>(0,k.jsxs)("div",{children:[(0,k.jsx)(c.q.Anchor,{link:n.link,children:(0,k.jsx)("h3",{children:n.title})}),(0,k.jsx)("div",{className:"zent-demo-elevator-basic__block__content"})]},n.link)))})}),(0,k.jsx)(u.r,{span:8,offset:14,children:(0,k.jsx)(c.q.Links,{offsetTop:24,offsetBottom:24,links:n})})]})})})};return(0,k.jsx)(s,{})},m=function(){var n=[{link:"页面目录一",title:"页面目录一"},{link:"页面目录二",title:"页面目录二"},{link:"页面目录三",title:"页面目录三"},{link:"页面目录四",title:"页面目录四"}],s=()=>{var s=(0,o.useRef)(null);return(0,k.jsx)("div",{className:"zent-demo-elevator-basic",ref:s,children:(0,k.jsx)(c.q,{getContainer:()=>s.current,offsetTop:50,children:(0,k.jsxs)(l.W,{children:[(0,k.jsx)(u.r,{span:14,children:(0,k.jsx)("div",{className:"zent-demo-elevator-basic__block",children:n.map((n=>(0,k.jsxs)("div",{children:[(0,k.jsx)(c.q.Anchor,{link:n.link,children:(0,k.jsx)("h3",{children:n.title})}),(0,k.jsx)("div",{className:"zent-demo-elevator-basic__block__content"})]},n.link)))})}),(0,k.jsx)(u.r,{span:8,offset:14,children:(0,k.jsx)(c.q.Links,{offsetTop:24,links:n,style:{float:"right"}})})]})})})};return(0,k.jsx)(s,{})},f=function(){var n=[{link:"页面目录一",title:"页面目录一"},{link:"页面目录二",title:"页面目录二"},{link:"页面目录三",title:"页面目录三"},{link:"页面目录四",title:"页面目录四"}],s=()=>{var s=(0,o.useRef)(null),a=(0,o.useState)(void 0),t=(0,p.Z)(a,2),e=t[0],i=t[1];return(0,o.useEffect)((()=>{if(s.current){var n=s.current.getBoundingClientRect().height/2;i(n)}}),[s]),(0,k.jsx)("div",{className:"zent-demo-elevator-basic",ref:s,children:(0,k.jsx)(c.q,{getContainer:()=>s.current,targetOffset:e,children:(0,k.jsxs)(l.W,{children:[(0,k.jsx)(u.r,{span:14,children:(0,k.jsx)("div",{className:"zent-demo-elevator-basic__block",children:n.map((n=>(0,k.jsxs)("div",{children:[(0,k.jsx)(c.q.Anchor,{link:n.link,children:(0,k.jsx)("h3",{children:n.title})}),(0,k.jsx)("div",{className:"zent-demo-elevator-basic__block__content"})]},n.link)))})}),(0,k.jsx)(u.r,{span:8,offset:14,children:(0,k.jsx)(c.q.Links,{offsetTop:24,links:n,style:{float:"right"}})})]})})})};return(0,k.jsx)(s,{})},v=function(){var n=[{link:"页面目录一",title:"页面目录一"},{link:"页面目录二",title:"页面目录二"},{link:"页面目录三",title:"页面目录三"},{link:"页面目录四",title:"页面目录四"}],s=()=>(0,k.jsx)("div",{className:"zent-demo-elevator-container-window",children:(0,k.jsx)(c.q,{offsetTop:0,children:(0,k.jsxs)(l.W,{children:[(0,k.jsx)(u.r,{span:14,children:(0,k.jsx)("div",{children:n.map((n=>(0,k.jsxs)("div",{children:[(0,k.jsx)(c.q.Anchor,{link:n.link,children:(0,k.jsx)("h3",{children:n.title})}),(0,k.jsx)("div",{className:"zent-demo-elevator-basic__block__content"})]},n.link)))})}),(0,k.jsx)(u.r,{span:8,offset:14,children:(0,k.jsx)(c.q.Links,{offsetTop:24,offsetBottom:24,links:n,style:{float:"right"}})})]})})});return(0,k.jsx)(s,{})},y=function(){var n=[{link:"页面目录一",title:"页面目录一"},{link:"页面目录二",title:"页面目录二"},{link:"页面目录三",title:"页面目录三"},{link:"页面目录四",title:"页面目录四"}],s=()=>{var s=(0,o.useRef)(null),a=(0,o.useState)("页面目录一"),t=(0,p.Z)(a,2),e=t[0],r=t[1];return(0,k.jsx)("div",{className:"zent-demo-elevator-basic",ref:s,children:(0,k.jsxs)(c.q,{getContainer:()=>s.current,activeLink:e,onChange:(n,s)=>r(n),targetOffset:40,children:[n.map((n=>(0,k.jsx)(i.z,{onClick:()=>r(n.link),children:n.title}))),(0,k.jsxs)(l.W,{children:[(0,k.jsx)(u.r,{span:14,children:(0,k.jsx)("div",{children:(0,k.jsx)("div",{className:"zent-demo-elevator-basic__block",children:n.map((n=>(0,k.jsxs)("div",{children:[(0,k.jsx)(c.q.Anchor,{link:n.link,children:(0,k.jsx)("h3",{children:n.title})}),(0,k.jsx)("div",{className:"zent-demo-elevator-basic__block__content"})]},n.link)))})})}),(0,k.jsx)(u.r,{span:8,offset:14,children:(0,k.jsx)(c.q.Links,{offsetTop:24,offsetBottom:24,links:n})})]})]})})};return(0,k.jsx)(s,{})};function h(n){return(0,k.jsx)(n.tag,d(d({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function j(n){return(0,k.jsx)(h,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function b(n){return(0,k.jsx)(h,{tag:"style",html:n.style})}function w(n,s){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(s+=n.offsetTop),w(n.parentNode,s);return s}class x extends o.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{showCode:!1}),(0,t.Z)(this,"toggle",(()=>{this.setState({showCode:!this.state.showCode})}))}render(){var n=this.state.showCode,s=this.props,a=s.title,t=s.src,p=s.children;return(0,k.jsxs)("div",{className:"zandoc-react-demo",children:[(0,k.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,k.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,k.jsx)("div",{className:"zandoc-react-demo__title",children:(0,k.jsx)("p",{children:a||""})}),(0,k.jsx)("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})]}),n&&(0,k.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,k.jsx)(h,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class _ extends o.Component{componentDidMount(){var n=location.hash;if(n){var s=document.querySelector('a[href="'.concat(n,'"]'));s&&(0,e.l)(document.documentElement,0,w(s,-9))}}render(){return o.createElement("div",{className:"zandoc-react-container"},o.createElement(b,{style:".zent-demo-elevator-basic {\n\t\tbackground: #f7f7f7;\n\t\tpadding: 24px;\n\t\theight: 200px;\n\t\toverflow-y: auto;\n\t}\n\n\t.zent-demo-elevator-basic__block__content {\n\t\theight: 180px;\n\t}\n\n.zent-demo-elevator-container-window {\n\t\tbackground: #f7f7f7;\n\t\tpadding: 24px;\n\t\theight: auto;\n\t\toverflow-y: auto;\n\t}\n\t.zent-demo-elevator-container-window__block__content {\n\t\theight: 350px;\n\t}\n\n.zent-demo-elevator-basic {\n\t\tbackground: #f7f7f7;\n\t\tpadding: 24px;\n\t\theight: 200px;\n\t\toverflow-y: auto;\n\t}\n\n\t.zent-demo-elevator-basic__block__content {\n\t\theight: 180px;\n\t}"}),o.createElement(j,{html:'<h2 class="anchor-heading"><a href="#elevator">¶</a><a href="javascript:void(0)" id="elevator" class="anchor-point"></a>Elevator</h2>\n<p>页面内容导航工具，根据页面目录快速定位到页面指定位置，提升信息阅读及操作效率。</p>\n<h3 class="anchor-heading"><a href="#dai-ma-yan-shi">¶</a><a href="javascript:void(0)" id="dai-ma-yan-shi" class="anchor-point"></a>代码演示</h3>'}),o.createElement(x,{title:"基本用法",id:"Demobasic",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Elevator</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LayoutRow</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LayoutCol</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useRef <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token constant">LINKS</span> <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录一\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录一页面目录一页面目录一\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录二\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录二\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录三\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录三\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录四\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录四\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Demo</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> ref <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token keyword">const</span> <span class="token function-variable function">renderBlock</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-demo-elevator-basic__block<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n      <span class="token punctuation">{</span><span class="token constant">LINKS</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token parameter">link</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>link<span class="token punctuation">.</span><span class="token property-access">link</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Elevator.Anchor</span></span> <span class="token attr-name">link</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>link<span class="token punctuation">.</span><span class="token property-access">link</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>link<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Elevator.Anchor</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-demo-elevator-basic__block__content<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n      <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-demo-elevator-basic<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Elevator</span></span> <span class="token attr-name">getContainer</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> ref<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LayoutRow</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LayoutCol</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">14</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">renderBlock</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">LayoutCol</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LayoutCol</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span> <span class="token attr-name">offset</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">14</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Elevator.Links</span></span> <span class="token attr-name">offsetTop</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">24</span><span class="token punctuation">}</span></span> <span class="token attr-name">offsetBottom</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">24</span><span class="token punctuation">}</span></span> <span class="token attr-name">links</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">LINKS</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">LayoutCol</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">LayoutRow</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Elevator</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},o.createElement(g)),o.createElement(x,{title:"设置偏移量，锚点距离窗口顶部达到指定偏移量后触发切换，默认值为容器高度的一半",id:"Democustomoffset",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Elevator</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LayoutRow</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LayoutCol</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useRef <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token constant">LINKS</span> <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录一\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录一\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录二\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录二\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录三\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录三\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录四\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录四\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Demo</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> ref <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token keyword">const</span> <span class="token function-variable function">renderBlock</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-demo-elevator-basic__block<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n      <span class="token punctuation">{</span><span class="token constant">LINKS</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token parameter">link</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>link<span class="token punctuation">.</span><span class="token property-access">link</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Elevator.Anchor</span></span> <span class="token attr-name">link</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>link<span class="token punctuation">.</span><span class="token property-access">link</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>link<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Elevator.Anchor</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-demo-elevator-basic__block__content<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n      <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-demo-elevator-basic<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Elevator</span></span> <span class="token attr-name">getContainer</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> ref<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">}</span></span> <span class="token attr-name">offsetTop</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">50</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LayoutRow</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LayoutCol</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">14</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">renderBlock</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">LayoutCol</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LayoutCol</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span> <span class="token attr-name">offset</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">14</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Elevator.Links</span></span>\n              <span class="token attr-name">offsetTop</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">24</span><span class="token punctuation">}</span></span>\n              <span class="token attr-name">links</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">LINKS</span><span class="token punctuation">}</span></span>\n              <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">float</span><span class="token operator">:</span> <span class="token string">\'right\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n            <span class="token punctuation">/></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">LayoutCol</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">LayoutRow</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Elevator</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},o.createElement(m)),o.createElement(x,{title:"设置锚点滚动偏移量",id:"DemocustomtargetOffset",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Elevator</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LayoutRow</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LayoutCol</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useRef<span class="token punctuation">,</span> useState<span class="token punctuation">,</span> useEffect <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token constant">LINKS</span> <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录一\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录一\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录二\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录二\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录三\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录三\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录四\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录四\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Demo</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> ref <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token keyword">const</span> <span class="token punctuation">[</span>targetOffset<span class="token punctuation">,</span> setTargetOffset<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token keyword nil">undefined</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>ref<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token keyword">const</span> offset <span class="token operator">=</span> ref<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">.</span><span class="token method function property-access">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">height</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">;</span>\n      <span class="token function">setTargetOffset</span><span class="token punctuation">(</span>offset<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>ref<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token keyword">const</span> <span class="token function-variable function">renderBlock</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-demo-elevator-basic__block<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n      <span class="token punctuation">{</span><span class="token constant">LINKS</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token parameter">link</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>link<span class="token punctuation">.</span><span class="token property-access">link</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Elevator.Anchor</span></span> <span class="token attr-name">link</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>link<span class="token punctuation">.</span><span class="token property-access">link</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>link<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Elevator.Anchor</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-demo-elevator-basic__block__content<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n      <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-demo-elevator-basic<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Elevator</span></span> <span class="token attr-name">getContainer</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> ref<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">}</span></span> <span class="token attr-name">targetOffset</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>targetOffset<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LayoutRow</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LayoutCol</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">14</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">renderBlock</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">LayoutCol</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LayoutCol</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span> <span class="token attr-name">offset</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">14</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Elevator.Links</span></span>\n              <span class="token attr-name">offsetTop</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">24</span><span class="token punctuation">}</span></span>\n              <span class="token attr-name">links</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">LINKS</span><span class="token punctuation">}</span></span>\n              <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">float</span><span class="token operator">:</span> <span class="token string">\'right\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n            <span class="token punctuation">/></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">LayoutCol</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">LayoutRow</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Elevator</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},o.createElement(f)),o.createElement(x,{title:"不指定 container，默认 container 为 window",id:"Democontainerwindow",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Elevator</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LayoutRow</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LayoutCol</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useRef <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token constant">LINKS</span> <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录一\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录一\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录二\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录二\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录三\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录三\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录四\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录四\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Demo</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> <span class="token function-variable function">renderBlock</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\n      <span class="token punctuation">{</span><span class="token constant">LINKS</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token parameter">link</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>link<span class="token punctuation">.</span><span class="token property-access">link</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Elevator.Anchor</span></span> <span class="token attr-name">link</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>link<span class="token punctuation">.</span><span class="token property-access">link</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>link<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Elevator.Anchor</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-demo-elevator-basic__block__content<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n      <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-demo-elevator-container-window<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Elevator</span></span> <span class="token attr-name">offsetTop</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LayoutRow</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LayoutCol</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">14</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">renderBlock</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">LayoutCol</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LayoutCol</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span> <span class="token attr-name">offset</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">14</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Elevator.Links</span></span>\n              <span class="token attr-name">offsetTop</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">24</span><span class="token punctuation">}</span></span>\n              <span class="token attr-name">offsetBottom</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">24</span><span class="token punctuation">}</span></span>\n              <span class="token attr-name">links</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">LINKS</span><span class="token punctuation">}</span></span>\n              <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">float</span><span class="token operator">:</span> <span class="token string">\'right\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n            <span class="token punctuation">/></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">LayoutCol</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">LayoutRow</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Elevator</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},o.createElement(v)),o.createElement(x,{title:"受控的电梯",id:"Democontrolled",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Elevator</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LayoutRow</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LayoutCol</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useRef<span class="token punctuation">,</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token constant">LINKS</span> <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录一\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录一\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录二\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录二\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录三\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录三\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">\'页面目录四\'</span><span class="token punctuation">,</span>\n    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'页面目录四\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Demo</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> ref <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token keyword">const</span> <span class="token punctuation">[</span>activeLink<span class="token punctuation">,</span> setActiveLink<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">\'页面目录一\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token keyword">const</span> <span class="token function-variable function">renderBlock</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-demo-elevator-basic__block<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n      <span class="token punctuation">{</span><span class="token constant">LINKS</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token parameter">link</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>link<span class="token punctuation">.</span><span class="token property-access">link</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Elevator.Anchor</span></span> <span class="token attr-name">link</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>link<span class="token punctuation">.</span><span class="token property-access">link</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>link<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Elevator.Anchor</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-demo-elevator-basic__block__content<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n      <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-demo-elevator-basic<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Elevator</span></span>\n        <span class="token attr-name">getContainer</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> ref<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">activeLink</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>activeLink<span class="token punctuation">}</span></span>\n        <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">link<span class="token punctuation">,</span> pre</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setActiveLink</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">targetOffset</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">40</span><span class="token punctuation">}</span></span>\n      <span class="token punctuation">></span></span>\n        <span class="token punctuation">{</span><span class="token constant">LINKS</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token parameter">link</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setActiveLink</span><span class="token punctuation">(</span>link<span class="token punctuation">.</span><span class="token property-access">link</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>link<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n        <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LayoutRow</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LayoutCol</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">14</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">renderBlock</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">LayoutCol</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LayoutCol</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span> <span class="token attr-name">offset</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">14</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Elevator.Links</span></span> <span class="token attr-name">offsetTop</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">24</span><span class="token punctuation">}</span></span> <span class="token attr-name">offsetBottom</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">24</span><span class="token punctuation">}</span></span> <span class="token attr-name">links</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">LINKS</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">LayoutCol</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">LayoutRow</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Elevator</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},o.createElement(y)),o.createElement(j,{html:'<h3 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h3>\n<h4 class="anchor-heading"><a href="#elevator">¶</a><a href="javascript:void(0)" id="elevator" class="anchor-point"></a>Elevator</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>是否必须</th>\n<th>默认值</th>\n<th>备选值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>getContainer</td>\n<td>指定滚动及的容器</td>\n<td><code>() => HTMLElement</code></td>\n<td>否</td>\n<td><code>() => window</code></td>\n<td></td>\n</tr>\n<tr>\n<td>defaultActiveLink</td>\n<td>默认高亮的锚点</td>\n<td><code>string</code></td>\n<td>否</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>activeLink</td>\n<td>当前高亮的锚点</td>\n<td><code>string</code></td>\n<td>否</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>offsetTop</td>\n<td>距离窗口顶部达到指定偏移量后触发</td>\n<td><code>number</code></td>\n<td>否</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>targetOffset</td>\n<td>锚点滚动偏移量</td>\n<td><code>number</code></td>\n<td>否</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>监听锚点链接改变</td>\n<td><code>(currentLink: string, previousLink: string) => void</code></td>\n<td>否</td>\n<td></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#elevator-links">¶</a><a href="javascript:void(0)" id="elevator-links" class="anchor-point"></a>Elevator.Links</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>是否必须</th>\n<th>默认值</th>\n<th>备选值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>links</td>\n<td>电梯目录栏</td>\n<td><code>{ link: string, title: ReactNode }[]</code></td>\n<td>是</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>额外类名</td>\n<td><code>string</code></td>\n<td>否</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>style</td>\n<td>样式对象</td>\n<td><code>React.CSSProperties</code></td>\n<td>否</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>点击锚点目录回调函数</td>\n<td><code>(event: MouseEvent, currentLink: string) => void</code></td>\n<td>否</td>\n<td></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<p>更多属性参考<a href="https://youzan.github.io/zent/zh/component/affix">Affix</a></p>\n<h4 class="anchor-heading"><a href="#elevator-anchor">¶</a><a href="javascript:void(0)" id="elevator-anchor" class="anchor-point"></a>Elevator.Anchor</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>是否必须</th>\n<th>默认值</th>\n<th>备选值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>link</td>\n<td>电梯锚点</td>\n<td><code>string</code></td>\n<td>是</td>\n<td></td>\n<td></td>\n</tr>\n</tbody>\n</table>'}))}}},5905:(n,s,a)=>{"use strict";a.d(s,{q:()=>m});var t=a(59312),p=a(24246),o=a(27378),e=a(31256),c=a(57318),l=(0,o.createContext)({}),u=a(86446),i=a(60042),k=a.n(i),r=a(31846),d=a(25120),g=function(){return window},m=function(n){var s=n.children,a=n.onChange,u=n.targetOffset,i=n.getContainer,k=n.defaultActiveLink,r=n.offsetTop,d=n.activeLink,m=null==i?void 0:i(),f=(0,o.useState)(new Map),v=f[0],y=f[1],h=(0,o.useState)(""),j=h[0],b=h[1],w=(0,o.useMemo)((function(){return(0,e.Z)(d)?j:d}),[d,j]),x=(0,o.useRef)(!1),_=(0,o.useMemo)((function(){var n=g().innerHeight;m&&(n=m.getBoundingClientRect().height);var s=n/2;return(0,e.Z)(r)?s:n-(r||1)}),[r,m]),L=(0,o.useCallback)((function(n,s){y((function(a){var t=new Map(a);return t.set(n,s),t}))}),[]),C=(0,o.useCallback)((function(n){y((function(s){var a=new Map(s);return a.delete(n),a}))}),[]),z=function(n,s){void 0===s&&(s=!1);var t=v.get(n);if(t){var p=t.getBoundingClientRect(),o=g(),e=0,l=o.scrollY,i=o.scrollX;m&&(e=(o=m).getBoundingClientRect().top,l=o.scrollTop,i=o.scrollLeft);var k=p.top-e+l-(u||0);x.current=!0,(0,c.l)(o,i,k,200).then((function(){x.current=!1,!s&&(null==a||a(n,w))}))}};return(0,o.useEffect)((function(){(0,e.Z)(d)||d===j||z(d,!0),(0,e.Z)(d)&&k&&z(k)}),[d,v,k]),(0,p.jsx)(l.Provider,(0,t.pi)({value:{activeLink:w,offsetTop:_,getContainer:i,onLinkClick:function(n){(0,e.Z)(d)?z(n):n!==w&&(null==a||a(n,w))},onAnchorEnter:function(n){b(n),x.current||n===w||null==a||a(n,w)},registerAnchor:L,unRegisterAnchor:C}},{children:s}),void 0)};m.Links=function(n){var s=n.style,a=n.links,e=n.className,c=n.offsetTop,u=n.offsetBottom,i=n.onClick,g=(0,t._T)(n,["style","links","className","offsetTop","offsetBottom","onClick"]),m=(0,o.useContext)(l),f=m.activeLink,v=m.getContainer,y=m.onLinkClick,h=(0,o.useRef)(null);return(0,o.useEffect)((function(){var n=a.map((function(n){return n.link}));Array.from(new Set(n)).length!==n.length&&console.warn("Warning: In the links property of Elevator, the link value must be unique.")}),[a]),(0,p.jsxs)(r.D,(0,t.pi)({offsetTop:c,offsetBottom:u,getAffixContainer:v,ref:h},g,{children:[(0,p.jsx)("div",(0,t.pi)({className:k()("zent-elevator__links-wrapper",e),style:s,"data-zv":"10.0.10"},{children:(0,p.jsx)("div",(0,t.pi)({className:"zent-elevator__links-content","data-zv":"10.0.10"},{children:a.map((function(n){return(0,p.jsx)("div",(0,t.pi)({onClick:function(s){return function(n,s){y(s),null==i||i(n,s)}(s,n.link)},className:k()("zent-elevator__link",{"zent-elevator__link--active":f===n.link}),"data-zv":"10.0.10"},{children:n.title}),n.link)}))}),void 0)}),void 0),v&&(0,p.jsx)(d.f,{onScroll:function(){var n;null===(n=null==h?void 0:h.current)||void 0===n||n.updatePosition()}},void 0)]}),void 0)},m.Anchor=function(n){var s=n.link,a=n.children,e=(0,o.useContext)(l),c=e.offsetTop,i=e.getContainer,k=e.onAnchorEnter,r=e.registerAnchor,d=e.unRegisterAnchor,g=(0,o.useRef)(null);return(0,o.useEffect)((function(){return r(s,g.current),function(){d(s)}}),[s,r,d]),(0,p.jsx)(u.h,(0,t.pi)({bottomOffset:c,onEnter:function(){k(s)},scrollableAncestor:(null==i?void 0:i())||window},{children:(0,p.jsx)("div",(0,t.pi)({className:"zent-elevator-anchor",ref:g,"data-zv":"10.0.10"},{children:a}),void 0)}),void 0)}},48591:(n,s,a)=>{"use strict";var t=(0,a(27378).createContext)({});s.Z=t},74473:(n,s,a)=>{"use strict";a.d(s,{r:()=>k});var t=a(59312),p=a(24246),o=a(27378),e=a(60042),c=a.n(e),l=a(65225),u=a(48591),i=a(81093),k=function(n){function s(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(s,n),s.prototype.render=function(){var n=this;return(0,p.jsx)(u.Z.Consumer,{children:function(s){return(0,p.jsx)(l.Z.Consumer,{children:function(a){var o,e=n.props,l=e.span,u=e.offset,k=e.order,r=e.className,d=e.style,g=(0,t._T)(e,["span","offset","order","className","style"]),m=d,f=(0,i.r)(s,a.colGutter);if(f>0){var v=f/2;m=(0,t.pi)((0,t.pi)({},m),{paddingLeft:v,paddingRight:v})}var y=(0,i.r)(s,l),h=(0,i.r)(s,u),j=(0,i.r)(s,k),b=c()("zent-col",((o={})["zent-col-offset-"+u]=h,o["zent-col-order-"+k]=j,o),"zent-col-"+y,r);return(0,p.jsx)("div",(0,t.pi)({},g,{className:b,style:m,"data-zv":"10.0.10"},{children:n.props.children}),void 0)}},void 0)}},void 0)},s.defaultProps={offset:0,order:0},s}(o.Component)},65225:(n,s,a)=>{"use strict";a.d(s,{x:()=>t});var t=(0,a(27378).createContext)({rowGutter:0,colGutter:0});s.Z=t},39550:(n,s,a)=>{"use strict";a.d(s,{W:()=>k});var t=a(59312),p=a(24246),o=a(27378),e=a(60042),c=a.n(e),l=a(65225),u=a(48591),i=a(81093),k=function(n){function s(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(s,n),s.prototype.render=function(){var n=this,s=this.props,a=s.className,o=s.style,e=s.justify,k=s.align,r=(0,t._T)(s,["className","style","justify","align"]),d=c()({"zent-row":!0},"zent-row-justify-"+e,"zent-row-align-"+k,a);return(0,p.jsx)(u.Z.Consumer,{children:function(s){return(0,p.jsx)(l.Z.Consumer,{children:function(a){var e=(0,i.r)(s,a.colGutter),c=(0,i.r)(s,a.rowGutter),l=o;if(e>0){var u=-e/2;l=(0,t.pi)((0,t.pi)({},l),{marginLeft:u,marginRight:u})}if(c&&c>0){var k=c/2;l=(0,t.pi)((0,t.pi)({},l),{paddingTop:k,paddingBottom:k})}return(0,p.jsx)("div",(0,t.pi)({},r,{className:d,style:l,"data-zv":"10.0.10"},{children:n.props.children}),void 0)}},void 0)}},void 0)},s.defaultProps={justify:"start",align:"start"},s}(o.Component)},81093:(n,s,a)=>{"use strict";var t;a.d(s,{j:()=>e,r:()=>c}),function(n){n.fhd="(min-width: 1920px)",n.xxl="(min-width: 1600px)",n.xl="(min-width: 1200px)",n.lg="(min-width: 992px)",n.md="(min-width: 768px)",n.sm="(min-width: 576px)",n.xs="(max-width: 575px)"}(t||(t={}));var p=a(72551),o=Object.keys(t).reduce((function(n,s){return n[t[s]]=s,n}),{}),e=Object.keys(o);function c(n,s){if("number"==typeof s)return s;for(var a=0;a<e.length;a++){var t=e[a],c=o[t];if(n[t]){var l=s[c];if(void 0!==l)return l}}return(0,p.n)(s,"fallback")?s.fallback:0}},25120:(n,s,a)=>{"use strict";a.d(s,{f:()=>u});var t=a(59312),p=a(24246),o=a(27378),e=a(80186),c=a(17127),l={passive:!0},u=function(n){var s=n.disableThrottle,a=void 0!==s&&s,u=n.options,i=n.onScroll,k=(0,o.useRef)(i);k.current=i;var r=(0,o.useCallback)((function(n){k.current(n)}),[]),d=(0,c.BN)(r,a);return(0,o.useEffect)((function(){return d.cancel}),[d]),(0,p.jsx)(e.ZM,{eventName:"scroll",listener:d,options:(0,t.pi)((0,t.pi)({},l),u)},void 0)}},31256:(n,s,a)=>{"use strict";function t(n){return null==n}a.d(s,{Z:()=>t})}}]);