(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{615:function(n,a,s){"use strict";s.r(a),s.d(a,"default",function(){return B});var t=s(580),p=s.n(t),e=s(23),o=s.n(e),c=s(24),l=s.n(c),u=s(25),i=s.n(u),k=s(26),r=s.n(k),d=s(32),m=s.n(d),g=s(27),f=s.n(g),h=s(28),y=s.n(h),v=s(0),w=s.n(v),E=s(111),b=s(82),x=function(){return w.a.createElement(b.V,{style:{margin:"10px 0"}},w.a.createElement(b.S,{span:8},w.a.createElement(b.i,{type:"primary",size:"large"},"首页")),w.a.createElement(b.S,{span:8,offset:8},w.a.createElement(b.a,{offsetTop:135},w.a.createElement(b.i,{type:"primary",size:"large"},"固钉"))))},z=function(){var n=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,p=new Array(t),e=0;eAffix 固钉\n

将元素固定在特定区域,一般用于导航栏固钉。

\n

代码演示

'}),w.a.createElement(j,{title:"通过 offsetTop 设置到顶部距离",id:"Demooffsettop",src:'import { Affix, LayoutRow as Row, LayoutCol as Col, Button } from \'zent\';\n\nReactDOM.render(\n <Row style={{ margin: \'10px 0\' }}>\n <Col span={8}>\n <Button type="primary" size="large">\n 首页\n </Button>\n </Col>\n <Col span={8} offset={8}>\n <Affix offsetTop={135}>\n <Button type="primary" size="large">\n 固钉\n </Button>\n </Affix>\n </Col>\n </Row>,\n mountNode\n);'},w.a.createElement(x)),w.a.createElement(j,{title:"设置回调函数",id:"Democallback",src:'import { Affix, Alert } from \'zent\';\n\nclass App extends React.Component {\n\n state = {\n text: \'固钉\'\n }\n\n onPin = () => {\n this.setState({ text: \'已经固定啦\' });\n }\n onUnpin = () => {\n this.setState({ text: \'取消固定啦\' });\n }\n\n render() {\n return (\n <Affix offsetTop={200} onPin={this.onPin} onUnpin={this.onUnpin}>\n <Alert type="warning">{this.state.text}</Alert>\n </Affix>\n )\n }\n}\n\nReactDOM.render(\n <App />\n , mountNode\n);'},w.a.createElement(z)),w.a.createElement(j,{title:"设置距离底部值:`offsetBottom`",id:"Demooffsetbottom",src:'import { Affix, Alert } from \'zent\';\n\nReactDOM.render(\n <div className="demo-bottom">\n <Affix offsetBottom={60}>\n <Alert type="warning"><p>设置距离底部值</p></Alert>\n </Affix>\n </div>\n , mountNode\n);'},w.a.createElement(A)),w.a.createElement(N,{html:'

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值备选值
offsetTop距离窗口顶部指定偏移量后触发number0\'\'
offsetBottom距离窗口底部指定偏移量后触发numbernullnull
onPin触发固定后执行的回调函数functionnullnull
onUnpin固定消失后执行的回调函数functionnullnull
zIndex固钉的z-indexnumber10null
className自定义额外类名string\'\'
placeHoldClassName占位容器的类名string\'\'
prefix自定义前缀string\'zent\'
\n

如果 offsetTopoffsetBottom 同时设置,优先使用 offsetBottom

'}))}}]),a}(v.Component)}}]);