https://touying-typ.github.io/assets/js/af8ae02f.e8f07be4.js

1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4683],{28566:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>t,default:()=>h,frontMatter:()=>r,metadata:()=>d,toc:()=>c});var l=s(85893),i=s(11151);const r={sidebar_position:11,description:"A fully-featured progressive outline that renders headings from multiple levels with per-level styling.",toc_max_heading_level:2},t="custom-progressive-outline",d={id:"reference/components/custom-progressive-outline",title:"custom-progressive-outline",description:"A fully-featured progressive outline that renders headings from multiple levels with per-level styling.",source:"@site/docs/reference/components/custom-progressive-outline.mdx",sourceDirName:"reference/components",slug:"/reference/components/custom-progressive-outline",permalink:"/docs/reference/components/custom-progressive-outline",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:11,frontMatter:{sidebar_position:11,description:"A fully-featured progressive outline that renders headings from multiple levels with per-level styling.",toc_max_heading_level:2},sidebar:"tutorialSidebar",previous:{title:"progressive-outline",permalink:"/docs/reference/components/progressive-outline"},next:{title:"mini-slides",permalink:"/docs/reference/components/mini-slides"}},o={},c=[{value:"self : <TypeLink></TypeLink> <Default><code>none</code></Default>",id:"self",level:3},{value:"alpha : <TypeLink></TypeLink> <Default><code>60%</code></Default>",id:"alpha",level:3},{value:"level : <TypeLink></TypeLink> | <TypeLink></TypeLink> <Default><code>auto</code></Default>",id:"level",level:3},{value:"numbered : <TypeLink></TypeLink> <Default><code>(false,)</code></Default>",id:"numbered",level:3},{value:"filled : <TypeLink></TypeLink> <Default><code>(false,)</code></Default>",id:"filled",level:3},{value:"paged : <TypeLink></TypeLink> <Default><code>(false,)</code></Default>",id:"paged",level:3},{value:"numbering : <TypeLink></TypeLink> <Default><code>()</code></Default>",id:"numbering",level:3},{value:"text-style : <TypeLink></TypeLink> | <TypeLink></TypeLink> <Default><code>none</code></Default>",id:"text-style",level:3},{value:"vspace : <TypeLink></TypeLink> | <TypeLink></TypeLink> <Default><code>none</code></Default>",id:"vspace",level:3},{value:"title : <TypeLink></TypeLink> | <TypeLink></TypeLink> <Default><code>none</code></Default>",id:"title",level:3},{value:"indent : <TypeLink></TypeLink> <Default><code>(0em,)</code></Default>",id:"indent",level:3},{value:"fill : <TypeLink></TypeLink> <Default><code>(repeat[.],)</code></Default>",id:"fill",level:3},{value:"short-heading : <TypeLink></TypeLink> <Default><code>true</code></Default>",id:"short-heading",level:3},{value:"show-past : <TypeLink></TypeLink> | <TypeLink></TypeLink> | <TypeLink></TypeLink> <Default><code>none</code></Default>",id:"show-past",level:3},{value:"show-current : <TypeLink></TypeLink> | <TypeLink></TypeLink> | <TypeLink></TypeLink> <Default><code>none</code></Default>",id:"show-current",level:3},{value:"show-future : <TypeLink></TypeLink> | <TypeLink></TypeLink> | <TypeLink></TypeLink> <Default><code>none</code></Default>",id:"show-future",level:3},{value:"style-current : <TypeLink></TypeLink> <Default><code>none</code></Default>",id:"style-current",level:3},{value:"..args : <TypeLink></TypeLink>",id:"args",level:3}];function a(e){const n={a:"a",code:"code",em:"em",h1:"h1",h3:"h3",p:"p",strong:"strong",...(0,i.a)(),...e.components},{Default:s,Param:r,Parameters:t,Signature:d,SignatureName:o,SignatureParam:c,SourceLink:a,TypeLink:h}=n;return s||p("Default",!0),r||p("Param",!0),t||p("Parameters",!0),d||p("Signature",!0),o||p("SignatureName",!0),c||p("SignatureParam",!0),a||p("SourceLink",!0),h||p("TypeLink",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h1,{id:"custom-progressive-outline",children:"custom-progressive-outline"}),"\n",(0,l.jsx)(d,{children:(0,l.jsxs)("code",{children:[(0,l.jsx)(o,{children:"custom-progressive-outline"}),"(",(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#self",children:"self: none"}),", "]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#alpha",children:"alpha: 60%"}),", "]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#level",children:"level: auto"}),", "]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#numbered",children:"numbered: (false,)"}),", "]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#filled",children:"filled: (false,)"}),", "]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#paged",children:"paged: (false,)"}),", "]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#numbering",children:"numbering: ()"}),", "]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#text-style",children:"text-style: none"}),", "]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#vspace",children:"vspace: none"}),", "]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#title",children:"title: none"}),", "]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#indent",children:"indent: (0em,)"}),", "]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#fill",children:"fill: (repeat[.],)"}),", "]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#short-heading",children:"short-heading: true"}),", "]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#show-past",children:"show-past: none"}),", "]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#show-current",children:"show-current: none"}),", "]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#show-future",children:"show-future: none"}),", "]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.a,{href:"#style-current",children:"style-current: none"}),", "]}),(0,l.jsx)(c,{children:(0,l.jsx)(n.a,{href:"#args",children:"..args"})}),")",(0,l.jsx)(a,{href:"https://github.com/touying-typ/touying/blob/main/src/components.typ#L552"})]})}),"\n",(0,l.jsx)(n.p,{children:"A fully-featured progressive outline that renders headings from multiple levels with per-level styling."}),"\n",(0,l.jsxs)(n.p,{children:["Uses arrays indexed by heading level (first element = level 1, second = level 2, etc.) to apply different styling to each level. Unlike ",(0,l.jsx)(n.code,{children:"progressive-outline"})," (a thin wrapper around Typst's built-in ",(0,l.jsx)(n.code,{children:"outline"}),"), this function renders each heading manually, giving full control over numbering, indentation, fills, and typography.\nFor styling parameters the last value in the array is used for all levels beyond the array length, it is repeated. So you can write ",(0,l.jsx)(n.code,{children:"indent: (1em,)"})," to apply a ",(0,l.jsx)(n.code,{children:"1em"})," indentation to all levels, or ",(0,l.jsx)(n.code,{children:"indent: (0em, 1em)"})," to apply no indentation to level-1 headings and ",(0,l.jsx)(n.code,{children:"1em"})," to level-2 and beyond. This is not the case for ",(0,l.jsx)(n.code,{children:"numbering"})," or ",(0,l.jsx)(n.code,{children:"vspace"})," nor for ",(0,l.jsx)(n.code,{children:"filled"}),", ",(0,l.jsx)(n.code,{children:"numbered"}),", ",(0,l.jsx)(n.code,{children:"paged"}),"."]}),"\n",(0,l.jsxs)(t,{children:[(0,l.jsxs)(n.h3,{id:"self",children:["self : ",(0,l.jsx)(h,{type:"none"})," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"none"})})]}),(0,l.jsx)(r,{children:(0,l.jsx)(n.p,{children:"The self context."})}),(0,l.jsxs)(n.h3,{id:"alpha",children:["alpha : ",(0,l.jsx)(h,{type:"ratio"})," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"60%"})})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["The transparency of the covered headings. Default is ",(0,l.jsx)(n.code,{children:"60%"}),"."]})}),(0,l.jsxs)(n.h3,{id:"level",children:["level : ",(0,l.jsx)(h,{type:"auto"})," | ",(0,l.jsx)(h,{type:"int"})," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"auto"})})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["The outline level. When ",(0,l.jsx)(n.code,{children:"auto"}),", all levels up to ",(0,l.jsx)(n.code,{children:"slide-level"})," are shown. Default is ",(0,l.jsx)(n.code,{children:"auto"}),"."]})}),(0,l.jsxs)(n.h3,{id:"numbered",children:["numbered : ",(0,l.jsx)(h,{type:"array"})," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"(false,)"})})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["Per-level booleans indicating whether headings are numbered. Default is ",(0,l.jsx)(n.code,{children:"(false,)"}),". ",(0,l.jsx)(n.em,{children:"Last value in the array is not-repeated!"})]})}),(0,l.jsxs)(n.h3,{id:"filled",children:["filled : ",(0,l.jsx)(h,{type:"array"})," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"(false,)"})})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["Per-level booleans indicating whether to show a fill between the heading and the page number. Default is ",(0,l.jsx)(n.code,{children:"(false,)"}),". ",(0,l.jsx)(n.em,{children:"Last value in the array is not-repeated!"})]})}),(0,l.jsxs)(n.h3,{id:"paged",children:["paged : ",(0,l.jsx)(h,{type:"array"})," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"(false,)"})})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["Per-level booleans indicating whether to show the page number. Default is ",(0,l.jsx)(n.code,{children:"(false,)"}),". ",(0,l.jsx)(n.em,{children:"Last value in the array is not-repeated!"})]})}),(0,l.jsxs)(n.h3,{id:"numbering",children:["numbering : ",(0,l.jsx)(h,{type:"array"}

1)," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"()"})})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["Per-level numbering strings or ",(0,l.jsx)(n.code,{children:"none"})," overrides. Default is ",(0,l.jsx)(n.code,{children:"()"}),". ",(0,l.jsx)(n.em,{children:"Last value in the array is not-repeated!"})]})}),(0,l.jsxs)(n.h3,{id:"text-style",children:["text-style : ",(0,l.jsx)(h,{type:"array"})," | ",(0,l.jsx)(h,{type:"none"})," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"none"})})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["Per-level text style dicts. Default is ",(0,l.jsx)(n.code,{children:"none"})," (inherits current text style). See the parameters of ",(0,l.jsx)(n.code,{children:"text"})," (",(0,l.jsx)(n.a,{href:"https://typst.app/docs/reference/text/text/",children:"https://typst.app/docs/reference/text/text/"}),")."]})}),(0,l.jsxs)(n.h3,{id:"vspace",children:["vspace : ",(0,l.jsx)(h,{type:"array"})," | ",(0,l.jsx)(h,{type:"none"})," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"none"})})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["Per-level vertical space above each heading. Default is ",(0,l.jsx)(n.code,{children:"none"}),". ",(0,l.jsx)(n.em,{children:"Last value in the array is not-repeated!"})]})}),(0,l.jsxs)(n.h3,{id:"title",children:["title : ",(0,l.jsx)(h,{type:"str"})," | ",(0,l.jsx)(h,{type:"none"})," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"none"})})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["The title of the outline section. Default is ",(0,l.jsx)(n.code,{children:"none"}),"."]})}),(0,l.jsxs)(n.h3,{id:"indent",children:["indent : ",(0,l.jsx)(h,{type:"array"})," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"(0em,)"})})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["Per-level left indentation. Default is ",(0,l.jsx)(n.code,{children:"(0em,)"}),"."]})}),(0,l.jsxs)(n.h3,{id:"fill",children:["fill : ",(0,l.jsx)(h,{type:"array"})," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"(repeat[.],)"})})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["Per-level fill content between heading and page number. Default is ",(0,l.jsx)(n.code,{children:"(repeat[.],)"}),"."]})}),(0,l.jsxs)(n.h3,{id:"short-heading",children:["short-heading : ",(0,l.jsx)(h,{type:"bool"})," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"true"})})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["Whether to shorten headings that have labels using ",(0,l.jsx)(n.code,{children:"utils.short-heading"}),". Default is ",(0,l.jsx)(n.code,{children:"true"}),"."]})}),(0,l.jsxs)(n.h3,{id:"show-past",children:["show-past : ",(0,l.jsx)(h,{type:"array"})," | ",(0,l.jsx)(h,{type:"function"})," | ",(0,l.jsx)(h,{type:"none"})," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"none"})})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["Per-level booleans indicating whether to show headings for past sections. Default is ",(0,l.jsx)(n.code,{children:"none"}),", reverts to the cover behaviour of ",(0,l.jsx)(n.code,{children:"progressive-outline"}),". The last value in the array is used for all levels beyond the array length. \\ If a function is provided instead, the function is used to style the outline entries and the styles passed to custom-progressive-outline are ignored. It receives ",(0,l.jsx)(n.code,{children:"(level: int, it)"})," where ",(0,l.jsx)(n.code,{children:"it"})," is the outline entry element and ",(0,l.jsx)(n.code,{children:"level"})," is the heading level of that entry."]})}),(0,l.jsxs)(n.h3,{id:"show-current",children:["show-current : ",(0,l.jsx)(h,{type:"array"})," | ",(0,l.jsx)(h,{type:"function"})," | ",(0,l.jsx)(h,{type:"none"})," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"none"})})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["Per-level booleans. Defaul is ",(0,l.jsx)(n.code,{children:"none"}),". For more info see ",(0,l.jsx)(n.code,{children:"show-past"}),"."]})}),(0,l.jsxs)(n.h3,{id:"show-future",children:["show-future : ",(0,l.jsx)(h,{type:"array"})," | ",(0,l.jsx)(h,{type:"function"})," | ",(0,l.jsx)(h,{type:"none"})," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"none"})})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["Per-level booleans. Default is ",(0,l.jsx)(n.code,{children:"none"}),". For more info see ",(0,l.jsx)(n.code,{children:"show-past"}),"."]})}),(0,l.jsxs)(n.h3,{id:"style-current",children:["style-current : ",(0,l.jsx)(h,{type:"array"})," ",(0,l.jsx)(s,{children:(0,l.jsx)(n.code,{children:"none"})})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["Per level text style dicts which override text styles for the non-covered headings. Default is ",(0,l.jsx)(n.code,{children:"none"}),", which uses the styles from ",(0,l.jsx)(n.code,{children:"text-style"}),". See ",(0,l.jsx)(n.code,{children:"text-style"})," for more details."]})}),(0,l.jsxs)(n.h3,{id:"args",children:["..args : ",(0,l.jsx)(h,{type:"arguments"})]}),(0,l.jsx)(r,{children:(0,l.jsxs)(n.p,{children:["Additional arguments forwarded to the underlying ",(0,l.jsx)(n.code,{children:"outline"})," call, see ",(0,l.jsx)(n.a,{href:"https://typst.app/docs/reference/model/outline/",children:"https://typst.app/docs/reference/model/outline/"}),"."]})})]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"Returns:"})," ",(0,l.jsx)(h,{type:"content"})]})]})}function h(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(a,{...e})}):a(e)}function p(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},11151:(e,n,s)=>{s.d(n,{Z:()=>d,a:()=>t});var l=s(67294);const i={},r=l.createContext(i);function t(e){const n=l.useContext(r);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:t(e.components),l.createElement(r.Provider,{value:n},e.children)}}}]);