{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/avatar","result":{"data":{"current":{"frontmatter":{"title":"Avatar 头像","order":62,"brief":"头像，支持图片或字符展示。","icon":"doc-avatar"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#尺寸","title":"尺寸"},{"url":"#颜色","title":"颜色"},{"url":"#自适应字符大小","title":"自适应字符大小"},{"url":"#图片","title":"图片"},{"url":"#形状","title":"形状"},{"url":"#事件","title":"事件"},{"url":"#顶部和底部-slot","title":"顶部和底部 Slot","items":[{"url":"#顶部","title":"顶部"},{"url":"#底部","title":"底部"}]},{"url":"#额外边框","title":"额外边框"},{"url":"#额外动效","title":"额外动效"},{"url":"#头像组","title":"头像组"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#avatar","title":"Avatar"},{"url":"#avatargroup","title":"AvatarGroup"}]},{"url":"#accessibility","title":"Accessibility"},{"url":"#设计变量","title":"设计变量"}]},"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\": 62,\n  \"category\": \"展示类\",\n  \"title\": \"Avatar 头像\",\n  \"icon\": \"doc-avatar\",\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 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  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Avatar, AvatarGroup } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5C3A\\u5BF8\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"size\"), \" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u56FE\\u6807\\u5927\\u5C0F\\uFF0C\\u652F\\u6301\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extra-extra-small\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extra-small\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"small\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"default\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"medium\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"large\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extra-large\"), \"\\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 React from 'react';\\nimport { Avatar } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Avatar size=\\\"extra-extra-small\\\" style={{ margin: 4 }} alt='User'>\\n            U\\n        </Avatar>\\n        <Avatar size=\\\"extra-small\\\" style={{ margin: 4 }} alt='User'>\\n            U\\n        </Avatar>\\n        <Avatar size=\\\"small\\\" style={{ margin: 4 }} alt='User'>\\n            U\\n        </Avatar>\\n        <Avatar size=\\\"default\\\" style={{ margin: 4 }} alt='User'>\\n            U\\n        </Avatar>\\n        <Avatar style={{ margin: 4 }} alt='User'>U</Avatar>\\n        <Avatar size=\\\"large\\\" style={{ margin: 4 }} alt='User'>\\n            U\\n        </Avatar>\\n        <Avatar size=\\\"extra-large\\\" style={{ margin: 4 }} alt='User'>\\n            U\\n        </Avatar>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u989C\\u8272\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Avatar \\u652F\\u6301\\u9ED8\\u8BA4\\u8272\\u677F\\u7684 15 \\u79CD\\u989C\\u8272\\u548C\\u767D\\u8272\\uFF0C\\u5305\\u62EC\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"amber\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"blue\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"cyan\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"green\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"grey\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"indigo\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"light-blue\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"light-green\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"lime\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"orange\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pink\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"purple\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"red\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"teal\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"violet\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"yellow\"), \"\\u3002\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style\"), \" \\u6765\\u81EA\\u5B9A\\u4E49\\u989C\\u8272\\u6837\\u5F0F\\u3002\\u9ED8\\u8BA4\\u4E3A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"grey\"), \"\\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 React from 'react';\\nimport { Avatar } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Avatar style={{ margin: 4 }} alt='Alice Swift'>AS</Avatar>\\n        <Avatar color=\\\"red\\\" style={{ margin: 4 }} alt='Bob Matteo'>\\n            BM\\n        </Avatar>\\n        <Avatar color=\\\"light-blue\\\" style={{ margin: 4 }} alt='Taylor Joy'>\\n            TJ\\n        </Avatar>\\n        <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf', margin: 4 }} alt='Zank Lance'>ZL</Avatar>\\n        <Avatar style={{ backgroundColor: '#87d068', margin: 4 }} alt='Youself Zhang'>YZ</Avatar>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u9002\\u5E94\\u5B57\\u7B26\\u5927\\u5C0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5B57\\u7B26\\u7C7B\\u578B\\u7684\\u5934\\u50CF\\uFF0C\\u5B57\\u4F53\\u5927\\u5C0F\\u4F1A\\u6839\\u636E\\u5934\\u50CF\\u5BBD\\u5EA6\\u81EA\\u9002\\u5E94\\u8C03\\u6574\\u3002\\u4F7F\\u7528\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gap\"), \"\\u8C03\\u6574\\u5B57\\u7B26\\u5934\\u50CF\\u8DDD\\u79BB\\u5DE6\\u53F3\\u4E24\\u4FA7\\u7684\\u50CF\\u7D20\\u5927\\u5C0F\\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 React from 'react';\\nimport { Avatar } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Avatar style={{ margin: 4 }}>AS</Avatar>\\n        <Avatar style={{ margin: 4 }} gap={4}>Semi</Avatar>\\n        <Avatar style={{ margin: 4 }} gap={10}>Semi</Avatar>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u56FE\\u7247\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src\"), \" \\u8BBE\\u7F6E\\u56FE\\u7247\\u683C\\u5F0F\\u7684\\u5934\\u50CF\\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 React from 'react';\\nimport { Avatar } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Avatar\\n            alt=\\\"beautiful cat\\\"\\n            src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n            style={{ margin: 4 }}\\n        />\\n        <Avatar\\n            alt=\\\"cute cat\\\"\\n            size=\\\"small\\\"\\n            src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n            style={{ margin: 4 }}\\n        />\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5F62\\u72B6\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Avatar \\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"circle\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"square\"), \" \\u4E24\\u79CD\\u5F62\\u72B6\\uFF0C\\u9ED8\\u8BA4\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"circle\"), \"\\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 React from 'react';\\nimport { Avatar } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Avatar style={{ margin: 4 }} alt=\\\"User\\\">U</Avatar>\\n        <Avatar shape=\\\"square\\\" style={{ margin: 4 }} alt=\\\"User\\\">\\n            U\\n        </Avatar>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4E8B\\u4EF6\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Avatar \\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onClick\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onMouseEnter\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onMouseLeave\"), \"\\u3002\\u5176\\u4E2D \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hover\"), \" \\u72B6\\u6001\\u4E0B\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hoverMask\"), \" \\u5C5E\\u6027\\u4F20\\u5165\\u8986\\u76D6\\u5C42\\u7684\\u5185\\u5BB9\\u3002\\u8986\\u76D6\\u5C42\\u65E0\\u9ED8\\u8BA4\\u6837\\u5F0F\\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 React from 'react';\\nimport { Avatar } from '@douyinfe/semi-ui';\\nimport { IconCamera } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const style = {\\n        backgroundColor: 'var(--semi-color-overlay-bg)',\\n        height: '100%',\\n        width: '100%',\\n        display: 'flex',\\n        alignItems: 'center',\\n        justifyContent: 'center',\\n    };\\n    const hover = (\\n        <div style={style}>\\n            <IconCamera />\\n        </div>\\n    );\\n\\n    return (\\n        <Avatar hoverMask={hover} color=\\\"red\\\" alt='Bob Downton'>\\n            BD\\n        </Avatar>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9876\\u90E8\\u548C\\u5E95\\u90E8 Slot\"), 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 { Avatar } from '@douyinfe/semi-ui';\\n\\n <Avatar\\n            alt=\\\"beautiful cat\\\"\\n            src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n            style={{ margin: 4 }}\\n            size=\\\"large\\\"\\n            border={{color:\\\"#FE2C55\\\",motion:true}}\\n            contentMotion={true}\\n            topSlot={{\\n                text: \\\"\\u76F4\\u64AD\\\",\\n                gradientStart:\\\"rgb(255,23,100)\\\",\\n                gradientEnd:\\\"rgb(237,52,148)\\\"\\n            }}\\n            bottomSlot={{\\n                shape: \\\"circle\\\",\\n                bgColor:\\\"#FE2C55\\\", \\n                text: <IconPlus/>\\n            }}\\n/>\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u9876\\u90E8\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"()=>{\\n    return <div>\\n\\n        <Avatar color=\\\"amber\\\" topSlot={{\\n            text: \\\"\\u76F4\\u64AD\\\",\\n            gradientStart:\\\"rgb(255,23,100)\\\",\\n            gradientEnd:\\\"rgb(237,52,148)\\\"\\n        }}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" size=\\\"large\\\" topSlot={{\\n            text: \\\"\\u76F4\\u64AD\\\",\\n            gradientStart:\\\"rgb(255,23,100)\\\",\\n            gradientEnd:\\\"rgb(237,52,148)\\\"\\n        }}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" size=\\\"extra-large\\\" topSlot={{\\n            text: \\\"\\u76F4\\u64AD\\\",\\n            gradientStart:\\\"rgb(255,23,100)\\\",\\n            gradientEnd:\\\"rgb(237,52,148)\\\"\\n        }}>T</Avatar>\\n    \\n    </div>\\n}\\n\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u5E95\\u90E8\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"()=>{\\n    return <div>\\n\\n        <Avatar color=\\\"amber\\\" bottomSlot={{\\n            shape: \\\"square\\\", \\n            bgColor:'#FE2C55',\\n            text: \\\"\\u76F4\\u64AD\\u4E2D\\\"\\n        }}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" size=\\\"large\\\" bottomSlot={{\\n            shape: \\\"square\\\", \\n            bgColor:'#FE2C55',\\n            text: \\\"\\u76F4\\u64AD\\u4E2D\\\"\\n        }}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" size=\\\"extra-large\\\" bottomSlot={{\\n            shape: \\\"square\\\", \\n            bgColor:'#FE2C55',\\n            text: \\\"\\u76F4\\u64AD\\u4E2D\\\"\\n        }}>T</Avatar>\\n        <br/>\\n        <br/>\\n        <br/>\\n        <Avatar color=\\\"amber\\\" bottomSlot={{\\n            shape: \\\"circle\\\", \\n            bgColor:'#FE2C55',\\n            text: <IconPlus/>\\n        }}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" size=\\\"large\\\" bottomSlot={{\\n            shape: \\\"circle\\\", \\n            bgColor:'#FE2C55',\\n            text: <IconPlus/>\\n        }}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" size=\\\"extra-large\\\" bottomSlot={{\\n            shape: \\\"circle\\\", \\n            bgColor:'#FE2C55',\\n            text: <IconPlus/>\\n        }}>T</Avatar>\\n    </div>\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u989D\\u5916\\u8FB9\\u6846\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"\\n()=>{\\n    return <div>\\n\\n        <Avatar color=\\\"amber\\\" border={true} style={{marginRight:'8px'}}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" border={true} style={{marginRight:'8px'}}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" border={true} style={{marginRight:'8px'}}>T</Avatar>\\n    \\n    </div>\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u989D\\u5916\\u52A8\\u6548\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7  \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"border={motion:true}\"), \" \\u548C contentMotion \\u5F00\\u542F\\u8FB9\\u6846\\u548C\\u5185\\u5BB9\\u533A\\u57DF\\u7684\\u989D\\u5916\\u52A8\\u6548\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"\\n()=>{\\n    return <div>\\n\\n        <Avatar color=\\\"amber\\\" border={{motion:true}} style={{marginRight:'8px'}} contentMotion={true}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" border={{motion:true}}  size={\\\"large\\\"} style={{marginRight:'8px'}}  contentMotion={true}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" border={{motion:true}} size={\\\"extra-large\\\"} style={{marginRight:'8px'}}  contentMotion={true}>T</Avatar>\\n    \\n    </div>\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5934\\u50CF\\u7EC4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 AvatarGroup \\u5C06 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"avatar\"), \" \\u663E\\u793A\\u4E3A\\u7EC4\\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 React from 'react';\\nimport { AvatarGroup, Avatar } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <AvatarGroup>\\n            <Avatar color=\\\"red\\\" alt='Lisa LeBlanc'>LL</Avatar>\\n            <Avatar alt='Caroline Xiao'>CX</Avatar>\\n            <Avatar color=\\\"amber\\\" alt='Rafal Matin'>RM</Avatar>\\n            <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt='Zank Lance'>ZL</Avatar>\\n            <Avatar style={{ backgroundColor: '#87d068' }} alt='Youself Zhang'>YZ</Avatar>\\n        </AvatarGroup>\\n    </div>\\n);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"maxCount\"), \" \\u8BBE\\u7F6E\\u5C55\\u793A\\u7684\\u5934\\u50CF\\u6570\\u91CF\\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 React from 'react';\\nimport { AvatarGroup, Avatar } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <AvatarGroup maxCount={3}>\\n            <Avatar color=\\\"red\\\" alt='Lisa LeBlanc'>LL</Avatar>\\n            <Avatar alt='Caroline Xiao'>CX</Avatar>\\n            <Avatar color=\\\"amber\\\" alt='Rafal Matin'>RM</Avatar>\\n            <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt='Zank Lance'>ZL</Avatar>\\n            <Avatar style={{ backgroundColor: '#87d068' }} alt='Youself Zhang'>YZ</Avatar>\\n        </AvatarGroup>\\n    </div>\\n);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderMore\"), \" \\u81EA\\u5B9A\\u4E49 more \\u6807\\u7B7E\\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 React from 'react';\\nimport { AvatarGroup, Avatar, Popover } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const renderMore = (restNumber, restAvatars) => {\\n        const content = restAvatars.map((avatar, index) => {\\n            return (\\n                <div style={{ paddingBottom: '12px' }} key={index}>\\n                    {React.cloneElement(avatar, { size: 'extra-small' })}\\n                    <span style={{ marginLeft: 8, fontSize: 14 }}>\\u8FD9\\u662F\\u6BB5\\u6587\\u5B57\\u63CF\\u8FF0</span>\\n                </div>\\n            );\\n        });\\n        return (\\n            <Popover\\n                content={content}\\n                autoAdjustOverflow={false}\\n                position={'bottomRight'}\\n                style={{ padding: '12px 8px', paddingBottom: 0 }}\\n            >\\n                <Avatar>{`+${restNumber}`}</Avatar>\\n            </Popover>\\n        );\\n    };\\n\\n    return (\\n        <AvatarGroup maxCount={3} renderMore={renderMore}>\\n            <Avatar color=\\\"red\\\" alt='Lisa LeBlanc'>LL</Avatar>\\n            <Avatar alt='Caroline Xiao'>CX</Avatar>\\n            <Avatar color=\\\"amber\\\" alt='Rafal Matin'>RM</Avatar>\\n            <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt='Zank Lance'>ZL</Avatar>\\n            <Avatar style={{ backgroundColor: '#87d068' }} alt='Youself Zhang'>YZ</Avatar>\\n        </AvatarGroup>\\n    );\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"overlapFrom\"), \" \\u63A7\\u5236\\u5934\\u50CF\\u7EC4\\u7684\\u8986\\u76D6\\u65B9\\u5F0F\\u3002\\u53EF\\u9009\\u503C\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"start\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"end\"), \"\\uFF0C\\u5206\\u522B\\u8868\\u793A\\u5DE6\\u8FB9\\u8986\\u76D6\\u53F3\\u8FB9\\u548C\\u53F3\\u8FB9\\u8986\\u76D6\\u5DE6\\u8FB9\\u3002\\u9ED8\\u8BA4\\u503C\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"start\"), \"\\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 React from 'react';\\nimport { AvatarGroup, Avatar } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <div>\\n            <AvatarGroup overlapFrom={'start'}>\\n                <Avatar color=\\\"red\\\" alt='Lisa LeBlanc'>LL</Avatar>\\n                <Avatar alt='Caroline Xiao'>CX</Avatar>\\n                <Avatar color=\\\"amber\\\" alt='Rafal Matin'>RM</Avatar>\\n                <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt='Zank Lance'>ZL</Avatar>\\n                <Avatar style={{ backgroundColor: '#87d068' }} alt='Youself Zhang'>YZ</Avatar>\\n            </AvatarGroup>\\n        </div>\\n        <div>\\n            <AvatarGroup overlapFrom={'end'}>\\n                <Avatar color=\\\"red\\\" alt='Lisa LeBlanc'>LL</Avatar>\\n                <Avatar alt='Caroline Xiao'>CX</Avatar>\\n                <Avatar color=\\\"amber\\\" alt='Rafal Matin'>RM</Avatar>\\n                <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt='Zank Lance'>ZL</Avatar>\\n                <Avatar style={{ backgroundColor: '#87d068' }} alt='Youself Zhang'>YZ</Avatar>\\n            </AvatarGroup>\\n        </div>\\n    </div>\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"hr\", {\n    parentName: \"section\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Avatar\"), 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  }, \"\\u5C5E\\u6027\"), 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  }, \"alt\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u50CF\\u7684\\u66FF\\u4EE3\\u6587\\u672C\\u63CF\\u8FF0\"), 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  }, \"border\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u989D\\u5916\\u8FB9\\u6846 \\uFF08>=2.52.0\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{color?:string //\\u989C\\u8272, motion?:boolean //\\u662F\\u5426\\u5F00\\u542F\\u52A8\\u753B} or 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  }, \"bottomSlot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5E95\\u90E8 Slot \\u914D\\u7F6E \\uFF08>= 2.52.0 \\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{\", mdx(\"br\", null), mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"render?: () => React.ReactNode //\\u5B8C\\u5168\\u63A7\\u5236\\u6E32\\u67D3,\", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"shape?: \\\"circle\\\" or \\\"square\\\" // Slot \\u5F62\\u72B6,\", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"text: React.ReactNode // Slot \\u5185\\u5BB9,\", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"bgColor:string // Slot \\u80CC\\u666F\\u8272 \", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"textColor:string // \\u6587\\u5B57\\u989C\\u8272 \", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"className:string \", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"style?:CSSProperties\", mdx(\"br\", null), \"}\"), 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  }, \"color\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u5934\\u50CF\\u7684\\u989C\\u8272\\uFF0C\\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"amber\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"blue\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"cyan\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"green\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"grey\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"indigo\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light-blue\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light-green\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"lime\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"orange\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"pink\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"purple\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"red\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"teal\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"violet\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"yellow\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"grey\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"contentMotion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5934\\u50CF\\u5185\\u5BB9\\u533A\\u57DF\\u52A8\\u6548 \\uFF08>=2.xx.0\\uFF09\"), 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  }, \"hoverMask\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hover \\u65F6\\u5934\\u50CF\\u5185\\u5BB9\\u8986\\u76D6\\u5C42\"), 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  }, \"gap\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5B57\\u7B26\\u5934\\u50CF\\u8DDD\\u79BB\\u5DE6\\u53F3\\u4E24\\u4FA7\\u7684\\u50CF\\u7D20\\u5927\\u5C0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"3\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"imgAttr\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u539F\\u751F img \\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.ImgHTMLAttributes<HTMLImageElement\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shape\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u5934\\u50CF\\u7684\\u5F62\\u72B6\\uFF0C\\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"circle\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"square\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"circle\"))), 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  }, \"\\u8BBE\\u7F6E\\u5934\\u50CF\\u7684\\u5927\\u5C0F\\uFF0C\\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"extra-extra-small\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"extra-small\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"medium\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"large\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"extra-large\"), \" \\u548C \\u5408\\u6CD5\\u7684 width \\u5C5E\\u6027\\u503C\\u4F8B\\u5982 \\\"10px\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"medium\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"src\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u7C7B\\u5934\\u50CF\\u7684\\u8D44\\u6E90\\u5730\\u5740\"), 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  }, \"srcSet\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u56FE\\u7247\\u7C7B\\u5934\\u50CF\\u54CD\\u5E94\\u5F0F\\u8D44\\u6E90\\u5730\\u5740\"), 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  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\\u540D\"), 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 Slot \\u914D\\u7F6E \\uFF08>= 2.52.0 \\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{\", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"render?: () => React.ReactNode //\\u5B8C\\u5168\\u63A7\\u5236\\u6E32\\u67D3,\", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"gradientStart?: string // \\u9876\\u90E8\\u80CC\\u666F\\u6E10\\u53D8\\u8D77\\u59CB\\u8272\", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"gradientEnd?: string // \\u9876\\u90E8\\u80CC\\u666F\\u6E10\\u53D8\\u7ED3\\u675F\\u8272\", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"text: React.ReactNode \", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"textColor:string //\\u6587\\u5B57\\u989C\\u8272 \", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"className:string\", mdx(\"br\", null), mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"style?:CSSProperties\", mdx(\"br\", null), \"}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5355\\u51FB\\u5934\\u50CF\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: Event) => 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  }, \"onError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u52A0\\u8F7D\\u5931\\u8D25\\u7684\\u4E8B\\u4EF6\\uFF0C\\u8FD4\\u56DE false \\u4F1A\\u5173\\u95ED\\u7EC4\\u4EF6\\u9ED8\\u8BA4\\u7684 fallback \\u884C\\u4E3A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: Event) => 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  }, \"onMouseEnter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"MouseEnter \\u4E8B\\u4EF6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: Event) => 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  }, \"onMouseLeave\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"MouseLeave \\u4E8B\\u4EF6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: Event) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"AvatarGroup\"), 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  }, \"\\u5C5E\\u6027\"), 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  }, \"maxCount\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6700\\u5927\\u6570\\u91CF\\u9650\\u5236\\uFF0C\\u8D85\\u51FA\\u540E\\u663E\\u793A+N\"), 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  }, \"overlapFrom\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u5934\\u50CF\\u8986\\u76D6\\u65B9\\u5411\\uFF0C\\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"end\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderMore\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3 more \\u6807\\u7B7E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(restNumber: number, restAvatars: ReactNode[]) => 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  }, \"shape\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u5934\\u50CF\\u7684\\u5F62\\u72B6\\uFF0C\\u652F\\u6301\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"circle\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"square\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"circle\"))), 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  }, \"\\u8BBE\\u7F6E\\u5934\\u50CF\\u7684\\u5927\\u5C0F\\uFF0C\\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"extra-extra-small\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"extra-small\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"medium\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"large\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"extra-large\"), \" \\u548C\\u5408\\u6CD5\\u7684 width \\u5C5E\\u6027\\u503C\\u4F8B\\uFF0C\\u5982 \\\"10px\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"medium\")))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avatar \\u4E00\\u822C\\u4E0D\\u7528\\u4E8E\\u64CD\\u4F5C\\uFF0C\\u4E0D\\u9700\\u8981\\u88AB\\u83B7\\u53D6\\u7126\\u70B9\\u3002\\u4F46\\u5F53 Avatar \\u53EF\\u4EE5\\u88AB\\u70B9\\u51FB\\u64CD\\u4F5C\\u65F6\\uFF08\\u5982\\uFF1ASemi \\u5B98\\u7F51\\u4E0A\\u65B9\\u7684\\u5934\\u50CF\\uFF09\\u9700\\u8981\\u88AB\\u805A\\u7126\\uFF0C\\u5E76\\u54CD\\u5E94\\u952E\\u76D8 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Enter\"), \" \\u4E8B\\u4EF6\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53 Avatar \\u4E0E\\u5176\\u4ED6\\u7EC4\\u4EF6\\u7ED3\\u5408\\u4F7F\\u7528\\u65F6\\uFF0C\\u9700\\u8981\\u540C\\u65F6\\u68C0\\u67E5\\u8BE5\\u7EC4\\u4EF6\\u7684\\u53EF\\u8BBF\\u95EE\\u6027\\u6307\\u5357\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avatar\\u7684\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"alt\"), \"\\u5C5E\\u6027\\u53EF\\u4EE5\\u88AB\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u8BFB\\u53D6\\uFF0C\\u4F7F\\u7528\\u5934\\u50CF\\u7EC4\\u4EF6\\u65F6\\uFF0C\\u8BF7\\u4F7F\\u7528\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"alt\"), \" \\u5C5E\\u6027\\u89E3\\u91CA\\u5934\\u50CF\\u7684\\u5185\\u5BB9\\u3002\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from 'react';\\nimport { Avatar } from '@douyinfe/semi-ui';\\n\\n() => {\\n    return (\\n        <>\\n            {/* Good case */ }\\n            <Avatar\\n                alt=\\\"\\u4E00\\u53EA\\u53EF\\u7231\\u7684\\u732B\\u54AA\\\"\\n                src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n                style={{ margin: 4 }}\\n            />\\n            <Avatar\\n                alt=\\\"\\u59DC\\u9E4F\\u5FD7\\\"\\n                src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n                style={{ margin: 4 }}\\n            />\\n            {/* Bad case */ }\\n            <Avatar\\n                alt=\\\"\\\"\\n                src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n                style={{ margin: 4 }}\\n            />\\n            <Avatar\\n                alt=\\\"\\u59DC\\u9E4F\\u5FD7\\u7684\\u56FE\\u7247\\\"\\n                src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n                style={{ margin: 4 }}\\n            />\\n        </>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/avatar","next":{"fields":{"slug":"en-US/show/badge"},"id":"a87b6eb5-73ce-5fdf-81bd-f9ca3fecffdd","frontmatter":{"title":"Badge","localeCode":"en-US","icon":"doc-badge","showNew":null}},"previous":{"fields":{"slug":"en-US/show/avatar"},"id":"db3b5637-3e1e-5a88-8e65-ac60dae12cab","frontmatter":{"title":"Avatar","localeCode":"en-US","icon":"doc-avatar","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}