{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/input/colorpicker","result":{"data":{"current":{"frontmatter":{"title":"ColorPicker","order":38,"brief":"Quickly and easily select colors, and provide a dropper tool to pick colors","icon":"doc-colorPlatteNew"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-use","title":"Basic Use","items":[{"url":"#in-portal","title":"In portal"},{"url":"#normal-display","title":"Normal display"}]},{"url":"#eyedropper-color-picker","title":"Eyedropper Color Picker"},{"url":"#default-value","title":"Default Value"},{"url":"#controlled","title":"Controlled"},{"url":"#rendering-additional-elements-at-the-top-and-bottom","title":"Rendering additional elements at the top and bottom"},{"url":"#api-table","title":"API Table"}]}]},"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\": \"en-US\",\n  \"order\": 38,\n  \"category\": \"Input\",\n  \"title\": \"ColorPicker\",\n  \"icon\": \"doc-colorPlatteNew\",\n  \"brief\": \"Quickly and easily select colors, and provide a dropper tool to pick colors\"\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  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"ColorPicker component supported from v2.64.0\"), 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  }, \"Basic Use\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"In portal\"), 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 (\\n        <div>\\n            <ColorPicker\\n                alpha={true}\\n                onChange={value => {\\n                    console.log(value);\\n                }}\\n                usePopover={true}\\n            />\\n\\n            <br />\\n            <div>\\u81EA\\u5B9A\\u4E49 trigger</div>\\n\\n            <ColorPicker\\n                alpha={true}\\n                onChange={value => {\\n                    console.log(value);\\n                }}\\n                usePopover={true}\\n            >\\n                <Button> Trigger </Button>\\n            </ColorPicker>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Normal display\"), 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 (\\n        <ColorPicker\\n            alpha={true}\\n            onChange={value => {\\n                console.log(value);\\n            }}\\n        />\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Eyedropper Color Picker\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"eyeDropper={true}\"), \" to enable the eyedropper function, which supports picking colors from the browser or external software screen.\"), mdx(Notice, {\n    title: \"Notes\",\n    mdxType: \"Notice\"\n  }, \"To enable this function, the current web page must be deployed in a secure context such as HTTPS or localhost domain name, otherwise it will have no effect. The user's browser version must be 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 (\\n        <ColorPicker\\n            alpha={true}\\n            eyeDropper={true}\\n            onChange={value => {\\n                console.log(value);\\n            }}\\n        />\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Default Value\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When converting between various color representation formats, there are theoretical errors between some formats, so the value returned to you by onChange is an object containing color values \\u200B\\u200Bin three formats: hsva, hex, and rgba.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The defaultValue (uncontrolled) and value (controlled) you pass in should also be objects containing the same three formats.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"We provide a static tool function \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"colorStringToValue\"), \" on the component class to convert common color strings to this object, supporting direct passing of strings such as rgb(57,197,187) #39c5bb and hsv(176,71,77).\"), 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 (\\n        <div>\\n            <ColorPicker\\n                defaultValue={ColorPicker.colorStringToValue('rgb(57,197,187)')}\\n                onChange={value => {\\n                    console.log(value);\\n                }}\\n                alpha={true}\\n            />\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Controlled\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Controlled use by passing in value\"), 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    const [value, setValue] = useState(ColorPicker.colorStringToValue('#39c5bb'));\\n    console.log(value);\\n    return (\\n        <div>\\n            <ColorPicker\\n                value={value}\\n                onChange={value => {\\n                    setValue(value);\\n                }}\\n                alpha={true}\\n            />\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Rendering additional elements at the top and bottom\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"topSlot\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bottomSlot\"), \" to render additional elements at the top and bottom\"), 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 (\\n        <ColorPicker\\n            topSlot={<div>TopSlot</div>}\\n            bottomSlot={<div>Bottom Slot</div>}\\n            alpha={true}\\n            onChange={value => {\\n                console.log(value);\\n            }}\\n        />\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"API Table\"), 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  }, \"Parameter\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Description\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default value\"))), 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  }, \"User selected color callback\"), 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  }, \"Whether to enable transparency selection\"), 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  }, \"Bottom rendering additional elements\"), 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  }, \"Class name\"), 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  }, \"Default format for manual input\"), 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  }, \"Default value\"), 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  }, \"Whether to enable the eyedropper color picker\"), 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  }, \"Height\"), 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  }, \"Style\"), 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  }, \"Top rendering additional elements\"), 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  }, \"Width\"), 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  }, \"Whether to put in Popover rendering\"), 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  }, \"When placing a Popover, the props passed to the Popover\"), 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":"en-US/input/colorpicker","next":{"fields":{"slug":"zh-CN/input/colorpicker"},"id":"7d76d0ad-72b1-51c9-819b-d621fd036305","frontmatter":{"title":"ColorPicker 颜色选择器","localeCode":"zh-CN","icon":"doc-colorPlatteNew","showNew":null}},"previous":{"fields":{"slug":"zh-CN/input/checkbox"},"id":"54c9fb24-e413-5954-9e78-eb2a6bfeeff5","frontmatter":{"title":"Checkbox 复选框","localeCode":"zh-CN","icon":"doc-checkbox","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}