其它组件
基础用法
面试亮点
Anchor 完整案例
锚点 Anchor通过锚点可快速找到信息内容在当前页面的位置。
结合 Tailwind
锚点 Anchor
结合 Tailwind
结合 CSS
使用方法
edit js
结合 CSS
锚点 Anchor
结合 Tailwind
结合 CSS
使用方法
edit css
edit js
使用方法
1import { Anchor } from '@t-headless-ui/react';
2
3<Anchor.Root>
4 <Anchor.Link targetId="Anchor 1">
5 Anchor 1
6 <Anchor.Link targetId="Anchor 2">
7 Anchor 2
8 </Anchor.Link>
9 </Anchor.Link>
10 <Anchor.Link targetId="Anchor 3">
11 Anchor 3
12 </Anchor.Link>
13</Anchor.Root>高级封装
下一节会展示了封装的源码
锚点 Anchor
结合 Tailwind
结合 CSS
使用方法
高级封装
edit js
源码展示
↓ TAnchor.tsx:
1import { Anchor, type AnchorProps, type AnchorLinkProps } from '@t-headless-ui/react';
2import { type ClassValue, clsx } from 'clsx';
3import { twMerge } from 'tailwind-merge';
4
5interface TAnchorProps extends AnchorProps {
6 items: NestedAnchorLinkProps[];
7}
8
9interface NestedAnchorLinkProps {
10 text: string;
11 activeClassName?: AnchorLinkProps['activeClassName'];
12 className?: AnchorLinkProps['className'];
13 items?: NestedAnchorLinkProps[];
14}
15
16export function TAnchor({ items, offset, ...restProps }: TAnchorProps) {
17 return (
18 <Anchor.Root {...restProps} offset={offset}>
19 <div className="overflow-y-auto">{createNestedLink(items, 0)}</div>
20 </Anchor.Root>
21 );
22}
23
24export function createNestedLink(items?: NestedAnchorLinkProps[], level: number = 0) {
25 return Array.isArray(items)
26 ? items.map((item, index) => (
27 <Anchor.Link
28 targetId={item.text}
29 key={index}
30 style={{ '--indent': level } as React.CSSProperties}
31 className={cs('ml-[calc(var(--indent)*4px)]', item.className)}
32 activeClassName={item.activeClassName}
33 >
34 {item.text}
35 {createNestedLink(item.items, level + 1)}
36 </Anchor.Link>
37 ))
38 : null;
39}
40
41export function cs(...args: ClassValue[]) {
42 return twMerge(clsx(...args));
43}API
Anchor.Root Props
接口名: AnchorProps
继承: Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>
| 参数名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| style | CSSProperties | 节点样式 | - |
| className | string | 节点类名 | - |
| scrollContainer | string | HTMLElement | Window | 滚动容器。传入选择器或者dom元素。 | - |
| onChange | (newLink: string, oldLink: string) => void | 滚动时锚点改变或点击锚点时触发 | - |
| offset | number | 滚动至距离目标锚点位置指定的偏移量 `offset` 时触发 | 0 |
| ref | React.RefObject<HTMLDivElement> | 获取 SubMenuContent 容器的 div dom 元素 | - |
| queryKey | string | 锚点在 url 中的 queryKey | "anchor-id" |
| isCloseInitAnchor | boolean | 是否关闭初始化 anchor 定位功能，如果关闭 queryKey 会失效 | true |
Anchor.Link Props
接口名: AnchorLinkProps
继承: HTMLAttributes<HTMLDivElement>
| 参数名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| style | CSSProperties | 节点样式 | - |
| className | string | 节点类名 | - |
| targetId | string | 目标锚点 id | - |
| activeClassName | string | 激活时的类名 | - |