{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/input/colorpicker","result":{"data":{"current":{"frontmatter":{"title":"ColorPicker 颜色选择器","order":38,"brief":"快速便捷地选择颜色，并提供滴管工具取色","icon":"doc-colorPlatteNew"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法","items":[{"url":"#放在弹层","title":"放在弹层"},{"url":"#正常展示","title":"正常展示"}]},{"url":"#滴管取色器","title":"滴管取色器"},{"url":"#默认值","title":"默认值"},{"url":"#受控","title":"受控"},{"url":"#顶部和底部渲染额外元素","title":"顶部和底部渲染额外元素"},{"url":"#api-参考","title":"API 参考"}]}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 38,\n  \"category\": \"输入类\",\n  \"title\": \"ColorPicker 颜色选择器\",\n  \"icon\": \"doc-colorPlatteNew\",\n  \"brief\": \"快速便捷地选择颜色，并提供滴管工具取色\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar Notice = makeShortcode(\"Notice\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"ColorPicker \\u4ECE v2.64.0 \\u5F00\\u59CB\\u652F\\u6301\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { ColorPicker } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u653E\\u5728\\u5F39\\u5C42\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { ColorPicker, Button } from '@douyinfe/semi-ui';\\nfunction Demo() {\\n    return <div>\\n        <ColorPicker alpha={true} onChange={value=>{console.log(value);}} usePopover={true}/>\\n        <br/>\\n        <div>\\u81EA\\u5B9A\\u4E49 trigger</div>\\n        <ColorPicker alpha={true} onChange={value=>{console.log(value);}} usePopover={true}>\\n            <Button> Trigger </Button>\\n        </ColorPicker>\\n    </div>;\\n}\\n\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u6B63\\u5E38\\u5C55\\u793A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { ColorPicker } from '@douyinfe/semi-ui';\\nfunction Demo() {\\n    return <ColorPicker alpha={true} onChange={value=>{console.log(value);}}/>;\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6EF4\\u7BA1\\u53D6\\u8272\\u5668\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"eyeDropper={true}\"), \" \\u5F00\\u542F\\u6EF4\\u7BA1\\u529F\\u80FD\\uFF0C\\u652F\\u6301\\u4ECE\\u6D4F\\u89C8\\u5668\\u5185\\u6216\\u5916\\u90E8\\u8F6F\\u4EF6\\u5C4F\\u5E55\\u53D6\\u8272\\u3002\"), mdx(Notice, {\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, \"\\u5F00\\u542F\\u6B64\\u529F\\u80FD\\u9700\\u8981\\u5F53\\u524D\\u7F51\\u9875\\u90E8\\u7F72\\u5728 HTTPS \\u6216 localhost \\u57DF\\u540D\\u7B49\\u5B89\\u5168 context \\u4E0B\\uFF0C\\u5426\\u5219\\u65E0\\u6548\\u679C\\u3002\\u9700\\u7528\\u6237\\u6D4F\\u89C8\\u5668\\u7248\\u672C Chromium > 95\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { ColorPicker } from '@douyinfe/semi-ui';\\nfunction Demo() {\\n    return <ColorPicker alpha={true} eyeDropper={true} onChange={value=>{console.log(value);}}/>;\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728\\u8FDB\\u884C\\u5404\\u79CD\\u989C\\u8272\\u8868\\u793A\\u683C\\u5F0F\\u4E4B\\u95F4\\u76F8\\u4E92\\u8F6C\\u6362\\u65F6\\uFF0C\\u90E8\\u5206\\u683C\\u5F0F\\u4E4B\\u95F4\\u5B58\\u5728\\u7406\\u8BBA\\u8BEF\\u5DEE\\uFF0C\\u56E0\\u6B64 onChange \\u8FD4\\u56DE\\u7ED9\\u4F60\\u7684\\u503C\\u662F\\u540C\\u65F6\\u5305\\u542B\\u4E86 hsva hex rgba \\u4E09\\u79CD\\u683C\\u5F0F\\u7684\\u8272\\u503C\\u7684\\u5BF9\\u8C61\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u4F20\\u5165\\u7684 defaultValue(\\u975E\\u53D7\\u63A7) \\u548C value(\\u53D7\\u63A7) \\u4E5F\\u5E94\\u5F53\\u662F\\u540C\\u6837\\u5305\\u542B\\u4E09\\u79CD\\u683C\\u5F0F\\u7684\\u5BF9\\u8C61\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6211\\u4EEC\\u5728\\u7EC4\\u4EF6\\u7C7B\\u4E0A\\u63D0\\u4F9B\\u4E86\\u9759\\u6001\\u5DE5\\u5177\\u51FD\\u6570 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"colorStringToValue\"), \"\\uFF0C\\u7528\\u4E8E\\u5C06\\u5E38\\u89C1\\u989C\\u8272\\u5B57\\u7B26\\u4E32\\u8F6C\\u6362\\u4E3A\\u8BE5\\u5BF9\\u8C61\\uFF0C\\u652F\\u6301 rgb(57,197,187) #39c5bb hsv(176,71,77) \\u7B49\\u5B57\\u7B26\\u4E32\\u76F4\\u63A5\\u4F20\\u5165\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import { ColorPicker } from '@douyinfe/semi-ui';\\nimport React from 'react';\\n\\nfunction Demo() {\\n    return <div>\\n        <ColorPicker \\n            defaultValue={ColorPicker.colorStringToValue(\\\"rgb(57,197,187)\\\")}\\n            onChange={(value)=>{\\n                console.log(value);\\n            }} className={\\\"\\\"} alpha={true}/>\\n    </div>;\\n\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53D7\\u63A7\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u4F20\\u5165 value \\u6765\\u53D7\\u63A7\\u4F7F\\u7528\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import { ColorPicker } from '@douyinfe/semi-ui';\\nimport React from 'react';\\nfunction Demo() {\\n    const [value, setValue] = useState(ColorPicker.colorStringToValue(\\\"#39c5bb\\\"));\\n    return <div>\\n        <ColorPicker\\n            value={value}\\n            onChange={(value)=>{\\n                setValue(value);\\n            }}\\n            alpha={true}\\n        />\\n    </div>;\\n\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9876\\u90E8\\u548C\\u5E95\\u90E8\\u6E32\\u67D3\\u989D\\u5916\\u5143\\u7D20\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"topSlot\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bottomSlot\"), \" \\u5728\\u9876\\u90E8\\u548C\\u5E95\\u90E8\\u6E32\\u67D3\\u989D\\u5916\\u5143\\u7D20\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { ColorPicker } from '@douyinfe/semi-ui';\\nfunction Demo() {\\n    return <ColorPicker\\n        topSlot={<div> TopSlot</div>}\\n        bottomSlot={<div>Bottom Slot</div>}\\n        alpha={true}\\n        onChange={value=>{console.log(value);}}\\n    />;\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53C2\\u6570\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7528\\u6237\\u9009\\u4E2D\\u989C\\u8272\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value)=>void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"alpha\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5F00\\u542F\\u900F\\u660E\\u5EA6\\u9009\\u62E9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bottomSlot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5E95\\u90E8\\u6E32\\u67D3\\u989D\\u5916\\u5143\\u7D20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultFormat\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u624B\\u52A8\\u8F93\\u5165\\u65F6\\u7684\\u683C\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"rgba hex hsva\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hex\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"eyeDropper\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5F00\\u542F\\u6EF4\\u7BA1\\u62FE\\u8272\\u5668\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9AD8\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"280\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"topSlot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9876\\u90E8\\u6E32\\u67D3\\u989D\\u5916\\u5143\\u7D20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"width\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BBD\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"280\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"usePopover\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u653E\\u5165Popover\\u6E32\\u67D3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"popoverProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u653E\\u5165 Popover \\u65F6\\uFF0CPopover \\u4F20\\u5165\\u7684 props\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Popover Props\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/input/colorpicker","next":{"fields":{"slug":"en-US/input/datepicker"},"id":"564cb14c-e452-5405-98d4-f58f86f18b3e","frontmatter":{"title":"DatePicker","localeCode":"en-US","icon":"doc-datepicker","showNew":null}},"previous":{"fields":{"slug":"en-US/input/colorpicker"},"id":"3f918eea-1f10-5900-9199-1fbbc921575f","frontmatter":{"title":"ColorPicker","localeCode":"en-US","icon":"doc-colorPlatteNew","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}