{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/descriptions","result":{"data":{"current":{"frontmatter":{"title":"Descriptions 描述列表","order":69,"brief":"描述列表用于键值对的呈现。","icon":"doc-descriptions"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#设置对齐方式","title":"设置对齐方式"},{"url":"#jsx-写法","title":"JSX 写法"},{"url":"#设置布局模式","title":"设置布局模式"},{"url":"#双行显示","title":"双行显示"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#descriptions","title":"Descriptions"},{"url":"#dataitem","title":"DataItem"},{"url":"#descriptionitem","title":"DescriptionItem"}]},{"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\": 69,\n  \"category\": \"展示类\",\n  \"title\": \"Descriptions 描述列表\",\n  \"icon\": \"doc-descriptions\",\n  \"dir\": \"column\",\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 { Descriptions } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"props.data\"), \" \\u4EE5\\u952E\\u503C\\u5BF9 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{ key: value }\"), \" \\u6570\\u7EC4\\u65B9\\u5F0F\\u4F20\\u5165\\u6570\\u636E\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"key\\u3001value \\u5747\\u652F\\u6301 ReactNode \\u7C7B\\u578B\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4F20\\u5165\\u5B57\\u7B26\\u4E32\\u6216\\u66F4\\u9AD8\\u81EA\\u7531\\u5EA6\\u7684 ReactNode \\u81EA\\u7531\\u5B9A\\u5236\\u6E32\\u67D3\\u6548\\u679C\"), 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 { Descriptions, Tag } from '@douyinfe/semi-ui';\\nimport { IconArrowUp } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const data = [\\n        { key: '\\u5B9E\\u9645\\u7528\\u6237\\u6570\\u91CF', value: '1,480,000' },\\n        { key: '7\\u5929\\u7559\\u5B58', value: <div>98%<IconArrowUp size=\\\"small\\\" style={{ color: 'var(--semi-color-success)', marginLeft: '2px' }} /></div> },\\n        { key: '\\u5B89\\u5168\\u7B49\\u7EA7', value: '3\\u7EA7' },\\n        { key: '\\u5782\\u7C7B\\u6807\\u7B7E', value: <Tag style={{ margin: 0 }}>\\u7535\\u5546</Tag> },\\n        { key: '\\u8BA4\\u8BC1\\u72B6\\u6001', value: '\\u672A\\u8BA4\\u8BC1' },\\n    ];\\n    return <Descriptions data={data} />;\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E\\u5BF9\\u9F50\\u65B9\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"align\"), \" \\u503C\\u9009\\u62E9\\u5BF9\\u9F50\\u65B9\\u5F0F\\uFF0C\\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"center\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"justify\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"left\"), \", \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"plain\"), \"\\u3002\\u9ED8\\u8BA4\\u5BF9\\u9F50\\u65B9\\u5F0F\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"center\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5F53 row \\u4E3A true \\u65F6\\uFF0C\\u8BE5\\u914D\\u7F6E\\u65E0\\u6548\"), 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 { Descriptions, Tag, Card } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const data = [\\n        { key: '\\u5B9E\\u9645\\u7528\\u6237\\u6570\\u91CF', value: '1,480,000' },\\n        { key: '7\\u5929\\u7559\\u5B58', value: '98%' },\\n        { key: '\\u5B89\\u5168\\u7B49\\u7EA7', value: '3\\u7EA7' },\\n        { key: '\\u5782\\u7C7B\\u6807\\u7B7E', value: <Tag style={{ margin: 0 }}>\\u7535\\u5546</Tag> },\\n        { key: '\\u8BA4\\u8BC1\\u72B6\\u6001', value: '\\u672A\\u8BA4\\u8BC1' },\\n    ];\\n    const style = {\\n        margin: '10px',\\n    };\\n    return (\\n        <>\\n            <div style={{ display: 'flex', flexWrap: 'wrap' }}>\\n                <Card shadows='always' style={style}>\\n                    <Descriptions align=\\\"center\\\" data={data} />\\n                </Card>\\n                <Card shadows='always' style={style}>\\n                    <Descriptions align=\\\"justify\\\" data={data} />\\n                </Card>\\n                <Card shadows='always' style={style}>\\n                    <Descriptions align=\\\"left\\\" data={data} />\\n                </Card>\\n                <Card shadows='always' style={style}>\\n                    <Descriptions align=\\\"plain\\\" data={data} />\\n                </Card>\\n            </div>\\n        </>\\n    );\\n};\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"JSX \\u5199\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9664\\u4E86\\u901A\\u8FC7 props.data \\u58F0\\u660E\\u6570\\u636E\\u5916\\uFF0C\\u8FD8\\u53EF\\u4EE5\\u901A\\u8FC7 Children JSX \\u5199\\u6CD5\\u58F0\\u660E\\u6570\\u636E\\uFF08\\u5728 v1.17.0 \\u7248\\u672C\\u540E\\u652F\\u6301\\uFF09\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u6CE8\\u610F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Description.Item\"), \" \\u5E94\\u5F53\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Description\"), \" \\u7684\\u76F4\\u63A5\\u5B50\\u5143\\u7D20\\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 { Descriptions } from '@douyinfe/semi-ui';\\n\\n() => {\\n    return (\\n        <Descriptions>\\n            <Descriptions.Item itemKey=\\\"\\u5B9E\\u9645\\u7528\\u6237\\u6570\\u91CF\\\">1,480,000</Descriptions.Item>\\n            <Descriptions.Item itemKey=\\\"7\\u5929\\u7559\\u5B58\\\">98%</Descriptions.Item>\\n            <Descriptions.Item itemKey=\\\"\\u5B89\\u5168\\u7B49\\u7EA7\\\">3\\u7EA7</Descriptions.Item>\\n            <Descriptions.Item itemKey=\\\"\\u5782\\u7C7B\\u6807\\u7B7E\\\">\\u7535\\u5546</Descriptions.Item>\\n            <Descriptions.Item itemKey=\\\"\\u8BA4\\u8BC1\\u72B6\\u6001\\\">\\u672A\\u8BA4\\u8BC1</Descriptions.Item>\\n        </Descriptions>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E\\u5E03\\u5C40\\u6A21\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"layout\"), \" \\u8BBE\\u7F6E\\u5E03\\u5C40\\u6A21\\u5F0F\\uFF08v2.54.0 \\u540E\\u652F\\u6301\\uFF09, \\u9ED8\\u8BA4\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"vertical\"), \" \\u7EB5\\u5411\\u5E03\\u5C40 \\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 { Descriptions, Space, Tag } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const data = [\\n        { key: '\\u6296\\u97F3\\u53F7', value: 'SemiDesign' },\\n        { key: '\\u4E3B\\u64AD\\u7C7B\\u578B', value: '\\u81EA\\u7531\\u4E3B\\u64AD' },\\n        { key: '\\u5B89\\u5168\\u7B49\\u7EA7', value: '3\\u7EA7' },\\n        { key: '\\u5782\\u7C7B\\u6807\\u7B7E', value: <Space>\\n            <Tag size=\\\"small\\\" shape='circle' color='amber'>\\u4E92\\u8054\\u7F51\\u8D44\\u8BAF</Tag>\\n            <Tag size=\\\"small\\\" shape='circle' color='violet'>\\u7F16\\u7A0B</Tag>\\n        </Space>\\n        },\\n        { key: '\\u4F5C\\u54C1\\u6570\\u91CF', value: '88888888' },\\n        { key: '\\u8BA4\\u8BC1\\u72B6\\u6001', value: '\\u8FD9\\u662F\\u4E00\\u4E2A\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u7684\\u503C', span: 3 },\\n    ];\\n    return (\\n        <> \\n            <Descriptions layout='vertical' align='plain' data={data} column={4} />\\n        </>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6A2A\\u5411\\u5E03\\u5C40\\u53EF\\u8BBE\\u7F6E layout\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"horizontal\"), \" \\u3002\\u5F53\\u8BBE\\u7F6E horizontal \\u65F6\\uFF0C\\u53EF\\u914D\\u5408 column \\u6307\\u5B9A\\u6BCF\\u884C\\u6700\\u5927\\u5217\\u6570\"), 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 { Descriptions, Space, Tag } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const data = [\\n        { key: '\\u6296\\u97F3\\u53F7', value: 'SemiDesign' },\\n        { key: '\\u4E3B\\u64AD\\u7C7B\\u578B', value: '\\u81EA\\u7531\\u4E3B\\u64AD' },\\n        { key: '\\u5B89\\u5168\\u7B49\\u7EA7', value: '3\\u7EA7' },\\n        { key: '\\u5782\\u7C7B\\u6807\\u7B7E', value: <Tag size=\\\"small\\\" shape='circle' color='violet'>\\u7F16\\u7A0B</Tag>},\\n        { key: '\\u4F5C\\u54C1\\u6570\\u91CF', value: '88888888' },\\n        { key: '\\u8BA4\\u8BC1\\u72B6\\u6001', value: '\\u8FD9\\u662F\\u4E00\\u4E2A\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u7684\\u503C', span: 3 },\\n        { key: '\\u4E0A\\u6B21\\u76F4\\u64AD\\u65F6\\u95F4', value: '2024-05-01 12:00:00', span: 3 },\\n    ];\\n    return (\\n        <> \\n            <Descriptions layout='horizontal' align='plain' data={data} column={5} />\\n        </>\\n    );\\n};\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53CC\\u884C\\u663E\\u793A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"row\"), \" \\u53EF\\u9009\\u62E9\\u53CC\\u884C\\u663E\\u793A\\uFF0C\\u652F\\u6301\\u4E09\\u79CD\\u4E0D\\u540C\\u7684\\u5927\\u5C0F\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"small\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"medium\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"large\"), \"\\u3002\\u9ED8\\u8BA4\\u5927\\u5C0F\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"medium\"), \"\\uFF0C\\u6B64\\u65F6 align \\u914D\\u7F6E\\u4E0D\\u518D\\u751F\\u6548\"), 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 { Descriptions } from '@douyinfe/semi-ui';\\nimport { IconArrowUp } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const data = [\\n        { key: '\\u5B9E\\u9645\\u7528\\u6237\\u6570\\u91CF', value: '1,480,000' },\\n        {\\n            key: '7\\u5929\\u7559\\u5B58',\\n            value: (\\n                <span>\\n                    98%\\n                    <IconArrowUp size=\\\"small\\\" style={{ color: 'red', marginLeft: '4px' }} />\\n                </span>\\n            ),\\n        },\\n        { key: '\\u5B89\\u5168\\u7B49\\u7EA7', value: '3\\u7EA7' },\\n    ];\\n    const style = {\\n        boxShadow: 'var(--semi-shadow-elevated)',\\n        backgroundColor: 'var(--semi-color-bg-2)',\\n        borderRadius: '4px',\\n        padding: '10px',\\n        marginRight: '20px',\\n        width: '600px',\\n    };\\n    return (\\n        <div>\\n            <Descriptions data={data} row size=\\\"small\\\" style={style} />\\n            <br />\\n            <Descriptions data={data} row style={style} />\\n            <br />\\n            <Descriptions data={data} row size=\\\"large\\\" style={style} />\\n        </div>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Descriptions\"), 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  }, \"align\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u63CF\\u8FF0\\u5217\\u8868\\u7684\\u5BF9\\u9F50\\u65B9\\u5F0F\\uFF0C\\u53EF\\u9009 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"justify\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"plain\")), 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  }, \"center\"))), 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  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"data\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5217\\u8868\\u663E\\u793A\\u7684\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"DataItem[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u53CC\\u884C\\u663E\\u793A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"false\"))), 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\\u53CC\\u884C\\u663E\\u793A\\u65F6\\u7684\\u5217\\u8868\\u7684\\u5927\\u5C0F\\uFF0C\\u53EF\\u9009 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"medium\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"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  }, \"\\u5217\\u8868\\u7684\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"layout\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5217\\u8868\\u5E03\\u5C40\\u6A21\\u5F0F\\uFF0C\\u53EF\\u9009 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"vertical\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"horizontal\"), \"  \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v>=2.54.0\")), 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  }, \"vertical\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"horizontal\"), \" \\u6A2A\\u5411\\u5E03\\u5C40\\u4E0B\\uFF0C\\u6BCF\\u884C\\u7684\\u603B\\u5217\\u6570 \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v>=2.54.0\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"3\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"DataItem\"), 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  }, \"key\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u952E\\u503C\"), 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  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode \", \"|\", \" (() => ReactNode)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hidden\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u6570\\u636E\\u662F\\u5426\\u9700\\u8981\\u5C55\\u793A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"span\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5355\\u5143\\u683C\\u5E94\\u8DE8\\u8D8A\\u7684\\u5217\\u6570 \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v>=2.54.0\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"DescriptionItem\"), 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  }, \"itemKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u952E\\u503C\"), 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  }, \"hidden\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u6570\\u636E\\u662F\\u5426\\u9700\\u8981\\u5C55\\u793A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Item \\u5916\\u90E8wrapper: tr \\u7684\\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  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Item \\u5916\\u90E8wrapper: tr \\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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"span\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5355\\u5143\\u683C\\u5E94\\u8DE8\\u8D8A\\u7684\\u5217\\u6570 \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v>=2.54.0\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1\"))))), 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  }, \"\\u5B57\\u6BB5\\u540D\\u548C\\u503C\\u90FD\\u6309 Sentence case \\u539F\\u5219\\u4E66\\u5199\\u5927\\u5C0F\\u5199\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/descriptions","next":{"fields":{"slug":"en-US/show/dropdown"},"id":"5db7d50e-88c3-5a22-ab38-7a5b5cd69734","frontmatter":{"title":"Dropdown","localeCode":"en-US","icon":"doc-dropdown","showNew":null}},"previous":{"fields":{"slug":"en-US/show/descriptions"},"id":"3e6984c0-5495-5e92-88b5-273e78b46633","frontmatter":{"title":"Description","localeCode":"en-US","icon":"doc-descriptions","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}