Anchor 锚点与固钉

浏览长页目录并保持重要操作可见。

基础用法

概况

滚动这一块内容，或点击左侧的目录。

成员

滚动这一块内容，或点击左侧的目录。

设置

滚动这一块内容，或点击左侧的目录。

basic.tsx

import { Anchor } from '@ifhover/leaf-ui';

import { useCallback, useId, useRef } from 'react';

export function AnchorBasic() {
  const scroll = useRef<HTMLDivElement>(null),
    id = useId();
  const container = useCallback(() => scroll.current ?? window, []);
  const sections = [
    '概况',
    '成员',
    '设置',
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '120px minmax(0, 1fr)', gap: 20 }}>
      <Anchor
        container={container}
        items={sections.map((title, index) => ({ key: title, title, href: `#${id}-${index}` }))}
      />
      <div ref={scroll} style={{ height: 240, overflow: 'auto' }}>
        {sections.map((title, index) => (
          <section key={title} id={`${id}-${index}`} style={{ minHeight: 210 }}>
            <h3>{title}</h3>
            <p>
              {'滚动这一块内容，或点击左侧的目录。'}
            </p>
          </section>
        ))}
      </div>
    </div>
  );
}

自定义滚动区域

向下滚动，操作按钮会保持可见。

basic.tsx

import { Affix, Button } from '@ifhover/leaf-ui';

import { useCallback, useRef } from 'react';

export function AnchorAffix() {
  const scroll = useRef<HTMLDivElement>(null);
  const container = useCallback(() => scroll.current ?? window, []);
  return (
    <div
      ref={scroll}
      style={{
        height: 200,
        overflow: 'auto',
        background: 'var(--leaf-color-surface-muted)',
        padding: 16,
        borderRadius: 'var(--leaf-radius)',
      }}
    >
      <p>{'向下滚动，操作按钮会保持可见。'}</p>
      <Affix container={container} offsetTop={8}>
        <Button>{'保存修改'}</Button>
      </Affix>
      <div style={{ height: 450 }} />
    </div>
  );
}

AnchorItem

属性	类型	默认值	说明
`key`	`string`	—	必需。稳定且唯一的标识。
`title`	`ReactNode`	—	必需。标题内容。
`href`	`string`	—	必需。链接目标。
`children`	`readonly AnchorItem[]`	—	子内容；嵌套数据类型表示子节点。

Anchor API

属性	类型	默认值	说明
`items`	`readonly AnchorItem[]`	—	必需。展示的条目。
`container`	`() => HTMLElement \| Window`	—	自定义挂载或滚动容器。
`offset`	`number`	`12`	滚动目标距离容器顶部的像素数。
`activeKey`	`string`	—	受控的当前章节。
`onActiveChange`	`(key: string) => void`	—	当前章节变化时调用。
`smooth`	`boolean`	`true`	启用平滑滚动，减少动画设置下会自动关闭。

Affix API

属性	类型	默认值	说明
`offsetTop`	`number`	`0`	固定位置距离容器顶部的像素数。
`offsetBottom`	`number`	—	固定位置距离容器底部的像素数。
`container`	`() => HTMLElement \| Window`	—	自定义挂载或滚动容器。
`onAffixChange`	`(affixed: boolean) => void`	—	固定状态变化时调用。

类型与交互

组装可复用配置时，可导入对应的属性和数据类型。

import type { AnchorItem, AnchorProps, AffixProps } from '@ifhover/leaf-ui';

为仅展示图标的操作提供可访问名称。交互控件支持键盘操作，并跟随 ConfigProvider 的主题和减少动画设置。

#Anchor 锚点与固钉

#基础用法

概况

成员

设置

#自定义滚动区域

#AnchorItem

#Anchor API

#Affix API

#类型与交互

Anchor 锚点与固钉

基础用法

自定义滚动区域

AnchorItem

Anchor API

Affix API

类型与交互