{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/overflowlist","result":{"data":{"current":{"frontmatter":{"title":"OverflowList 折叠列表","order":77,"brief":"OverflowList 是一个行为组件，用于展示列表，并支持自适应来展示尽可能多的项目。因过长而溢出项目将折叠为一个元素。当检测到调整大小时，可见项将被重新计算。","icon":"doc-overflowList"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#折叠模式---默认","title":"折叠模式 - 默认"},{"url":"#折叠模式---方向","title":"折叠模式 - 方向"},{"url":"#折叠模式---最小展示的数目","title":"折叠模式 - 最小展示的数目"},{"url":"#滚动模式","title":"滚动模式"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#rendermodecollapse","title":"renderMode='collapse'"},{"url":"#rendermodescroll","title":"renderMode='scroll'"}]}]},"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\": 77,\n \"category\": \"展示类\",\n \"title\": \"OverflowList 折叠列表\",\n \"icon\": \"doc-overflowList\",\n \"brief\": \"OverflowList 是一个行为组件，用于展示列表，并支持自适应来展示尽可能多的项目。因过长而溢出项目将折叠为一个元素。当检测到调整大小时，可见项将被重新计算。\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { OverflowList } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u6298\\u53E0\\u6A21\\u5F0F - \\u9ED8\\u8BA4\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderMode=\\\"collapse\\\"\"), \" (\\u9ED8\\u8BA4) \\u6765\\u5B9E\\u73B0\\u5185\\u5BB9\\u7684\\u6298\\u53E0\\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 { OverflowList, Tag, Slider } from '@douyinfe/semi-ui';\\nimport { IconAlarm, IconBookmark, IconCamera, IconDuration, IconEdit, IconFolder } from '@douyinfe/semi-icons';\\n\\n() => {\\n const [width, setWidth] = useState(100);\\n const renderOverflow = items => {\\n return items.length ? +{items.length} : null;\\n };\\n const renderItem = (item, ind) => {\\n return (\\n \\n {item.icon}\\n {item.key}\\n \\n );\\n };\\n\\n const items = [\\n { icon: , key: 'alarm' },\\n { icon: , key: 'bookmark' },\\n { icon: , key: 'camera' },\\n { icon: , key: 'duration' },\\n { icon: , key: 'edit' },\\n { icon: , key: 'folder' },\\n ];\\n\\n return (\\n \\n
setWidth(value)} />\\n
\\n
\\n \\n \\n
\\n \\n
setWidth(value)} />\\n
\\n
\\n \\n \\n
\\n \\n
setWidth(value)} />\\n
\\n
\\n \\n \\n
\\n \\n
setWidth(value)} />\\n
\\n
\\n \\n \\n
\\n