{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/overflowlist","result":{"data":{"current":{"frontmatter":{"title":"OverflowList","order":77,"brief":"OverflowList is a behavior component used to take list of items and display as many items as can fit inside itself. Overflowed items that do not fit are collected and rendered by callback function. The visible items will be recomputed when a resize is detected.","icon":"doc-overflowList"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#collapse-mode---simple","title":"Collapse Mode - Simple"},{"url":"#collapse-mode---direction","title":"Collapse Mode - Direction"},{"url":"#collapse-mode---visible","title":"Collapse Mode - Visible"},{"url":"#scroll-mode","title":"Scroll Mode"}]},{"url":"#api-reference","title":"API Reference","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\": \"en-US\",\n  \"order\": 77,\n  \"category\": \"Show\",\n  \"title\": \"OverflowList\",\n  \"subTitle\": \"OverflowList\",\n  \"icon\": \"doc-overflowList\",\n  \"brief\": \"OverflowList is a behavior component used to take list of items and display as many items as can fit inside itself. Overflowed items that do not fit are collected and rendered by callback function. The visible items will be recomputed when a resize is detected.\"\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  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), 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  }, \"Collapse Mode - Simple\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You could use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderMode=\\\"collapse\\\"\"), \" (default) to render items.\"), 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 ? <Tag style={{ flex: '0 0 auto', fontVariantNumeric: 'tabular-nums' }}>+{items.length}</Tag> : null;\\n    };\\n    const renderItem = (item, ind) => {\\n        return (\\n            <Tag color=\\\"blue\\\" key={item.key} style={{ marginRight: 8, flex: '0 0 auto' }}>\\n                {item.icon}\\n                {item.key}\\n            </Tag>\\n        );\\n    };\\n\\n    const items = [\\n        { icon: <IconAlarm style={{ marginRight: 4 }} />, key: 'alarm' },\\n        { icon: <IconBookmark style={{ marginRight: 4 }} />, key: 'bookmark' },\\n        { icon: <IconCamera style={{ marginRight: 4 }} />, key: 'camera' },\\n        { icon: <IconDuration style={{ marginRight: 4 }} />, key: 'duration' },\\n        { icon: <IconEdit style={{ marginRight: 4 }} />, key: 'edit' },\\n        { icon: <IconFolder style={{ marginRight: 4 }} />, key: 'folder' },\\n    ];\\n\\n    return (\\n        <div>\\n            <Slider step={1} value={width} onChange={value => setWidth(value)} />\\n            <br />\\n            <br />\\n            <div style={{ width: `${width}%` }}>\\n                <OverflowList items={items} overflowRenderer={renderOverflow} visibleItemRenderer={renderItem} />\\n            </div>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Collapse Mode - Direction\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"collapse\"), \" mode supports two \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"collapseFrom\"), \" directions: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"start\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"end\"), \" (default).\"), 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 ? <Tag style={{ marginRight: 8, flex: '0 0 auto', fontVariantNumeric: 'tabular-nums' }}>+{items.length}</Tag> : null;\\n    };\\n    const renderItem = (item, ind) => {\\n        return (\\n            <Tag color=\\\"blue\\\" key={item.key} style={{ marginRight: 8, flex: '0 0 auto' }}>\\n                {item.icon}\\n                {item.key}\\n            </Tag>\\n        );\\n    };\\n\\n    const items = [\\n        { icon: <IconAlarm style={{ marginRight: 4 }} />, key: 'alarm' },\\n        { icon: <IconBookmark style={{ marginRight: 4 }} />, key: 'bookmark' },\\n        { icon: <IconCamera style={{ marginRight: 4 }} />, key: 'camera' },\\n        { icon: <IconDuration style={{ marginRight: 4 }} />, key: 'duration' },\\n        { icon: <IconEdit style={{ marginRight: 4 }} />, key: 'edit' },\\n        { icon: <IconFolder style={{ marginRight: 4 }} />, key: 'folder' },\\n    ];\\n\\n    return (\\n        <div>\\n            <Slider step={1} value={width} onChange={value => setWidth(value)} />\\n            <br />\\n            <br />\\n            <div style={{ width: `${width}%` }}>\\n                <OverflowList\\n                    items={items}\\n                    collapseFrom=\\\"start\\\"\\n                    overflowRenderer={renderOverflow}\\n                    visibleItemRenderer={renderItem}\\n                />\\n            </div>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Collapse Mode - Visible\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"collapse\"), \" mode supports to set up minimum visible items that will not be collected.\"), 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 ? <Tag style={{ flex: '0 0 auto', fontVariantNumeric: 'tabular-nums' }}>+{items.length}</Tag> : null;\\n    };\\n    const renderItem = (item, ind) => {\\n        return (\\n            <Tag color=\\\"blue\\\" key={item.key} style={{ marginRight: 8, flex: '0 0 auto' }}>\\n                {item.icon}\\n                {item.key}\\n            </Tag>\\n        );\\n    };\\n\\n    const items = [\\n        { icon: <IconAlarm style={{ marginRight: 4 }} />, key: 'alarm' },\\n        { icon: <IconBookmark style={{ marginRight: 4 }} />, key: 'bookmark' },\\n        { icon: <IconCamera style={{ marginRight: 4 }} />, key: 'camera' },\\n        { icon: <IconDuration style={{ marginRight: 4 }} />, key: 'duration' },\\n        { icon: <IconEdit style={{ marginRight: 4 }} />, key: 'edit' },\\n        { icon: <IconFolder style={{ marginRight: 4 }} />, key: 'folder' },\\n    ];\\n\\n    return (\\n        <div>\\n            <Slider step={1} value={width} onChange={value => setWidth(value)} />\\n            <br />\\n            <br />\\n            <div style={{ width: `${width}%` }}>\\n                <OverflowList\\n                    items={items}\\n                    minVisibleItems={3}\\n                    overflowRenderer={renderOverflow}\\n                    visibleItemRenderer={renderItem}\\n                />\\n            </div>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Scroll Mode\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You could use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderMode=\\\"scroll\\\"\"), \" for a scrollable list.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"If you need certain element in the list to scrollIntoView, use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"document.querySelector(`.item-cls[data-scrollkey=\\\"${key}\\\"]\"), \" to select to corresponding DOM.\"), 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.map(item => <Tag style={{ marginRight: 8, marginLeft: 8, flex: '0 0 auto', fontVariantNumeric: 'tabular-nums' }} key={item.key}>+{item.length}</Tag>);\\n    };\\n    const renderItem = (item, ind) => {\\n        return (\\n            <span key={item.key} className=\\\"item-cls\\\">\\n                <Tag color=\\\"blue\\\" style={{ marginRight: 8, flex: '0 0 auto' }}>\\n                    {item.icon}\\n                    {item.key}\\n                </Tag>\\n            </span>\\n        );\\n    };\\n\\n    const items = [\\n        { icon: <IconAlarm style={{ marginRight: 4 }} />, key: 'alarm' },\\n        { icon: <IconBookmark style={{ marginRight: 4 }} />, key: 'bookmark' },\\n        { icon: <IconCamera style={{ marginRight: 4 }} />, key: 'camera' },\\n        { icon: <IconDuration style={{ marginRight: 4 }} />, key: 'duration' },\\n        { icon: <IconEdit style={{ marginRight: 4 }} />, key: 'edit' },\\n        { icon: <IconFolder style={{ marginRight: 4 }} />, key: 'folder' },\\n    ];\\n\\n    return (\\n        <div>\\n            <Slider step={1} value={width} onChange={value => setWidth(value)} />\\n            <br />\\n            <br />\\n            <div style={{ width: `${width}%` }}>\\n                <OverflowList\\n                    items={items}\\n                    renderMode=\\\"scroll\\\"\\n                    overflowRenderer={renderOverflow}\\n                    visibleItemRenderer={renderItem}\\n                />\\n            </div>\\n        </div>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), 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  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"version\"))), 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  }, \"Class name.\"), 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  }, \"onVisibleStateChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Hide and display state change callback\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(visibleState: Map\\\\<string, boolean\", \">\", \") => void;\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.61.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderMode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Render mode.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"collapse\"), \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"scroll\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\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  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"OverflowList style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"renderMode='collapse'\"), 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  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"version\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"collapseFrom\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Which direction the items should collapse from: start or end of the children.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"), \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"end\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"end\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"items\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"All items to display in the list.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Record<string, any>[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\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  }, \"minVisibleItems\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The minimum number of visible items that should never collapse into the overflow menu.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onOverflow\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback invoked when the overflowed items change.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(overflowItems: Record<string, any>[]) => void\"), 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  }, \"overflowRenderer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback invoked to render the overflowed items.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(overflowItems: Record<string, any>[]) => React.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  }, \"visibleItemRenderer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback invoked to render each visible item.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(item: Record<string, any>, index: number) => React.ReactElement\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"renderMode='scroll'\"), 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  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"version\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"items\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"All items to display in the list. \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"Key is required.\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Record<string, any>[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\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  }, \"onIntersect\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback invoked when the overflowed items change.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"({\", \"[key: string]\", \": \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry\"\n  }, \"IntersectionObserverEntry\"), \"}) => void\"), 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  }, \"overflowRenderer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback invoked to render the overflowed items.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(overflowItems: Record<string, any>[]) => React.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  }, \"threshold\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"At what percentage of the target's visibility the observer's callback should be executed.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.75\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"visibleItemRenderer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"allback invoked to render each visible item.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(item: Record<string, any>, index: number) => React.ReactElement\"), 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  }, \"wrapperClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Scroll wrapper classname.\"), 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  }, \"wrapperStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Scroll wrapper style.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/show/overflowlist","next":{"fields":{"slug":"zh-CN/show/overflowlist"},"id":"b477796c-7458-55db-bf33-d330080a468f","frontmatter":{"title":"OverflowList 折叠列表","localeCode":"zh-CN","icon":"doc-overflowList","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/modal"},"id":"ec910c5d-b437-5370-b9a3-7cff60c70e41","frontmatter":{"title":"Modal 模态对话框","localeCode":"zh-CN","icon":"doc-modal","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}