{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/card","result":{"data":{"current":{"frontmatter":{"title":"Card 卡片","order":65,"brief":"常规的卡片容器，可以承载标题、段落、图片、列表等内容。","icon":"doc-card"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基础卡片","title":"基础卡片"},{"url":"#简洁卡片","title":"简洁卡片"},{"url":"#封面","title":"封面"},{"url":"#边线和外边框","title":"边线和外边框"},{"url":"#阴影","title":"阴影"},{"url":"#更灵活的内容展示","title":"更灵活的内容展示"},{"url":"#内部卡片","title":"内部卡片"},{"url":"#栅格卡片","title":"栅格卡片"},{"url":"#内置预加载","title":"内置预加载"},{"url":"#更丰富的预加载效果","title":"更丰富的预加载效果"},{"url":"#带页签的卡片","title":"带页签的卡片"},{"url":"#卡片操作区","title":"卡片操作区"},{"url":"#卡片组","title":"卡片组"},{"url":"#网格型卡片组","title":"网格型卡片组"},{"url":"#api-参考","title":"API 参考"}]},{"url":"#accessibility","title":"Accessibility"},{"url":"#文案规范","title":"文案规范"},{"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\": 65,\n  \"category\": \"展示类\",\n  \"title\": \"Card 卡片\",\n  \"subTitle\": \"卡片\",\n  \"icon\": \"doc-card\",\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 { Card } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u7840\\u5361\\u7247\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u7840\\u5361\\u7247\\u5305\\u542B\\u6807\\u9898\\u3001\\u5185\\u5BB9\\u7B49\\u90E8\\u5206\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Card, Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const { Text } = Typography;\\n  \\n    return (\\n        <Card \\n            title='Semi Design' \\n            style={{ maxWidth: 360 }}\\n            headerExtraContent={\\n                <Text link>\\n                    \\u66F4\\u591A\\n                </Text>\\n            }\\n        >\\n            Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u3002\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u5305\\u542B\\u8BBE\\u8BA1\\u8BED\\u8A00\\u4EE5\\u53CA\\u4E00\\u6574\\u5957\\u53EF\\u590D\\u7528\\u7684\\u524D\\u7AEF\\u7EC4\\u4EF6\\uFF0C\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u5E08\\u4E0E\\u5F00\\u53D1\\u8005\\u66F4\\u5BB9\\u6613\\u5730\\u6253\\u9020\\u9AD8\\u8D28\\u91CF\\u7684\\u3001\\u7528\\u6237\\u4F53\\u9A8C\\u4E00\\u81F4\\u7684\\u3001\\u7B26\\u5408\\u8BBE\\u8BA1\\u89C4\\u8303\\u7684 Web \\u5E94\\u7528\\u3002\\n        </Card>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7B80\\u6D01\\u5361\\u7247\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5361\\u7247\\u53EF\\u4EE5\\u53EA\\u8BBE\\u7F6E\\u5185\\u5BB9\\u533A\\u57DF\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Card, Popover, Avatar } from '@douyinfe/semi-ui';\\nimport { IconInfoCircle } from '@douyinfe/semi-icons';\\n\\nfunction Demo() {\\n    const { Meta } = Card;\\n\\n    return (\\n        <>\\n            <Card style={{ maxWidth: 360 }} >\\n                Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u3002\\n            </Card>\\n            <br />\\n            <Card \\n                style={{ maxWidth: 360 }} \\n                bodyStyle={{ \\n                    display: 'flex',\\n                    alignItems: 'center',\\n                    justifyContent: 'space-between'\\n                }}\\n            >\\n                <Meta \\n                    title=\\\"Semi Doc\\\" \\n                    avatar={\\n                        <Avatar \\n                            alt='Card meta img'\\n                            size=\\\"default\\\"\\n                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'\\n                        />\\n                    }\\n                />\\n                <Popover\\n                    position='top'\\n                    showArrow\\n                    content={\\n                        <article style={{ padding: 6 }}>\\n                            \\u8FD9\\u662F\\u4E00\\u4E2A Card\\n                        </article>\\n                    }\\n                >\\n                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>\\n                </Popover>\\n            </Card>\\n        </>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5C01\\u9762\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"cover\"), \" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u5C01\\u9762\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Card } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const { Meta } = Card;\\n\\n    return (\\n        <Card\\n            style={{ maxWidth: 300 }}\\n            cover={ \\n                <img \\n                    alt=\\\"example\\\" \\n                    src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo2.jpeg\\\" \\n                />\\n            }\\n        >\\n            <Meta title=\\\"\\u5361\\u7247\\u5C01\\u9762\\\" />\\n        </Card>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8FB9\\u7EBF\\u548C\\u5916\\u8FB9\\u6846\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bordered\"), \" \\u8BBE\\u7F6E\\u5361\\u7247\\u662F\\u5426\\u6709\\u5916\\u8FB9\\u6846\\uFF0C\\u9ED8\\u8BA4\\u4E3A true \\u3002\\u540C\\u65F6\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"headerLine\"), \" \\u8BBE\\u7F6E\\u5185\\u5BB9\\u533A\\u548C\\u6807\\u9898\\u533A\\u662F\\u5426\\u6709\\u8FB9\\u7EBF\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"footerLine\"), \" \\u8BBE\\u7F6E\\u5185\\u5BB9\\u533A\\u548C\\u9875\\u5C3E\\u533A\\u662F\\u5426\\u6709\\u8FB9\\u7EBF\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Card } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    return (\\n        <div \\n            style={{\\n                display: 'inline-block',\\n                padding: 20,\\n                backgroundColor: 'var(--semi-color-fill-0)'\\n            }}\\n        >\\n            <Card \\n                style={{ maxWidth: 360 }}\\n                bordered={false}\\n                headerLine={true}\\n                title='Semi Design'\\n            >\\n                Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u3002\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u5305\\u542B\\u8BBE\\u8BA1\\u8BED\\u8A00\\u4EE5\\u53CA\\u4E00\\u6574\\u5957\\u53EF\\u590D\\u7528\\u7684\\u524D\\u7AEF\\u7EC4\\u4EF6\\uFF0C\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u5E08\\u4E0E\\u5F00\\u53D1\\u8005\\u66F4\\u5BB9\\u6613\\u5730\\u6253\\u9020\\u9AD8\\u8D28\\u91CF\\u7684\\u3001\\u7528\\u6237\\u4F53\\u9A8C\\u4E00\\u81F4\\u7684\\u3001\\u7B26\\u5408\\u8BBE\\u8BA1\\u89C4\\u8303\\u7684 Web \\u5E94\\u7528\\u3002\\n            </Card>\\n        </div>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9634\\u5F71\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"shadows\"), \" \\u8BBE\\u7F6E\\u663E\\u793A\\u9634\\u5F71\\u7684\\u65F6\\u673A\\uFF0C\\u53EF\\u9009\\u503C\\u4E3A: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hover\"), \"\\uFF08hover \\u65F6\\u663E\\u793A\\u9634\\u5F71\\uFF09\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"always\"), \"\\uFF08\\u59CB\\u7EC8\\u663E\\u793A\\u9634\\u5F71\\uFF09\\uFF0C\\u5982\\u679C\\u4E0D\\u8BBE\\u7F6E\\u8BE5\\u5C5E\\u6027\\u5219\\u6CA1\\u6709\\u9634\\u5F71\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Card, Avatar, Popover } from '@douyinfe/semi-ui';\\nimport { IconInfoCircle } from '@douyinfe/semi-icons';\\n\\nfunction Demo() {\\n    const { Meta } = Card;\\n\\n    return (\\n        <div>\\n            <Card \\n                shadows='hover'\\n                style={{ maxWidth: 360 }} \\n                bodyStyle={{ \\n                    display: 'flex',\\n                    alignItems: 'center',\\n                    justifyContent: 'space-between'\\n                }}\\n            >\\n                <Meta \\n                    title=\\\"Semi Doc\\\" \\n                    avatar={\\n                        <Avatar \\n                            alt='Card meta img'\\n                            size=\\\"default\\\"\\n                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'\\n                        />\\n                    }\\n                />\\n                <Popover\\n                    position='top'\\n                    showArrow\\n                    content={\\n                        <article style={{ padding: 6 }}>\\n                            \\u8FD9\\u662F\\u4E00\\u4E2A Card\\n                        </article>\\n                    }\\n                >\\n                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>\\n                </Popover>\\n            </Card>\\n            <br/>\\n            <Card \\n                shadows='always'\\n                style={{ maxWidth: 360 }} \\n                bodyStyle={{ \\n                    display: 'flex',\\n                    alignItems: 'center',\\n                    justifyContent: 'space-between'\\n                }}\\n            >\\n                <Meta \\n                    title=\\\"Semi Doc\\\" \\n                    avatar={\\n                        <Avatar \\n                            alt='Card meta img'\\n                            size=\\\"default\\\"\\n                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'\\n                        />\\n                    }\\n                />\\n                <Popover\\n                    position='top'\\n                    showArrow\\n                    content={\\n                        <article style={{ padding: 6 }}>\\n                            \\u8FD9\\u662F\\u4E00\\u4E2A Card\\n                        </article>\\n                    }\\n                >\\n                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>\\n                </Popover>\\n            </Card>\\n        </div>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u66F4\\u7075\\u6D3B\\u7684\\u5185\\u5BB9\\u5C55\\u793A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u5229\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Card.Meta\"), \" \\u652F\\u6301\\u66F4\\u7075\\u6D3B\\u7684\\u5185\\u5BB9\\uFF0C\\u5141\\u8BB8\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"title\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"avatar\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"description\"), \"\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Card, Avatar, Space, Button, Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const { Meta } = Card;\\n    const { Text } = Typography;\\n\\n    return (\\n        <Card\\n            style={{ maxWidth: 340 }}\\n            title={\\n                <Meta \\n                    title=\\\"Semi Doc\\\" \\n                    description=\\\"\\u5168\\u9762\\u3001\\u6613\\u7528\\u3001\\u4F18\\u8D28\\\" \\n                    avatar={\\n                        <Avatar \\n                            alt='Card meta img'\\n                            size=\\\"default\\\"\\n                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'\\n                        />\\n                    }\\n                />\\n            }\\n            headerExtraContent={\\n                <Text link>\\n                    More\\n                </Text>\\n            }\\n            cover={ \\n                <img \\n                    alt=\\\"example\\\" \\n                    src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg\\\" \\n                />\\n            }\\n            footerLine={ true }\\n            footerStyle={{ display: 'flex', justifyContent: 'flex-end' }}\\n            footer={\\n                <Space>\\n                    <Button theme='borderless' type='primary'>\\u7CBE\\u9009\\u6848\\u4F8B</Button>\\n                    <Button theme='solid' type='primary'>\\u5F00\\u59CB\\u4F7F\\u7528</Button>\\n                </Space>\\n            }\\n        >\\n            Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u3002\\n        </Card>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5185\\u90E8\\u5361\\u7247\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5361\\u7247\\u5185\\u90E8\\u53EF\\u4EE5\\u5D4C\\u5957\\u5176\\u4ED6\\u5361\\u7247\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"\\nimport React from 'react';\\nimport { Card, Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const { Text } = Typography;\\n  \\n    return (\\n        <Card title='Card title' >\\n            <Card \\n                title='Inner Card title'\\n                style={{ marginBottom: 20 }}\\n                headerExtraContent={\\n                    <Text link>\\n                        More\\n                    </Text>\\n                }\\n            >\\n                Inner Card content\\n            </Card>\\n            <Card \\n                title='Inner Card title'\\n                headerExtraContent={\\n                    <Text link>\\n                        More\\n                    </Text>\\n                }\\n            >\\n                Inner Card content\\n            </Card>\\n        </Card>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6805\\u683C\\u5361\\u7247\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728\\u7CFB\\u7EDF\\u6982\\u89C8\\u9875\\u9762\\u5E38\\u5E38\\u548C\\u6805\\u683C\\u8FDB\\u884C\\u914D\\u5408\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Card, Row, Col } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    return (\\n        <div \\n            style={{\\n                backgroundColor: 'var(--semi-color-fill-0)', \\n                padding: 20\\n            }}\\n        >\\n            <Row gutter={[16, 16]}>\\n                <Col span={8}>\\n                    <Card title='Card Title' bordered={false} >\\n                        Card Content\\n                    </Card>\\n                </Col>\\n                <Col span={8}>\\n                    <Card title='Card Title' bordered={false} >\\n                        Card Content\\n                    </Card>\\n                </Col>\\n                <Col span={8}>\\n                    <Card title='Card Title' bordered={false} >\\n                        Card Content\\n                    </Card>\\n                </Col>\\n            </Row>\\n            <Row gutter={[16, 16]}>\\n                <Col span={16}>\\n                    <Card title='Card Title' bordered={false} >\\n                        Card Content\\n                    </Card>\\n                </Col>\\n                <Col span={8}>\\n                    <Card title='Card Title' bordered={false} >\\n                        Card Content\\n                    </Card>\\n                </Col>\\n            </Row>\\n        </div>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5185\\u7F6E\\u9884\\u52A0\\u8F7D\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Card\"), \" \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"loading\"), \" \\u5C5E\\u6027\\u6765\\u8BBE\\u7F6E\\u5361\\u7247\\u5185\\u5BB9\\u533A\\u662F\\u5426\\u663E\\u793A\\u5360\\u4F4D\\u5143\\u7D20\\uFF0C\\u5F53\\u5B83\\u4E3A true \\u65F6\\u5C06\\u663E\\u793A\\u5360\\u4F4D\\u5143\\u7D20\\uFF0C\\u53CD\\u4E4B\\u5219\\u4E0D\\u663E\\u793A\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState } from 'react';\\nimport { Card, Switch } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const [loading, setLoading] = useState(true);\\n    const { Meta } = Card;\\n\\n    return (\\n        <>\\n            <Switch onChange={ v => setLoading(!v) } />\\n            <br />\\n            <br />\\n            <Card \\n                style={{ maxWidth: 360 }}\\n                loading={ loading }\\n            >\\n                <Meta \\n                    title=\\\"Semi Doc\\\" \\n                    description=\\\"\\u5168\\u9762\\u3001\\u6613\\u7528\\u3001\\u4F18\\u8D28\\\"\\n                />\\n            </Card>\\n        </>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u66F4\\u4E30\\u5BCC\\u7684\\u9884\\u52A0\\u8F7D\\u6548\\u679C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Card\"), \" \\u81EA\\u5E26\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"loading\"), \" \\u5C5E\\u6027\\u53EA\\u80FD\\u8BBE\\u7F6E\\u5185\\u5BB9\\u533A\\u7684\\u9884\\u52A0\\u8F7D\\u6548\\u679C\\uFF0C\\u5982\\u679C\\u4F60\\u60F3\\u8981\\u8BBE\\u7F6E\\u5176\\u4ED6\\u90E8\\u5206\\u7684\\u9884\\u52A0\\u8F7D\\uFF0C\\u6216\\u8005\\u81EA\\u5B9A\\u4E49\\u66F4\\u4E30\\u5BCC\\u7684\\u9884\\u52A0\\u8F7D\\u6548\\u679C\\uFF0C\\u4F60\\u53EF\\u4EE5\\u7ED3\\u5408 Skeleton \\u7EC4\\u4EF6\\u6765\\u5B9E\\u73B0\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState } from 'react';\\nimport { Card, Switch, Skeleton, Avatar, Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const [loading, setLoading] = useState(true);\\n    const { Meta } = Card;\\n    const { Title, Paragraph, Image } = Skeleton;\\n\\n    return (\\n        <>\\n            <Switch onChange={ v => setLoading(!v) } />\\n            <br />\\n            <br />\\n            <Card\\n                style={{ maxWidth: 300 }}\\n                title={\\n                    <Meta \\n                        title={\\n                            <Skeleton\\n                                style={{ width: 80 }}\\n                                placeholder={<Title />}\\n                                loading={loading}\\n                            >\\n                                <Typography.Title heading={5}>\\n                                    Semi Doc\\n                                </Typography.Title>\\n                            </Skeleton>\\n                        } \\n                        description={\\n                            <Skeleton \\n                                style={{ width: 150, marginTop: 12 }} \\n                                placeholder={<Paragraph rows={1} />} \\n                                loading={loading}\\n                            >\\n                                <Typography.Text>\\n                                    \\u5168\\u9762\\u3001\\u6613\\u7528\\u3001\\u4F18\\u8D28\\n                                </Typography.Text>\\n                            </Skeleton>\\n                        }\\n                        avatar={\\n                            <Skeleton placeholder={<Skeleton.Avatar />} loading={loading}>\\n                                <Avatar \\n                                    alt='Card meta img'\\n                                    size=\\\"default\\\"\\n                                    src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'\\n                                />\\n                            </Skeleton>\\n                        }\\n                    />\\n                }\\n                headerExtraContent={\\n                    <Skeleton style={{ width: 50 }} placeholder={<Paragraph rows={1} />} loading={loading}>\\n                        <Typography.Text link>\\n                            More\\n                        </Typography.Text>\\n                    </Skeleton>\\n                }\\n                cover={ \\n                    <Skeleton style={{ maxWidth: '100%', height: 220 }} placeholder={<Image />} loading={loading}>\\n                        <img \\n                            alt=\\\"example\\\" \\n                            src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg\\\" \\n                        />\\n                    </Skeleton> \\n                }\\n            >\\n            </Card>\\n        </>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5E26\\u9875\\u7B7E\\u7684\\u5361\\u7247\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u7ED3\\u5408 Tabs \\u7EC4\\u4EF6\\uFF0C\\u5B9E\\u73B0\\u5E26\\u9875\\u7B7E\\u7684\\u5361\\u7247\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Card, Tabs, TabPane } from '@douyinfe/semi-ui';\\n\\nfunction demo() {\\n    return (\\n        <Card title='Card title'>\\n            <Tabs \\n                type=\\\"line\\\" \\n                style={{\\n                    marginTop: -20,\\n                    marginBottom: -20\\n                }}\\n            >\\n                <TabPane tab=\\\"Tab 1\\\" itemKey=\\\"1\\\">\\n                    <p>content1</p>\\n                    <p>content1</p>\\n                    <p>content1</p>\\n                </TabPane>\\n                <TabPane tab=\\\"Tab 2\\\" itemKey=\\\"2\\\">\\n                    <p>content2</p>\\n                    <p>content2</p>\\n                    <p>content2</p>\\n                </TabPane>\\n            </Tabs>\\n        </Card>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5361\\u7247\\u64CD\\u4F5C\\u533A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"actions\"), \" \\u63A5\\u6536 ReactNode \\u6570\\u7EC4\\uFF0C\\u5143\\u7D20\\u95F4\\u5C06\\u4EE5 12px \\u7684\\u6C34\\u5E73\\u95F4\\u8DDD\\u5C55\\u793A\\u4E8E\\u5185\\u5BB9\\u533A\\u5E95\\u90E8\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Card, Rating } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const { Meta } = Card;\\n\\n    return (\\n        <Card\\n            style={{ maxWidth: 300 }}\\n            actions={[    \\n                // eslint-disable-next-line react/jsx-key\\n                <Rating size='small' defaultValue={4}/>\\n            ]}\\n            headerLine={ false }\\n            cover={ \\n                <img \\n                    alt=\\\"example\\\" \\n                    src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg\\\" \\n                />\\n            }\\n        >\\n            <Meta \\n                title=\\\"Semi Doc\\\" \\n                description=\\\"\\u5168\\u9762\\u3001\\u6613\\u7528\\u3001\\u4F18\\u8D28\\\" \\n            />\\n        </Card>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5361\\u7247\\u7EC4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CardGroup\"), \" \\u4E2D\\u7684\\u5361\\u7247\\u5C06\\u5448\\u73B0\\u4E3A\\u7B49\\u95F4\\u8DDD\\u6392\\u5217\\uFF0C\\u5229\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"spacing\"), \" \\u5C5E\\u6027\\u53EF\\u4EE5\\u8BBE\\u7F6E\\u5361\\u7247\\u95F4\\u8DDD\\u5927\\u5C0F\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState } from 'react';\\nimport { Card, CardGroup, Typography, Slider } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const { Text } = Typography;\\n    const [ spacing, setSpacing ] = useState(12);\\n\\n    return (\\n        <>\\n            <Text>\\u6ED1\\u52A8\\u8C03\\u8282 Card \\u95F4\\u8DDD</Text>\\n            <Slider \\n                defaultValue={12}\\n                max={40}\\n                min={10}\\n                style={{ width: 360 }}\\n                onChange={v=> setSpacing(v)}\\n            />\\n            <br />\\n            <CardGroup spacing={spacing}>\\n                {\\n                    new Array(8).fill(null).map((v, idx)=>(\\n                        <Card \\n                            key={idx}\\n                            shadows='hover'\\n                            title='Card title'\\n                            headerLine={false}\\n                            style={{ width: 260 }}\\n                            headerExtraContent={\\n                                <Text link>\\n                                    More\\n                                </Text>\\n                            }\\n                        >\\n                            <Text>Card content</Text>\\n                        </Card>\\n                    ))\\n                }\\n            </CardGroup>\\n        </>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7F51\\u683C\\u578B\\u5361\\u7247\\u7EC4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CardGroup\"), \" \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" \\u5C5E\\u6027\\uFF0C\\u53EF\\u4EE5\\u5C06\\u5361\\u7247\\u7EC4\\u8BBE\\u7F6E\\u4E3A\\u7F51\\u683C\\u578B\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Card, CardGroup, Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const { Text } = Typography;\\n\\n    return (\\n        <CardGroup type='grid'>\\n            {\\n                new Array(7).fill(null).map((v, idx)=>(\\n                    <Card \\n                        key={idx}\\n                        shadows='hover'\\n                        title='Card title'\\n                        headerLine={false}\\n                        style={{ width: 260 }}\\n                        headerExtraContent={\\n                            <Text link>\\n                                More\\n                            </Text>\\n                        }\\n                    >\\n                        <Text>Card content</Text>\\n                    </Card>\\n                ))\\n            }     \\n        </CardGroup>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Card\")), 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(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"actions\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5361\\u7247\\u64CD\\u4F5C\\u7EC4\\uFF0C\\u4F4D\\u4E8E\\u5361\\u7247\\u5185\\u5BB9\\u533A\\u7684\\u5E95\\u90E8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array<ReactNode\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bodyStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5361\\u7247\\u5185\\u5BB9\\u533A\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bordered\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u8BBE\\u7F6E\\u5361\\u7247\\u7684\\u5916\\u8FB9\\u6846\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), 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  }, \"\\u5361\\u7247\\u7684\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"cover\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5361\\u7247\\u5C01\\u9762\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"headerExtraContent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5361\\u7247\\u6807\\u9898\\u53F3\\u4FA7\\u7684\\u989D\\u5916\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"footer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5361\\u7247\\u9875\\u811A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"footerLine\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5361\\u7247\\u9875\\u811A\\u533A\\u4E0E\\u5185\\u5BB9\\u533A\\u662F\\u5426\\u6709\\u8FB9\\u7EBF\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"footerStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5361\\u7247\\u9875\\u811A\\u533A\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"header\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5361\\u7247\\u5934\\u90E8\\uFF0C\\u82E5\\u4F20\\u5165\\u5C06\\u8986\\u76D6 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"title\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"headerExtraContent\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"headerLine\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5361\\u7247\\u6807\\u9898\\u533A\\u4E0E\\u5185\\u5BB9\\u533A\\u662F\\u5426\\u6709\\u8FB9\\u7EBF\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"headerStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5361\\u7247\\u6807\\u9898\\u533A\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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  }, \"\\u662F\\u5426\\u8BBE\\u7F6E\\u52A0\\u8F7D\\u65F6\\u7684\\u5360\\u4F4D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shadows\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u663E\\u793A\\u9634\\u5F71\\u7684\\u65F6\\u673A\\uFF0C\\u5982\\u679C\\u4E0D\\u8BBE\\u7F6E\\u8BE5\\u5C5E\\u6027\\u5219\\u6CA1\\u6709\\u9634\\u5F71\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"hover\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"always\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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  }, \"\\u5361\\u7247\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5361\\u7247\\u6807\\u9898\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"CardGroup\")), 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(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), 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  }, \"\\u5361\\u7247\\u7EC4\\u7684\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"spacing\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u95F4\\u8DDD\\u5C3A\\u5BF8\\uFF0C\\u652F\\u6301\\u6570\\u503C\\u6216\\u6570\\u7EC4\\uFF0C\\u6570\\u7EC4\\u5F62\\u5982: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"[\\u6C34\\u5E73\\u95F4\\u8DDD,\\u5782\\u76F4\\u95F4\\u8DDD]\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number \", \"|\", \" number[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"12px\"), 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  }, \"\\u5361\\u7247\\u7EC4\\u7684\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u4EE5\\u628A\\u5361\\u7247\\u7EC4\\u8BBE\\u7F6E\\u4E3A\\u7F51\\u683C\\u578B\\uFF0C\\u8BBE\\u7F6E\\u5B8C\\u8BE5\\u5C5E\\u6027\\u540E\\u5C06\\u8986\\u76D6 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"spacing\"), \" \\u5C5E\\u6027\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"grid\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Card.Meta\")), 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(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"avatar\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5934\\u50CF\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"description\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u63CF\\u8FF0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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  }, \"\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6807\\u9898\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Card \\u652F\\u6301\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" \\u6765\\u8868\\u793A\\u8BE5 Card \\u4F5C\\u7528\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Card loading \\u65F6\\uFF0C\\u5C06\\u5F00\\u542F \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-busy\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Card \\u4E3A\\u5BB9\\u5668\\u578B\\u7EC4\\u4EF6\\uFF0C\\u5361\\u7247\\u5185\\u90E8\\u7684\\u4EFB\\u4F55\\u5143\\u7D20\\u9700\\u8981\\u9075\\u5FAA\\u5404\\u81EA\\u7684\\u53EF\\u8BBF\\u95EE\\u6027\\u6307\\u5357\"))), 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  }, \"\\u5361\\u7247\\u6807\\u9898\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5361\\u7247\\u6807\\u9898\\u5E94\\u5177\\u6709\\u4FE1\\u606F\\u63CF\\u8FF0\\u6027\\uFF0C\\u805A\\u7126\\u6700\\u91CD\\u8981\\u7684\\u4FE1\\u606F\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5C3D\\u91CF\\u5C06\\u6807\\u9898\\u9650\\u5236\\u5728 1 \\u4E2A\\u77ED\\u8BED\\u6216\\u53E5\\u6BB5\\u4E2D\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5361\\u7247\\u6807\\u9898\\u5E94\\u53E5\\u5B50\\u5927\\u5C0F\\u5199\\u4E66\\u5199\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E0D\\u8981\\u4EE5\\u6807\\u70B9\\u7B26\\u53F7\\u7ED3\\u5C3E\\uFF08\\u9664\\u4E86\\u95EE\\u53F7\\uFF09\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6B63\\u6587\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u53EF\\u64CD\\u4F5C\\u7684\\uFF1A\\u4F7F\\u7528\\u7948\\u4F7F\\u53E5\\u800C\\u4E0D\\u662F\\u201C\\u4F60\\u53EF\\u4EE5\\u201D\\u6765\\u63CF\\u8FF0\\u6B63\\u6587\\uFF0C\\u53EF\\u4EE5\\u66F4\\u597D\\u7684\\u544A\\u8BC9\\u7528\\u6237\\u53EF\\u4EE5\\u505A\\u4EC0\\u4E48\")))), 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  }, \"\\u2705 \\u63A8\\u8350\\u7528\\u6CD5\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C \\u4E0D\\u63A8\\u8350\\u7528\\u6CD5\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Get order progress for details\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"You can get order progress for details\")))), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u603B\\u662F\\u4F18\\u5148\\u8BF4\\u6700\\u91CD\\u8981\\u7684\\u4FE1\\u606F\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F7F\\u7528 \\u201CNeed to\\u201D\\u800C\\u4E0D\\u662F\\u201Dmust\\u201C\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u76F8\\u5173\\u7269\\u6599\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"semi-material-list\", {\n    code: \"41, 179\"\n  }))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/card","next":{"fields":{"slug":"en-US/show/carousel"},"id":"cc5d99b2-9f49-5026-aa72-a4c35ea71ea8","frontmatter":{"title":"Carousel","localeCode":"en-US","icon":"doc-carousel","showNew":null}},"previous":{"fields":{"slug":"en-US/show/card"},"id":"0b4f1b96-1aa5-5632-ac07-5bb1fcaf2012","frontmatter":{"title":"Card","localeCode":"en-US","icon":"doc-card","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}