{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/input/rating","result":{"data":{"current":{"frontmatter":{"title":"Rating","order":45,"brief":"Ratings provide insight regarding others’ opinions and experiences with a product.","icon":"doc-rating"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#half-star","title":"Half Star"},{"url":"#disabled","title":"Disabled"},{"url":"#click-to-clear","title":"Click to Clear"},{"url":"#text-description","title":"Text Description"},{"url":"#customize","title":"Customize"}]},{"url":"#api-reference","title":"API Reference"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"},{"url":"#keyboard-and-focus","title":"Keyboard and Focus"}]},{"url":"#design-tokens","title":"Design Tokens"}]},"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\": 45,\n \"category\": \"Input\",\n \"title\": \"Rating\",\n \"subTitle\": \"Rating\",\n \"icon\": \"doc-rating\",\n \"brief\": \"Ratings provide insight regarding others’ opinions and experiences with a product.\"\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 DesignToken = makeShortcode(\"DesignToken\");\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(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { Rating } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic Usage\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Support two sizes: \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"default\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"small\"), \".\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Supports customized size if pass in a number. Refer to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#Customize\"\n }, \"Customize\")), 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 { Rating } from '@douyinfe/semi-ui';\\n\\n() => (\\n \\n \\n
\\n
\\n \\n
\\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Half Star\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"allowHalf\"), \" to support selection of half stars. Support to \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"display\"), \" decimals ratings other than 0.5.\"), 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 { Rating } from '@douyinfe/semi-ui';\\n\\n() => (\\n \\n \\n
\\n \\n
\\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Disabled\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"disabled\"), \" to disabled interaction.\"), 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 { Rating } from '@douyinfe/semi-ui';\\n\\n() => (\\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Click to Clear\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"allowClear\"), \" Property allows you to clear the value when you click on the component again. By default it is set to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"true\"), \".\"), 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 { Rating } from '@douyinfe/semi-ui';\\n\\n() => (\\n \\n Clear when clicking\\n
\\n \\n
\\n
\\n Unable to clear when clicking\\n
\\n \\n
\\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Text Description\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tooltips\"), \" to add description to Rating.\"), 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, { useState } from 'react';\\nimport { Rating } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [value, setValue] = useState(0);\\n const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];\\n \\n const handleChange = (val) => {\\n setValue(val);\\n };\\n\\n return (\\n \\n \\n How was the help you received:\\n {value ? {desc[value - 1]} : ''}\\n \\n
\\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Customize\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can customize characters, numbers of rating and size.\"), mdx(\"blockquote\", {\n parentName: \"section\"\n }, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"Note that customized size could only work with customized characters.\")), 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 { Rating } from '@douyinfe/semi-ui';\\nimport { IconLikeHeart } from '@douyinfe/semi-icons';\\n\\n() => (\\n \\n } defaultValue={3} />\\n
\\n
\\n }\\n defaultValue={3}\\n />\\n
\\n
\\n \\n
\\n
\\n \\n
\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API Reference\"), 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 }, \"Properties\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"allowClear\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Toggle whether it is allowed to clear when clicking\"), 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 }, \"allowHalf\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Toggle whether it is allowed to select half stars\"), 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 }, \"autoFocus\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Automatically focus\"), 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 }, \"character\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Custom characters to display rating\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"React Node\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\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 }, \"count\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Number of stars or characters\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"5\")), 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 }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"disabled\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Read-only, disable interaction.\"), 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 }, \"preventScroll\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"size\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Size, one of \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"small\"), \", could use number for customized size\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\", \"|\", \" number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\"))), 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 }, \"Inline style\"), 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 }, \"tooltips\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Customize prompted information for each item\"), 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 }, \"value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Controlled value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onBlur\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when losing focus.\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function()\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\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 }, \"Callback function at the time of selection\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(value: number)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onFocus\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when getting focus\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function()\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onHoverChange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function of numerical changes when the mouse hovers\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(value: number)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onKeyDown\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when key down\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(e: event)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Accessibility\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"ARIA\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Rating has \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-checked\"), \" to indicate whether it is currently selected, \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-posinset\"), \" to indicate the position in the list, and \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-setsize\"), \" to indicate the length of the list.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Semi supports custom Rating semantics\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Users can use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-label\"), \" to customize the semantics of Rating;\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If the type of \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"character\"), \" passed in by the user is string, this string will be used for the semantics of Rating;\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-label\"), \" has higher priority than string type \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"character\"), \".\")))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Keyboard and Focus\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Initial focus settings for Rating:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"If there is a selection item in Rating, the initial focus should be set to the last selection item (for example: if 3 \\uD83C\\uDF1F are lit, the initial focus is set on the third lit \\uD83C\\uDF1F);\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If there is no option for Rating, the initial focus should be on the entire Rating.\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"On a Rating group, you can use the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"right arrow\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"up arrow\"), \" to select the next focus item of the current focus, and the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"left arrow\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"down arrow\"), \" to select the previous focus item of the current focus;\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The user sets the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"allowHalf\"), \" property, and presses the arrow keys to select or deselect only half a star;\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"A disabled Rating cannot get the focus.\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Tokens\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/input/rating","next":{"fields":{"slug":"zh-CN/input/rating"},"id":"67e79714-725a-5bc0-a77e-80cd1353d46a","frontmatter":{"title":"Rating 评分","localeCode":"zh-CN","icon":"doc-rating","showNew":null}},"previous":{"fields":{"slug":"zh-CN/input/radio"},"id":"ef7295b6-4927-54ff-9371-709126242c37","frontmatter":{"title":"Radio 单选框","localeCode":"zh-CN","icon":"doc-radio","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}