导航
菜单、面包屑、锚点导航、回到顶部、下拉触发、分页与标签页。
ICEMenu
源码:src/components/ICEMenu.ts
方法
| 方法 | 返回 | 说明 |
|---|---|---|
setSelectedKey(key: string | null) | this | |
getSelectedKey() | string | null | |
getVisibleItems() | ICEMenuItem[] | 可见行(展开状态下的扁平列表)。 |
getItemNode(key: string) | any | |
isExpanded(key: string) | boolean | |
toggleExpand(key: string) | this | |
setExpandedKeys(keys: string[]) | this | |
activateItem(key: string) | this | 激活某个可见项:父节点展开/收起,叶子项选中并回调。 |
getMode() | 'vertical' | 'horizontal' | |
isCollapsed() | boolean | |
getExpandAnimation() | number | 折叠动画时长(毫秒,0 = 立即展开)。 |
setExpandAnimation(duration: number) | this | |
isAnimating(key: string) | boolean | 某个父项正在做展开/收起动画吗。 |
getItemBox(key: string) | { left: number; top: number; width: number; height: number } | null | |
setCollapsed(collapsed: boolean) | this | |
isLabelVisible(key: string) | boolean | 该项当前画没画文字(收起态只有图标)。 |
hasIcon(key: string) | boolean | |
getItemBoxes() | Array<{ key: string; left: number; top: number; width: number; height: number }> | 每个可见项的盒子(形态断言 / 几何审计用)。 |
isSubmenuOpen() | boolean | |
getSubmenuKey() | string | null | |
getSubmenuIndicator(key: string) | string | 横向模式下父项上的指示符:收起 ⌄ / 展开 ⌃(没子菜单的项返回空串)。 |
getSubmenuItemNode(key: string) | any | |
closeSubmenu() | this | |
openSubmenu(key: string) | this | 打开某一项的子菜单浮层(横向模式的父项)。 |
getActiveKey() | string | null | |
setActiveKey(key: string | null) | this |
ICEBreadcrumb
面包屑:一行「路径 + 分隔符」,最后一项是当前页。
- 宽度按内容自适应(中文按 1em 估算,不会把文字压出色块外);
- 除最后一项外都可点击,点击触发
navigate事件(载荷{ item, index })与onNavigate; maxItems超长时把中间项折叠成「…」,点击省略号展开(折叠语义:maxItems只数真实项,省略号不占额度)。
源码:src/components/ICEBreadcrumb.ts
构造参数 ICEBreadcrumbOptions
| 参数 | 类型 | 说明 |
|---|---|---|
id? | string | 组件 id(引擎会用它做唯一标识,e2e/调试时可按 id 定位) |
items | ICEBreadcrumbItem[] | 数据项 |
separator? | string | 分隔符,默认 › |
maxItems? | number | 最多显示多少真实项(超过则中间折叠为省略号);不传或 ≤ 0 表示不折叠 |
left? | number | 相对父容器的左边距 |
top? | number | 相对父容器的上边距 |
width? | number | 宽度(不传用组件默认值) |
height? | number | 高度(不传用组件默认值) |
fontSize? | number | |
onNavigate? | (item: ICEBreadcrumbItem, index: number) => void | 点击非当前项的回调(与 navigate 事件同义) |
方法
| 方法 | 返回 | 说明 |
|---|---|---|
getLabelTexts() | string[] | 当前显示的标签(折叠时中间会多出一个 …)。 |
getItemNodes() | ICEBreadcrumbItemNode[] | |
getSeparatorNodes() | ICELabel[] | |
getItems() | ICEBreadcrumbItem[] | |
isCollapsed() | boolean | |
expand() | this | 展开被折叠的中间项。 |
setItems(items: ICEBreadcrumbItem[]) | this |
ICEAnchor
锚点导航:一列锚点,点击滚到目标位置,滚动时自动高亮当前项。 与 ICEScrollPane 配合使用:target 传滚动容器,items[].top 是该段落在 内容坐标系里的纵向位置。滚动事件由 ICEScrollPane 的 scroll 事件驱动。
源码:src/components/ICEAnchor.ts
构造参数 ICEAnchorOptions
| 参数 | 类型 | 说明 |
|---|---|---|
id? | string | 组件 id(引擎会用它做唯一标识,e2e/调试时可按 id 定位) |
target | any | 跟随的滚动容器 |
items | ICEAnchorItem[] | 数据项 |
activeKey? | string | 初始活动项,默认第一项 |
left? | number | 相对父容器的左边距 |
top? | number | 相对父容器的上边距 |
width? | number | 宽度(不传用组件默认值) |
itemHeight? | number | |
fontSize? | number | |
onChange? | (key: string) => void | 用户点击 / 键盘切换锚点时的回调(滚动带出来的高亮不回调) |
方法
| 方法 | 返回 | 说明 |
|---|---|---|
getActiveKey() | string | null | |
getLabelTexts() | string[] | |
getItemNode(key: string) | ICEWidget | null | |
getLabelColor(key: string) | string | |
setActiveKey(key: string, options: { scroll?: boolean }) | this | 程序式切换活动项(默认不滚动,传 scroll: true 才滚)。 |
getItems() | ICEAnchorItem[] | |
setItems(items: ICEAnchorItem[]) | this |
ICEBackTop
回到顶部:一个小圆按钮,滚动超过阈值才出现。 用法是把滚动容器交给它:new ICEBackTop({ target: scrollPane })。 依赖 ICEScrollPane 的 scroll 事件(滚动位置变化时派发), 点击后把目标滚回 (0, 0) 并回调 onClick。
源码:src/components/ICEBackTop.ts
构造参数 ICEBackTopOptions — 回到顶部:一个小圆按钮,滚动超过阈值才出现。 用法是把滚动容器交给它:new ICEBackTop({ target: scrollPane })。 依赖 ICEScrollPane 的 scroll 事件(滚动位置变化时派发), 点击后把目标滚回 (0, 0) 并回调 onClick。
| 参数 | 类型 | 说明 |
|---|---|---|
id? | string | 组件 id(引擎会用它做唯一标识,e2e/调试时可按 id 定位) |
target | any | 跟随的滚动容器(实现 getScroll / setScroll / on('scroll') 即可) |
visibilityHeight? | number | 超过多少滚动量才出现,默认 200 |
size? | number | 圆按钮直径,默认 36 |
icon? | string | 图标字形,默认 ↑ |
left? | number | 相对父容器的左边距 |
top? | number | 相对父容器的上边距 |
onClick? | () => void | 点击回调 |
方法