The design system page layout component
Install
npm install @fluid-topics/ftds-page-layout
yarn add @fluid-topics/ftds-page-layout
Usage
import { html } from "lit"
import "@fluid-topics/ftds-page-layout"
function render() {
return html` <ftds-page-layout foo="bar"></ftds-page-layout> `
}
Table of contents
With withToc, a table of contents (ftds-toc) is displayed on the right of the content. It is sticky, and hidden on screens up to 1440px wide.
It is built from the slotted elements marked with data-toc-label. Add data-toc-level="1" to make a sub-section of the previous section.
An element without an id is given one. The current item is updated on click and while scrolling. The table is built by FtTocController, which is only created while withToc is set.
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>`