@fluid-topics/ftds-toc

安装

npm install @fluid-topics/ftds-toc
yarn add @fluid-topics/ftds-toc

使用量

设计系统目录 (TOC). 它是一个导航组件,具有两个关卡(分节和分节)连接到一页的锚.

匹配当前页面位置的链接被标记为 aria-current="page"。其更新时间为点击和 hashchange,或可被迫使用 current 属性.

它很粘,隐藏在屏幕上,最宽可达1440px.

import { html } from "lit"
import "@fluid-topics/ftds-toc"

function render() {
    return html`
        <ftds-toc
            label="Content"
            .items=${ [
                { value: "general", label: "General", href: "#general" },
                {
                    value: "provider",
                    label: "Provider",
                    href: "#provider",
                    children: [
                        { value: "settings", label: "Settings", href: "#settings" },
                    ],
                },
            ] }
        ></ftds-toc>`
}

键盘导航

它跟随 APG 树景导航模式,没有扩张和倒塌。 标签序列中只有一个项目(当前一个,或第一个).

活动

item-selected (单位:千美元)TocItemSelectedEvent, (中文(简体) ), detail 当一个项目被单击或用键盘激活时,将发出. 可取消:拨打 preventDefault() 上面取消了链接的本地导航,所以主机可以滚动到区域本身.

从页面中构建项目

而不是用手写东西, FtTocController (从) @fluid-topics/ft-wc-utils)可以从主机组件的区块来构建它们并跟踪目前所看到的区块.

标记主机光度DOM的每个部分 data-toc-label添加 data-toc-level="1" 以制作上一节的分节. 没有元素 id 给一个。 当主机的光 DOM 改变时, 这些区域会被重新扫描 .

import { html } from "lit"
import { FtLitElement, FtTocController } from "@fluid-topics/ft-wc-utils"
import { TocItemSelectedEvent } from "@fluid-topics/ftds-toc"
import "@fluid-topics/ftds-toc"

class MyPage extends FtLitElement {
    private readonly toc = new FtTocController(this, {
        scrollContainer: () => this.renderRoot.querySelector("main"),
    })

    protected render() {
        return html`
            <ftds-toc label="Content"
                      .items=${ this.toc.items }
                      .current=${ this.toc.current }
                      @item-selected=${ this.onItemSelected }>
            </ftds-toc>
            <main>
                <slot></slot>
            </main>`
    }

    private onItemSelected(e: TocItemSelectedEvent) {
        if (this.toc.scrollTo(e.detail.value)) {
            e.preventDefault()
        }
    }
}

html`
    <my-page>
        <section data-toc-label="General">...</section>
        <section data-toc-label="Provider">...</section>
        <section data-toc-label="Settings" data-toc-level="1">...</section>
    </my-page>`

ftds-page-layout 做这个给你 用它的 withToc 属性.