(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{629:function(n,a,s){"use strict";s.r(a),s.d(a,"default",function(){return B});var t=s(580),p=s.n(t),o=s(23),e=s.n(o),c=s(24),l=s.n(c),u=s(25),r=s.n(u),i=s(26),k=s.n(i),d=s(32),h=s.n(d),g=s(27),m=s.n(g),f=s(28),v=s.n(f),y=s(0),w=s.n(y),C=s(111),E=s(82),F=function(){var n=function(n){function a(){var n,s;e()(this,a);for(var t=arguments.length,p=new Array(t),o=0;oColorPicker 颜色选择器\n

用于颜色选择，支持多种格式。

\n

代码演示

'}),w.a.createElement(_,{title:"基础用法",id:"Demobasic",src:'import { ColorPicker } from \'zent\';\n\nclass Simple extends React.Component {\n state = {\n color: \'#5197FF\'\n }\n\n handleChange = (color) => {\n this.setState({\n color\n });\n }\n\n render() {\n const { color } = this.state;\n return (\n <div>\n <ColorPicker color={color} onChange={this.handleChange} />\n <div style={{ color, marginTop: 5 }}>当前颜色：{color}</div>\n </div>\n )\n }\n}\n\nReactDOM.render(\n <Simple />\n , mountNode\n);'},w.a.createElement(F)),w.a.createElement(_,{title:"选择透明度",id:"Demoopacity",src:'import { ColorPicker } from \'zent\';\n\nclass Simple extends React.Component {\n state = {\n color: \'rgba(81, 151, 255, 0.6)\',\n showAlpha: true\n }\n\n handleChange = (color) => {\n this.setState({\n color\n });\n }\n\n render() {\n const { color, showAlpha } = this.state;\n return (\n <div>\n <ColorPicker color={color} showAlpha={showAlpha} onChange={this.handleChange} />\n <div style={{ color, marginTop: 5 }}>当前颜色：{color}</div>\n </div>\n )\n }\n}\n\nReactDOM.render(\n <Simple />\n , mountNode\n);'},w.a.createElement(b)),w.a.createElement(_,{title:"简化版用法",id:"Demosimple",src:'import { ColorPicker } from \'zent\';\n\nclass Simple extends React.Component {\n state = {\n color: \'#FF4444\'\n }\n\n handleChange = (color) => {\n this.setState({\n color\n });\n }\n\n render() {\n const { color } = this.state;\n return (\n <div>\n <ColorPicker color={color} type="simple" onChange={this.handleChange} />\n <div style={{ color, marginTop: 5 }}>当前颜色：{color}</div>\n </div>\n )\n }\n}\n\nReactDOM.render(\n <Simple />\n , mountNode\n);'},w.a.createElement(A)),w.a.createElement(_,{title:"颜色面板",id:"Democolorboard",src:'import { ColorPicker } from \'zent\';\nconst ColorBoard = ColorPicker.ColorBoard;\n\nclass Simple extends React.Component {\n state = {\n color: \'#5197FF\'\n }\n\n handleChange = (color) => {\n this.setState({\n color: color.hex\n });\n }\n\n render() {\n const { color, showAlpha } = this.state;\n return (\n <div>\n <ColorBoard color={color} onChange={this.handleChange} />\n <div style={{ color, marginTop: 10 }}>{}{color}</div>\n </div>\n )\n }\n}\n\nReactDOM.render(\n <Simple />\n , mountNode\n);'},w.a.createElement(S)),w.a.createElement(_,{title:"带选择透明的面板",id:"Demoopacityboard",src:'import { ColorPicker } from \'zent\';\nconst ColorBoard = ColorPicker.ColorBoard;\n\nclass Simple extends React.Component {\n state = {\n color: \'rgba(81, 151, 255, 0.6)\',\n showAlpha: true\n }\n\n handleChange = (color) => {\n this.setState({\n color: color.rgba\n });\n }\n\n render() {\n const { color, showAlpha } = this.state;\n return (\n <div>\n <ColorBoard color={color} showAlpha={showAlpha} onChange={this.handleChange} />\n <div style={{ color, marginTop: 10 }}>当前颜色：{color}</div>\n </div>\n )\n }\n}\n\nReactDOM.render(\n <Simple />\n , mountNode\n);'},w.a.createElement(z)),w.a.createElement(N,{html:"

API

\n

ColorPicker

\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
参数说明类型默认值可选值
color颜色选择器的颜色string'#5197FF'\n 或 \n'rgba(81, 151, 255, 0.6)'
showAlpha是否显示透明度选择boolfalsetrue/false
type颜色选择器类型string'default''default'\n、\n'simple'
presetColors简化版自定义颜色数组array[\n'#FFFFFF'\n, \n'#F8F8F8'\n, \n'#F2F2F2'\n, \n'#999999'\n, \n'#444444'\n, \n'#FF4444'\n, \n'#FF6500'\n, \n'#FF884D'\n, \n'#FFCD00'\n, \n'#3FBD00'\n, \n'#3FBC87'\n, \n'#00CD98'\n, \n'#5197FF'\n, \n'#BADCFF'\n, \n'#FFEFB8'\n]
onChange颜色变化时回调函数func(color)noop
className可选，自定义类名string''
wrapperClassName可选，自定义trigger包裹节点的类名string''
prefix可选，自定义前缀string'zent'
\n

ColorBoard

\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
参数说明类型默认值可选值
color颜色选择器的颜色string'#5197FF'\n 或 \n'rgba(81, 151, 255, 0.6)'
showAlpha是否显示透明度选择boolfalsetrue/false
onChange颜色变化时回调函数func(color)noop
className可选，自定义类名string''
prefix可选，自定义前缀string'zent'
"}))}}]),a}(y.Component)}}]);