@fluid-topics/ftds-page-layout

设计系统的页面布局组件

安装

npm install @fluid-topics/ftds-page-layout
yarn add @fluid-topics/ftds-page-layout

使用量

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

function render() {
    return html` <ftds-page-layout foo="bar"></ftds-page-layout> `
}

目录

与 withToc,目录ftds-toc)显示在内容的右边。 它很粘,隐藏在屏幕上,最宽可达1440px. 它是从标有 data-toc-label添加 data-toc-level="1" 以制作上一节的分节. 没有元素 id 给一个。 当前项目在滚动时单击并更新。 该表由 FtTocController时创建 withToc 已经设定.

html`
    <ftds-page-layout pageTitle="Title" withToc tocLabel="Content">
        <section data-toc-label="General">...</section>
        <section data-toc-label="Provider">...</section>
        <section data-toc-label="Settings" data-toc-level="1">...</section>
    </ftds-page-layout>`