@alicd/crui-anchor

--- category: Components type: UI Views component: Base chinese: 页内锚点导航 english: Anchor ---

Usage no npm install needed!

<script type="module">
  import alicdCruiAnchor from 'https://cdn.skypack.dev/@alicd/crui-anchor';
</script>

README

category: Components type: UI Views component: Base chinese: 页内锚点导航 english: Anchor

外观类似 Nav 组件，提供了页内不同 Section 之间的滚动导航能力。

API

Anchor

成员	说明	类型	默认值
className	自定义 class	`string`	N/A
style	自定义内联样式	`object`	N/A
selectedKeys	当前选中的项, 设置此属性，组件的选中变为受控状态	`string[]`	N/A
defaultSelectedKeys	初始化选中的项，只在组件初次render的时候生效	`string[]`	`[]`
onScrollTo	用户滚动到页面中新的锚点时触发的回调	`(currentKey: string) => void`	N/A
onSelect	用户点选了指定 Item 的回调	`(selectedKeys: string[]) => void`	N/A
container	该锚点菜单所绑定的滚动容器	`() => ReactNode`	默认返回 `body`
animation	用户点击锚点滚动容器时是否加入动画	`boolean`	`true`

Anchor.Item

成员	说明	类型	默认值
key	该锚点的标识符	`string`	N/A
to	指定点击该锚点所跳转到的位置，为 `string` 则跳转到指定 `id` 的 DOM 元素，为返回组件的函数则跳转到指定组件	`string` 或 `() => ReactNode`	N/A
onClick	点击了锚点触发的回调	`() => void`	N/A