add example of props in ts

This commit is contained in:
Fred K. Schott 2021-03-21 22:56:36 -07:00
parent e1782f9dc9
commit f28590e640
2 changed files with 16 additions and 4 deletions

View file

@ -1,3 +1,7 @@
<script astro>
export let props: {version: string};
</script>
<nav class="snow-nav"> <nav class="snow-nav">
<button id="toc-drawer-button" class="snow-nav-mobile-open" type="button" aria-expanded="false" <button id="toc-drawer-button" class="snow-nav-mobile-open" type="button" aria-expanded="false"
aria-controls="nav-primary"> aria-controls="nav-primary">

View file

@ -1,15 +1,23 @@
<script astro>
export let props: {
title: string,
inputPath: string,
headers: { text: string, slug: string }[]
};
</script>
<script type="module" defer src="/js/index.js"></script> <script type="module" defer src="/js/index.js"></script>
<aside class="snow-toc snow-toc__subnav snow-view-subnav"> <aside class="snow-toc snow-toc__subnav snow-view-subnav">
<h2 class="content-title"> <h2 class="content-title">
{props.title} {props.title}
</h2> </h2>
{props.headers.length > 0 && <div> {props.headers.length > 0 && <div>
<h4 class="snow-toc-section-header">On this page</h4> <h4 class="snow-toc-section-header">On this page</h4>
<nav class="toc"> <nav class="toc">
<ol> <ol>
{props.headers.map((heading) => { {props.headers.map((heading) => {
return <li><a href={"#" + heading.slug}>{heading.text}</a></li> return <li><a href={"#" + heading.slug}>{heading.text}</a></li>
})} })}
</ol> </ol>
</nav> </nav>