{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/basic/floatbutton","result":{"data":{"current":{"frontmatter":{"title":"FloatButton 悬浮按钮","order":23,"brief":"悬浮按钮是可以悬浮在页面上的可操作按钮","icon":"doc-floatButton"},"fields":{"type":"basic"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#尺寸","title":"尺寸"},{"url":"#形状","title":"形状"},{"url":"#点击跳转","title":"点击跳转"},{"url":"#ai-风格---多彩悬浮按钮","title":"AI 风格 - 多彩悬浮按钮"},{"url":"#带徽章的","title":"带徽章的"},{"url":"#悬浮按钮组","title":"悬浮按钮组"}]},{"url":"#api参考","title":"API参考","items":[{"url":"#floatbutton","title":"FloatButton"},{"url":"#floatbuttongroupitem","title":"FloatButtonGroupItem"},{"url":"#floatbuttongroup","title":"FloatButtonGroup"}]}]},"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\": 23,\n  \"category\": \"基础\",\n  \"title\": \"FloatButton 悬浮按钮\",\n  \"icon\": \"doc-floatButton\",\n  \"brief\": \"悬浮按钮是可以悬浮在页面上的可操作按钮\",\n  \"showNew\": true\n};\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  }, \"FloatButton \\u81EA 2.85.0 \\u652F\\u6301\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { FloatButton } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), 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 { FloatButton } from '@douyinfe/semi-ui';\\nimport { IconAIEditLevel1 } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const onClick = () => {\\n        console.log('float button clicked');\\n    };\\n\\n    return (<>\\n        <span>\\u57FA\\u672C\\u4F7F\\u7528\\uFF1A\\u9875\\u9762\\u53F3\\u4E0B\\u7B2C\\u4E09\\u5217 1 </span>\\n        <FloatButton icon={<IconAIEditLevel1 />} style={{ bottom: '270px' }} onClick={onClick}/>\\n    </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5C3A\\u5BF8\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u652F\\u6301\\u4E09\\u79CD\\u5C3A\\u5BF8\\uFF1A\\u9ED8\\u8BA4\\uFF0C\\u5C0F\\uFF0C\\u5927\\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 { FloatButton } from '@douyinfe/semi-ui';\\nimport { IconAIEditLevel1 } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const onClick = () => {\\n        console.log('float button clicked');\\n    };\\n    return (<>\\n        <span>\\u5927\\u5C3A\\u5BF8\\uFF1A\\u9875\\u9762\\u53F3\\u4E0B\\u7B2C\\u4E09\\u5217 2</span>\\n        <FloatButton size=\\\"large\\\" icon={<IconAIEditLevel1 />} style={{ bottom: '200px' }} onClick={onClick}/>\\n    </>);\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5F62\\u72B6\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9ED8\\u8BA4\\u5B9A\\u4E49\\u4E86\\u4E24\\u79CD\\u5F62\\u72B6\\uFF1Asquare\\uFF08\\u9ED8\\u8BA4\\uFF09\\u3001circle\\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 { FloatButton } from '@douyinfe/semi-ui';\\nimport { IconAIEditLevel1 } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const onClick = () => {\\n        console.log('float button clicked');\\n    };\\n    return (<>\\n        <span>\\u65B9\\u5F62\\uFF1A\\u9875\\u9762\\u53F3\\u4E0B\\u7B2C\\u4E09\\u5217 3</span>\\n        <FloatButton shape=\\\"square\\\" icon={<IconAIEditLevel1 />} style={{ bottom: '150px' }} onClick={onClick}/>\\n    </>);\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u70B9\\u51FB\\u8DF3\\u8F6C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"href\"), \" \\u8BBE\\u7F6E\\u8DF3\\u8F6C\\u5730\\u5740, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"target\"), \" \\u6307\\u5B9A\\u76EE\\u6807\\u7F51\\u9875\\u5E94\\u8BE5\\u5728\\u54EA\\u4E2A\\u7A97\\u53E3\\u6216\\u6846\\u67B6\\u4E2D\\u6253\\u5F00\\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 { FloatButton } from '@douyinfe/semi-ui';\\nimport { IconAIEditLevel1 } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const onClick = () => {\\n        console.log('float button clicked');\\n    };\\n    return (<>\\n        <span>\\u70B9\\u51FB\\u8DF3\\u8F6C\\uFF1A\\u9875\\u9762\\u53F3\\u4E0B\\u7B2C\\u4E09\\u5217 4</span>\\n        <FloatButton\\n            icon={<IconAIEditLevel1 />} \\n            style={{ bottom: '100px' }} \\n            href={'https://semi.design'}\\n            target={'_blank'}\\n        />\\n    </>);\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"AI \\u98CE\\u683C - \\u591A\\u5F69\\u60AC\\u6D6E\\u6309\\u94AE\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"colorful\"), \" \\u4E3A true\\uFF0C\\u5C55\\u793A\\u591A\\u5F69\\u7684\\u60AC\\u6D6E\\u6309\\u94AE\\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 { FloatButton } from '@douyinfe/semi-ui';\\nimport { IconAIEditLevel1 } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const onClick = () => {\\n        console.log('float button clicked');\\n    };\\n    return (<>\\n        <span>\\u591A\\u5F69\\u6309\\u94AE\\uFF1A\\u9875\\u9762\\u53F3\\u4E0B\\u7B2C\\u4E00\\u5217</span>\\n        <FloatButton\\n            colorful\\n            icon={<IconAIEditLevel1 />} \\n            style={{ bottom: '110px', insetInlineEnd: '150px' }} \\n            href={'https://semi.design'}\\n            target={'_blank'}\\n        />\\n    </>);\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5E26\\u5FBD\\u7AE0\\u7684\"), 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 { FloatButton } from '@douyinfe/semi-ui';\\nimport { IconAIEditLevel1 } from '@douyinfe/semi-icons';\\n\\n() => {\\n    return (<>\\n        <span>\\u5E26\\u5FBD\\u7AE0\\uFF1A\\u9875\\u9762\\u53F3\\u4E0B\\u7B2C\\u4E8C\\u5217</span>\\n        <FloatButton\\n            disabled\\n            icon={<IconAIEditLevel1 />}  \\n            badge={{ dot: true, type: 'danger' }} \\n            style={{ bottom: 270, insetInlineEnd: '100px' }} \\n        />\\n        <FloatButton\\n            badge={{ count: 1000, overflowCount: 999 }} \\n            size={\\\"large\\\"}\\n            icon={<IconAIEditLevel1 />}  \\n            style={{ bottom: 210, insetInlineEnd: 100 }} \\n        />\\n        <FloatButton \\n            icon={<IconAIEditLevel1 />}  \\n            badge={{ dot: true }} \\n            colorful \\n            style={{ bottom: 170, insetInlineEnd: 100 }} \\n        />\\n        <FloatButton \\n            icon={<IconAIEditLevel1 />}  \\n            colorful\\n            size=\\\"large\\\"\\n            badge={{ count: 'VIP', type: \\\"danger\\\" }}\\n            style={{ bottom: 110, insetInlineEnd: 100 }} \\n        />\\n    </>);\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u60AC\\u6D6E\\u6309\\u94AE\\u7EC4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u901A\\u8FC7  \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"items\"), \" \\u4F20\\u5165\\u5B50\\u9879\"), 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 { FloatButtonGroup } from '@douyinfe/semi-ui';\\nimport { IconAIEditLevel1, IconAIStrokedLevel3, IconSearchStroked, IconHelpCircleStroked } from '@douyinfe/semi-icons';\\n\\n() => {\\n    return (<>\\n        <span>The last row at the bottom right of the page</span>\\n        <FloatButtonGroup \\n            style={{\\n                insetInlineEnd: 24,\\n                bottom: 50,\\n            }}\\n            onClick={(value, e) => {\\n                console.log('\\u70B9\\u51FB\\u4E86 ', value);\\n            }}\\n            items={[\\n                {\\n                    icon: <IconAIStrokedLevel3 />,\\n                    content: \\\"\\u7F16\\u8F91\\\",\\n                    value: 'editor',\\n                },\\n                {\\n                    icon: <IconSearchStroked />,\\n                    content: \\\"\\u641C\\u7D22\\\",\\n                    value: 'search',\\n                },\\n                {\\n                    icon: <IconHelpCircleStroked />,\\n                    content: \\\"\\u5E2E\\u52A9\\\",\\n                    value: 'help'\\n                }\\n            ]}\\n        />\\n    </>);\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API\\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"FloatButton\"), 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  }, \"badge\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5FBD\\u7AE0\\u53C2\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/show/badge#API%E5%8F%82%E8%80%83\"\n  }, \"BadgeProps\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"colorful\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u591A\\u5F69\\u60AC\\u6D6E\\u6309\\u94AE\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\\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  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7981\\u7528\\u72B6\\u6001\"), 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  }, \"href\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u8DF3\\u8F6C\\u7684\\u94FE\\u63A5, \\u540C \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/API/Location/href\"\n  }, \"href\")), 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  }, \"icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u663E\\u793A\\u56FE\\u6807\"), 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  }, \"onClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: React.MouseEvent)\"), 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  }, \"\\u6837\\u5F0F\\uFF0C\\u652F\\u6301 round\\u3001 square\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"round\")), 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  }, \"\\u5C3A\\u5BF8\\uFF0C\\u652F\\u6301 default\\u3001small\\u3001large\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\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  }, \"\\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  }, \"target\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u5728\\u4F55\\u5904\\u663E\\u793A\\u94FE\\u63A5\\u7684 URL, \\u540C \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/a#target\"\n  }, \"target\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"FloatButtonGroupItem\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728 FloatButtonProps \\u57FA\\u7840\\u4E0A\\u589E\\u52A0\\u4EE5\\u4E0B\\u53C2\\u6570\"), 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  }, \"content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6587\\u672C\\u5185\\u5BB9\"), 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  }, \"item \\u7684\\u6807\\u8BC6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"String\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"FloatButtonGroup\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\\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  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7981\\u7528\\u72B6\\u6001\"), 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  }, \"items\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5355\\u4E2A\\u5B50\\u9879\\u7684\\u4FE1\\u606F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"FloatButtonGroupItem\"), 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  }, \"\\u70B9\\u51FB\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value: string, e: React.MouseEvent)\"), 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\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/basic/floatbutton","next":{"fields":{"slug":"en-US/basic/typography"},"id":"12ac1e4b-1c86-5c3f-85fa-67732e7834ab","frontmatter":{"title":"Typography","localeCode":"en-US","icon":"doc-typography","showNew":null}},"previous":{"fields":{"slug":"en-US/basic/floatbutton"},"id":"838cdbaf-ce85-53d4-a89c-5a8aee4daf7a","frontmatter":{"title":"FloatButton","localeCode":"en-US","icon":"doc-floatButton","showNew":true}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}