(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{721:function(n,a,s){"use strict";s.r(a),s.d(a,"default",function(){return N});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),h=s.n(g),f=s(28),v=s.n(f),b=s(0),y=s.n(b),z=s(111),w=s(82),C=function(){return y.a.createElement("div",{style:{width:400,color:"#666",fontSize:14}},y.a.createElement(w.n,{lines:3,popWidth:400,text:"Zent ( ˈzent ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。"}))},E=function(){return y.a.createElement("div",{style:{width:400,color:"#666",fontSize:14}},y.a.createElement(w.n,{lines:3,popWidth:400,showPop:!1,text:"Zent ( ˈzent ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。"}))},P=function(){return y.a.createElement("div",{style:{width:400,color:"#666",fontSize:14}},y.a.createElement(w.n,{lines:1,popWidth:400,text:"Zent ( ˈzent ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。"}))},R=function(){return y.a.createElement("div",{style:{width:"50%",color:"#666",fontSize:14}},y.a.createElement(w.n,{lines:2,resizable:!0,popWidth:400,text:"Zent ( ˈzent ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。"}))},x=function(){return y.a.createElement("div",{style:{width:"50%",color:"#666",fontSize:14}},y.a.createElement(w.n,{lines:2,resizable:!0,popWidth:400,extra:y.a.createElement("a",null,"更多"),text:"Zent ( ˈzent ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。"}))},I=function(){var n=function(n){function a(n){var s;return o()(this,a),s=i()(this,r()(a).call(this,n)),v()(m()(s),"handleToggle",function(){s.setState({toggle:!s.state.toggle})}),s.state={toggle:!1},s}return h()(a,n),l()(a,[{key:"render",value:function(){var n=this.state.toggle?"Zent ( ˈzent ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。":"有赞，是一个商家服务公司。我们帮助每一位重视产品和服务的商家私有化顾客资产、拓展互联网客群、提高经营效率，全面助力商家成功。我们致力于成为商家服务领域里最被信任的引领者；并持续作一个Enjoy的组织。";return y.a.createElement("div",null,y.a.createElement("div",{style:{width:"50%",color:"#666",fontSize:14}},y.a.createElement(w.n,{lines:2,resizable:!0,popWidth:400,extra:y.a.createElement("a",null,"更多"),text:n})),y.a.createElement(w.i,{onClick:this.handleToggle},"切换文案"))}}]),a}(y.a.Component);return y.a.createElement(n,null)};function W(n){return y.a.createElement(n.tag,p()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function U(n){return y.a.createElement(W,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function j(n){return y.a.createElement(W,{tag:"style",html:n.style})}var S=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,p=new Array(t),e=0;eClampLines\n

Demos

'}),y.a.createElement(S,{title:"Basic Usage",id:"Demomultilines",src:'import { ClampLines } from \'zent\';\n\nReactDOM.render(\n <div style={{ width: 400, color: \'#666\', fontSize: 14 }}>\n <ClampLines\n lines={3}\n popWidth={400}\n text="Zent ( \\ˈzent\\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。"\n />\n </div>\n , mountNode\n);'},y.a.createElement(C)),y.a.createElement(S,{title:"Hide Pop",id:"Demohidepop",src:'import { ClampLines } from \'zent\';\n\nReactDOM.render(\n <div style={{ width: 400, color: \'#666\', fontSize: 14 }}>\n <ClampLines\n lines={3}\n popWidth={400}\n showPop={false}\n text="Zent ( \\ˈzent\\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。"\n />\n </div>\n , mountNode\n);'},y.a.createElement(E)),y.a.createElement(S,{title:"Single Line",id:"Demosingleline",src:'import { ClampLines } from \'zent\';\n\nReactDOM.render(\n <div style={{ width: 400, color: \'#666\', fontSize: 14 }}>\n <ClampLines\n lines={1}\n popWidth={400}\n text="Zent ( \\ˈzent\\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。"\n />\n </div>\n , mountNode\n);'},y.a.createElement(P)),y.a.createElement(S,{title:"Resizable",id:"Demoresizable",src:'import { ClampLines } from \'zent\';\n\nReactDOM.render(\n <div style={{ width: "50%", color: \'#666\', fontSize: 14 }}>\n <ClampLines\n lines={2}\n resizable\n popWidth={400}\n text="Zent ( \\ˈzent\\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。"\n />\n </div>\n , mountNode\n);'},y.a.createElement(R)),y.a.createElement(S,{title:"Extra Node",id:"Demoextra",src:'import { ClampLines } from \'zent\';\n\nReactDOM.render(\n <div style={{ width: "50%", color: \'#666\', fontSize: 14 }}>\n <ClampLines\n lines={2}\n resizable\n popWidth={400}\n extra={(\n <a>更多</a>\n )}\n text="Zent ( \\ˈzent\\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。"\n />\n </div>\n , mountNode\n);'},y.a.createElement(x)),y.a.createElement(S,{title:"Parent node update the text",id:"Demoupdatetext",src:'import { ClampLines, Button } from \'zent\';\n\nconst descriptionA = \'Zent ( \\ˈzent\\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。我们的目标是让 React 项目开发更快、更简单。\';\n\nconst descriptionB = \'有赞，是一个商家服务公司。我们帮助每一位重视产品和服务的商家私有化顾客资产、拓展互联网客群、提高经营效率，全面助力商家成功。我们致力于成为商家服务领域里最被信任的引领者；并持续作一个Enjoy的组织。\';\n\nclass Wrapper extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n toggle: false\n };\n }\n\n handleToggle = () => {\n this.setState({\n toggle: !this.state.toggle\n });\n }\n\n render() {\n const text = this.state.toggle ? descriptionA : descriptionB;\n return (\n <div>\n <div style={{ width: "50%", color: \'#666\', fontSize: 14 }}>\n <ClampLines\n lines={2}\n resizable\n popWidth={400}\n extra={(\n <a>更多</a>\n )}\n text={text}\n />\n </div>\n <Button onClick={this.handleToggle}>切换文案</Button>\n </div>\n )\n }\n}\n\nReactDOM.render(\n <Wrapper />\n , mountNode\n);'},y.a.createElement(I)),y.a.createElement(U,{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\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
PropsDescriptionTypeDefaultAlternative
textOriginal textstring''
linesMax lines need to clampnumber2
ellipsisEllipsis stylestring'...'
showPopShow Pop or notbooleantrue
popWidthThe width of popnumber250
triggerThe time to trigger popstring'hover''click'\n, \n'focus'
renderPopcustomize your pop textfunctionidentity
resizableIf the container is resizablebooleanfalse
delayresize debouncenumber250
extraCustom extra node，such as \nMoreReactElementnull
classNameCustom calssnamestring''
prefixCustom prefixstringzent
"}))}}]),a}(b.Component)}}]);