{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/feedback/skeleton","result":{"data":{"current":{"frontmatter":{"title":"Skeleton 骨架屏","order":92,"brief":"在需要等待加载内容的位置提供的占位组件。","icon":"doc-skeleton"},"fields":{"type":"feedback"},"tableOfContents":{"items":[{"url":"#概述","title":"概述"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本使用","title":"基本使用"},{"url":"#组合使用","title":"组合使用"},{"url":"#加载动画","title":"加载动画"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#skeleton","title":"Skeleton"},{"url":"#skeletonavatar","title":"Skeleton.Avatar"},{"url":"#skeletonparagraph","title":"Skeleton.Paragraph"}]},{"url":"#文案规范","title":"文案规范"},{"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\": 92,\n  \"category\": \"反馈类\",\n  \"title\": \"Skeleton 骨架屏\",\n  \"icon\": \"doc-skeleton\",\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  }, \"\\u6982\\u8FF0\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Avatar\"), \"\\uFF1A\\u5360\\u4F4D\\u5934\\u50CF\\uFF0C\\u9ED8\\u8BA4\\u4E3A\\u5706\\u5F62\\uFF0C\\u9ED8\\u8BA4\\u5C3A\\u5BF8\\uFF1AAvatar medium: \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"width: 48px\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"height: 48px\"), \"\\u3002\\u652F\\u6301 Avatar \\u7684 size\\u3001shape \\u5C5E\\u6027 (v2.20\\u540E\\u652F\\u6301)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Image\"), \"\\uFF1A\\u5360\\u4F4D\\u56FE\\u50CF\\uFF0C\\u9ED8\\u8BA4\\u5C3A\\u5BF8\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"width: 100%\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"height: 100%\"), \"\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Title\"), \"\\uFF1A\\u5360\\u4F4D\\u6807\\u9898\\uFF0C\\u9ED8\\u8BA4\\u5C3A\\u5BF8\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"width: 100%\"), \"\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"height: 24px\"), \"\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Paragraph\"), \"\\uFF1A\\u5360\\u4F4D\\u5185\\u5BB9\\u90E8\\u5206\\uFF0C\\u9ED8\\u8BA4\\u5C3A\\u5BF8\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"width: 100%\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"height: 16px\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"margin-bottom: 10px\"), \"\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Button\"), \"\\uFF1A\\u5360\\u4F4D\\u6309\\u94AE\\uFF0C\\u9ED8\\u8BA4\\u5C3A\\u5BF8\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"width: 115px\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"height: 32px\"), \"\\u3002\")), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u6CE8\\u610F\\uFF1A\\u9ED8\\u8BA4\\u6837\\u5F0F\\u5747\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"className\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style\"), \" \\u8FDB\\u884C\\u81EA\\u5B9A\\u4E49\\u3002\"))), 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 { Skeleton } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u4F7F\\u7528\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { Skeleton, Switch, Avatar, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [loading, setLoading] = useState(true);\\n    const showContent = () => {\\n        setLoading(!loading);\\n    };\\n    return (\\n        <>\\n            <span style={{ display: 'flex', alignItems: 'center' }}>\\n                <Switch onChange={() => showContent()} />\\n                <span style={{ marginLeft: '10px' }}>\\u663E\\u793A\\u52A0\\u8F7D\\u5185\\u5BB9</span>\\n            </span>\\n            <br />\\n            <Skeleton placeholder={<Skeleton.Avatar />} loading={loading}>\\n                <Avatar color=\\\"blue\\\" style={{ marginBottom: 10 }}>\\n                    U\\n                </Avatar>\\n            </Skeleton>\\n            <br />\\n            <Skeleton style={{ width: 200, height: 150 }} placeholder={<Skeleton.Image />} loading={loading}>\\n                <img\\n                    src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n                    height=\\\"150\\\"\\n                    alt=\\\"avatar\\\"\\n                />\\n            </Skeleton>\\n            <br />\\n            <Skeleton\\n                style={{ width: 80 }}\\n                placeholder={<Skeleton.Title style={{ marginBottom: 10 }} />}\\n                loading={loading}\\n            >\\n                <h4 style={{ marginBottom: 0 }}>Semi UI</h4>\\n            </Skeleton>\\n            <Skeleton style={{ width: 240 }} placeholder={<Skeleton.Paragraph rows={2} />} loading={loading}>\\n                <p style={{ width: 240 }}>\\u7CBE\\u5FC3\\u6253\\u78E8\\u6BCF\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u7684\\u7528\\u6237\\u4F53\\u9A8C\\uFF0C\\u4ECE\\u7528\\u6237\\u7684\\u89D2\\u5EA6\\u8003\\u8651\\u6BCF\\u4E2A\\u7EC4\\u4EF6\\u7684\\u4F7F\\u7528\\u573A\\u666F\\u3002</p>\\n            </Skeleton>\\n            <br />\\n            <Skeleton placeholder={<Skeleton.Button />} loading={loading}>\\n                <Button>Button</Button>\\n            </Skeleton>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7EC4\\u5408\\u4F7F\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u56FE\\u7247\\u548C\\u6807\\u9898\\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 { Skeleton } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const placeholder = (\\n        <div>\\n            <Skeleton.Image style={{ width: 200, height: 150 }} />\\n            <Skeleton.Title style={{ width: 120, marginTop: 10 }} />\\n        </div>\\n    );\\n\\n    return (\\n        <Skeleton placeholder={placeholder} loading={true}>\\n            <img\\n                src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n                height=\\\"150\\\"\\n                alt=\\\"avatar\\\"\\n            />\\n            <h4>Semi UI</h4>\\n        </Skeleton>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7EDF\\u8BA1\\u6570\\u5B57\\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 { Skeleton, Descriptions } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const placeholder = (\\n        <div>\\n            <Skeleton.Paragraph rows={1} style={{ width: 80, marginBottom: 10 }} />\\n            <Skeleton.Title style={{ width: 120 }} />\\n        </div>\\n    );\\n\\n    const data = [{ key: '\\u5B9E\\u9645\\u7528\\u6237\\u6570\\u91CF', value: '1,480,000' }];\\n\\n    return (\\n        <Skeleton placeholder={placeholder} loading={true}>\\n            <Descriptions data={data} row />\\n        </Skeleton>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5934\\u50CF\\u548C\\u6807\\u9898\\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 { Skeleton, Avatar } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const placeholder = (\\n        <div style={{ display: 'flex', alignItems: 'center' }}>\\n            <Skeleton.Avatar style={{ marginRight: 12 }} />\\n            <Skeleton.Title style={{ width: 120 }} />\\n        </div>\\n    );\\n\\n    return (\\n        <Skeleton placeholder={placeholder} loading={true}>\\n            <Avatar color=\\\"blue\\\" style={{ marginRight: 12 }}>\\n                UI\\n            </Avatar>\\n            <span>Semi UI</span>\\n        </Skeleton>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5C45\\u4E2D\\u6BB5\\u843D\\u548C\\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 { Skeleton, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const style = {\\n        display: 'flex',\\n        flexDirection: 'column',\\n        alignItems: 'center',\\n        width: '300px',\\n        marginBottom: '10px',\\n    };\\n\\n    const placeholder = (\\n        <div style={style}>\\n            <Skeleton.Paragraph style={style} rows={3} />\\n            <Skeleton.Button />\\n        </div>\\n    );\\n\\n    return (\\n        <Skeleton placeholder={placeholder} loading={true} style={{ textAlign: 'center' }}>\\n            <div style={{ textAlign: 'center' }}>\\n                <p>Hi, Bytedance dance dance.</p>\\n                <p>Hi, Bytedance dance dance.</p>\\n                <Button>Button</Button>\\n            </div>\\n        </Skeleton>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5934\\u50CF\\u3001\\u6807\\u9898\\u548C\\u6BB5\\u843D\\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 { Skeleton, Avatar } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const style = {\\n        display: 'flex',\\n        alignItems: 'flex-start',\\n    };\\n\\n    const placeholder = (\\n        <div style={style}>\\n            <Skeleton.Avatar style={{ marginRight: 12 }} />\\n            <div>\\n                <Skeleton.Title style={{ width: 120, marginBottom: 12, marginTop: 12 }} />\\n                <Skeleton.Paragraph style={{ width: 240 }} rows={3} />\\n            </div>\\n        </div>\\n    );\\n\\n    return (\\n        <Skeleton placeholder={placeholder} loading={true}>\\n            <div style={style}>\\n                <Avatar color=\\\"blue\\\" style={{ marginRight: 12 }}>\\n                    UI\\n                </Avatar>\\n                <div>\\n                    <h3>Semi UI</h3>\\n                    <p>Hi, Bytedance dance dance.</p>\\n                    <p>Hi, Bytedance dance dance.</p>\\n                    <p>Hi, Bytedance dance dance.</p>\\n                </div>\\n            </div>\\n        </Skeleton>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8868\\u683C\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Skeleton, Table } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const data = {\\n        columns: [\\n            {\\n                title: 'Name',\\n                dataIndex: 'name',\\n            },\\n            {\\n                title: 'Age',\\n                dataIndex: 'age',\\n            },\\n            {\\n                title: 'Address',\\n                dataIndex: 'address',\\n            },\\n        ],\\n        content: [\\n            {\\n                key: '1',\\n                name: 'John Brown',\\n                age: 32,\\n                address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',\\n            },\\n            {\\n                key: '2',\\n                name: 'Jim Green',\\n                age: 42,\\n                address: 'London No. 1 Lake Park',\\n            },\\n            {\\n                key: '3',\\n                name: 'Joe Black',\\n                age: 32,\\n                address: 'Sidney No. 1 Lake Park',\\n            },\\n            {\\n                key: '4',\\n                name: 'Disabled User',\\n                age: 99,\\n                address: 'Sidney No. 1 Lake Park',\\n            },\\n        ],\\n    };\\n\\n    const skData = {\\n        columns: [1, 2, 3].map(key => {\\n            const item = {};\\n            item.title = <Skeleton.Title style={{ width: '0' }} />;\\n            item.dataIndex = `${key}`;\\n            return item;\\n        }),\\n        dataSource: [1, 2, 3, 4].map(key => {\\n            const item = {};\\n            item.key = key;\\n            [1, 2, 3].forEach(i => {\\n                const width = 50 * i;\\n                item[i] = <Skeleton.Paragraph style={{ width: width }} rows={1} />;\\n            });\\n            return item;\\n        }),\\n    };\\n\\n    const placeholder = (\\n        <div style={{ position: 'relative' }}>\\n            <Table\\n                style={{ backgroundColor: 'var(--semi-color-bg-1)' }}\\n                columns={skData.columns}\\n                dataSource={skData.dataSource}\\n                pagination={false}\\n            />\\n            <div style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }}></div>\\n        </div>\\n    );\\n\\n    return (\\n        <Skeleton placeholder={placeholder} loading={true}>\\n            <div>\\n                <Table columns={data.columns} dataSource={data.content} pagination={false} />\\n            </div>\\n        </Skeleton>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u52A0\\u8F7D\\u52A8\\u753B\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"active\"), \" \\u5C5E\\u6027\\u53EF\\u4EE5\\u5C55\\u793A\\u52A8\\u753B\\u6548\\u679C\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Skeleton, Avatar } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const style = {\\n        display: 'flex',\\n        alignItems: 'flex-start',\\n    };\\n\\n    const placeholder = (\\n        <div style={style}>\\n            <Skeleton.Avatar style={{ marginRight: 12 }} />\\n            <div>\\n                <Skeleton.Title style={{ width: 120, marginBottom: 12, marginTop: 12 }} />\\n                <Skeleton.Paragraph style={{ width: 240 }} rows={3} />\\n            </div>\\n        </div>\\n    );\\n\\n    return (\\n        <Skeleton placeholder={placeholder} loading={true} active>\\n            <div style={style}>\\n                <Avatar color=\\\"blue\\\" style={{ marginRight: 12 }}>\\n                    UI\\n                </Avatar>\\n                <div>\\n                    <h3>Semi UI</h3>\\n                    <p>Hi, Bytedance dance dance.</p>\\n                    <p>Hi, Bytedance dance dance.</p>\\n                    <p>Hi, Bytedance dance dance.</p>\\n                </div>\\n            </div>\\n        </Skeleton>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Skeleton\"), 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  }, \"active\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A\\u52A8\\u753B\\u6548\\u679C\"), 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  }, \"\\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  }, \"loading\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E3A true \\u65F6\\uFF0C\\u663E\\u793A\\u5360\\u4F4D\\u5143\\u7D20\\u3002\\u53CD\\u4E4B\\u5219\\u663E\\u793A\\u5B50\\u7EC4\\u4EF6\"), 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  }, \"placeholder\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u52A0\\u8F7D\\u7B49\\u5F85\\u65F6\\u7684\\u5360\\u4F4D\\u5143\\u7D20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"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(\"h3\", {\n    parentName: \"section\"\n  }, \"Skeleton.Avatar\"), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Skeleton.Image\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Skeleton.Title\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Skeleton.Button\"), \" \\u5927\\u90E8\\u5206API \\u4E0E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Skeleton.Avatar\"), \" \\u76F8\\u540C\\u3002\\u5176\\u4E2D shape \\u4EC5 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Skeleton.Avatar\\u652F\\u6301\"))), 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  }, \"\\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  }, \"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  }, \"medium\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"large\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"extra-large\")), 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  }, \"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  }, \"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(\"h3\", {\n    parentName: \"section\"\n  }, \"Skeleton.Paragraph\"), 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  }, \"\\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  }, \"rows\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u6BB5\\u843D\\u5360\\u4F4D\\u56FE\\u7684\\u884C\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"4\")), 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(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E0D\\u53D8\\u7684\\u56FA\\u5B9A\\u5185\\u5BB9\\u76F4\\u63A5\\u5C55\\u793A\\u56FA\\u5B9A\\u5185\\u5BB9\\uFF0C\\u53EF\\u53D8\\u7684\\u5185\\u5BB9\\u4F7F\\u7528\\u9AA8\\u67B6\\u5C4F\\u5C55\\u793A\"))), 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/feedback/skeleton","next":{"fields":{"slug":"en-US/feedback/spin"},"id":"1d6c7b35-2d1a-5c51-9225-f7a0040735fc","frontmatter":{"title":"Spin","localeCode":"en-US","icon":"doc-spin","showNew":null}},"previous":{"fields":{"slug":"en-US/feedback/skeleton"},"id":"d2f16a35-9161-58c4-bf89-f8f898788ae9","frontmatter":{"title":"Skeleton","localeCode":"en-US","icon":"doc-skeleton","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}