锚点
@beisen-phoenix/anchor
概述
用于模块较多的页面,可帮助用户更快速的定位至想要查看的模块。
导出说明
默认导出为非受控组件,鼠标移入移出时自动展开收起。同时导出受控组件--PureAnchor
API
非受控组件的属性(默认)
参数 | 说明 | 类型 | 默认值 | 是否必传 |
---|---|---|---|---|
width | 展开后的宽度 | string | "118px" | 否 |
maxHeight | 最大高度 | string | "330px" | 否 |
data | 每个Link组件的属性 | Array<IData> | - | 是 |
selectedId | 当前选中Link的id | string | number | - | 是 |
onSelect | 选中Link的回调 | (selectedId: string | number, e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | - |
受控组件的属性
参数 | 说明 | 类型 | 默认值 | 是否必传 |
---|---|---|---|---|
width | 展开后的宽度 | string | "118px" | 否 |
maxHeight | 最大高度 | string | "330px" | 否 |
data | 每个Link组件的属性 | Array<IData> | - | 是 |
selectedId | 当前选中Link的id | string | number | - | 是 |
onSelect | 选中Link的回调 | (selectedId: string | number, e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | - |
expanded | 是否是展开状态,默认收起,hover时展开 | boolean | false | 是 |
onMouseEnter | 鼠标移入事件的回调 | (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void | - | 是 |
onMouseLeave | 鼠标移出事件的回调 | (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void | - | 是 |
IData
参数 | 说明 | 类型 | 默认值 | 是否必传 |
---|---|---|---|---|
id | 标识 | string | number | - | 是 |
title | 文字内容 | string | - | 是 |
href | 锚点链接 | string | - | 否 |
target | 指定在何处显示链接的资源 | string | - | 否 |