OverflowList
溢出折叠列表，严格镜像 Semi OverflowList。行为组件：展示列表并自适应展示尽可能多的项目，因过长而溢出的项折叠为一个元素，容器 resize 时重新计算可见项。renderMode="collapse"（默认）用 ResizeObserver 累加各项宽度找折叠点，溢出项收纳进 overflowRenderer 返回的节点，collapseFrom 决定从尾（end）/头（start）折叠，minVisibleItems 保底可见数；renderMode="scroll" 不折叠，可见层为可横向滚动容器，用 IntersectionObserver 观测各项，threshold 控制阈值，onIntersect/onVisibleStateChange 上报可见状态。渲染函数以 Svelte Snippet 形式提供（visibleItemRenderer/overflowRenderer）。
如何引入
import { OverflowList } from '@chenzy-design/svelte';折叠模式（默认）
renderMode="collapse"：容器放不下时把溢出项收纳为 +N
拖动滑块改变容器宽度，溢出标签自动折叠进 +N
折叠方向
collapseFrom="start" 从头部折叠，尾部项保持可见
collapseFrom="start"：折叠节点渲染在头部，尾部最新项保持可见
最小展示数目
minVisibleItems 保证至少展示 N 个可见项
minVisibleItems={3}：即使容器很窄也至少保留 3 个可见项
滚动模式
renderMode="scroll" 不折叠，容器内横向滚动查看溢出项
renderMode="scroll"：不折叠，容器内横向滚动查看溢出项；两端显示已隐藏计数
alarm
bookmark
camera
duration
edit
folder
溢出回调
onOverflow 上报当前被折叠的项集合（去重）
onOverflow 上报当前被折叠的项；缩小容器观察折叠项列表变化
已折叠：（无）
自定义折叠节点
overflowRenderer 返回下拉菜单，点击 +N 展开被折叠项
overflowRenderer 返回下拉菜单：点击 +N 展开被折叠的项
滚动相交回调
scroll 模式下 onVisibleStateChange + threshold 上报可见项
threshold={0.2}：横向滚动时上报当前可见项数目（onVisibleStateChange）
当前可见项：0 / 12
tab-1
tab-2
tab-3
tab-4
tab-5
tab-6
tab-7
tab-8
tab-9
tab-10
tab-11
tab-12
动态切换数据
items 引用变化后重新测量并重算折叠结果
点击切换数据源，观察折叠结果随新 items 重新计算
API 参考
OverflowList
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
items | 数据驱动的渲染项；scroll 模式要求每项含 key（或提供 itemKey） | T[] | [] |
renderMode | 渲染模式：collapse 折叠（默认）/ scroll 滚动 | 'collapse'|'scroll' | 'collapse' |
collapseFrom | collapse 模式折叠方向：end 尾部（默认）/ start 头部 | 'start'|'end' | 'end' |
minVisibleItems | collapse 模式最小可见项数目 | number | 0 |
threshold | scroll 模式触发溢出回调的 IntersectionObserver 阈值 | number | 0.75 |
itemKey | 取项 key：字段名或函数；缺省取 item.key | string|number|((item: T) => string|number) | undefined |
visibleItemRenderer | 可见项渲染模板（对齐 Semi visibleItemRenderer） | Snippet<[item: T, index: number]> | undefined |
overflowRenderer | 溢出项渲染模板（对齐 Semi overflowRenderer）。collapse 收全部溢出项；scroll 分别收 [头部溢出, 尾部溢出] 二次调用渲染在两端 | Snippet<[overflowItems: T[]]> | undefined |
onOverflow | collapse 模式溢出项变化回调（去重） | (overflowItems: T[]) => void | undefined |
onIntersect | scroll 模式相交状态回调 | (res: Record<string, IntersectionObserverEntry>) => void | undefined |
onVisibleStateChange | scroll 模式可见状态变化回调 | (visibleState: Map<string, boolean>) => void | undefined |
wrapperClass | scroll 模式滚动 wrapper 类名（对齐 Semi wrapperClassName） | string | '' |
wrapperStyle | scroll 模式滚动 wrapper 内联样式（对齐 Semi wrapperStyle） | string | '' |
style | 根节点内联样式 | string | '' |
class | 根节点附加类名 | string | '' |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onOverflow | — | collapse 模式溢出项变化时回调，携带 overflowItems |
onIntersect | — | scroll 模式各项相交状态回调，携带 { key: IntersectionObserverEntry } |
onVisibleStateChange | — | scroll 模式可见状态 Map 变化回调 |
Slots
| 名称 | 说明 |
|---|---|
visibleItemRenderer | 单个可见项渲染模板（item, index） |
overflowRenderer | 溢出节点渲染模板（overflowItems） |
Accessibility
- 行为组件，不注入语义角色（对齐 Semi）；DOM 结构 cd-overflow-list > cd-overflow-list-item / cd-overflow-list-overflow / cd-overflow-list-scroll-wrapper；可见/溢出/焦点语义由 visibleItemRenderer/overflowRenderer 提供的宿主内容决定。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-overflow-list-focus-ring | var(--cd-color-primary) | 折叠指示器键盘聚焦描边颜色 |
--cd-overflow-list-overflow-bg | transparent | 折叠指示器背景色 - 默认 |
--cd-overflow-list-overflow-bg-hover | var(--cd-color-fill-0) | 折叠指示器背景色 - 悬浮 |
--cd-overflow-list-overflow-color | var(--cd-color-text-2) | 折叠指示器文字颜色 - 默认 |
--cd-overflow-list-overflow-color-hover | var(--cd-color-text-0) | 折叠指示器文字颜色 - 悬浮 |