大纲
@astryxdesign/core v0.7.1 · Outline
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
items | OutlineItem[] | — | 按顺序排列的标题。每一项是 { id, label, level }。level 为 1–6。 |
activeId | string | — | 受控的当前标题。一旦传入,内置滚动侦测关闭。用 v-model:active-id 绑定。 |
label | string | Table of contents | 导航地标的无障碍名称。默认文案随语言变化,中文为「目录」。 |
density | 'default' | 'compact' | 'default' | 条目内边距。compact 用于密集侧栏。 |
offset | number | 0 | 盖住滚动容器顶部的固定头高度,单位像素。停留线和滚动落点一起下移。 |
scrollContainer | HTMLElement | null | — | 要跟踪的滚动容器。不传则用最近的可滚动祖先,没有就用视口。 |
hasScrollOnClick | boolean | true | 激活一项时是否平滑滚到对应标题。 |
事件
| 事件 | 参数 | 说明 |
|---|---|---|
update:activeId | string | 当前 id 变了。来源是滚动侦测,或读者激活了某一项。 |
navigateStart | string | 一次点击开始滚向这个 id。 |
navigateEnd | string | 这次导航结束、被打断,或到了 1.2 秒。每次开始只发一次。 |
主题
根类名是 astryx-outline。指示条读取 --astryx-outline-indicator-top 和 --astryx-outline-indicator-height,组件会按当前链接量出来。
缩进是 2px 的轨道,加上行内起始内边距:第一档为间距 3,然后是间距 7、间距 11、间距 12。compact 把块方向内边距从间距 2 改成间距 1。