mirror of
https://github.com/picocss/pico.git
synced 2025-04-25 10:46:14 -04:00
49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import { createHTMLElement } from "../HTMLElement";
|
|
|
|
export default {
|
|
title: "Sectioning/Nav",
|
|
tags: ["autodocs"],
|
|
args: {
|
|
content: "Content",
|
|
},
|
|
// Render the <html> element
|
|
render: (args) => {
|
|
return createHTMLElement("nav", args);
|
|
},
|
|
};
|
|
|
|
export const Default = {};
|
|
|
|
export const MozillaExample = {
|
|
render: (args) => `<nav class="menu">
|
|
<ul>
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#">About</a></li>
|
|
<li><a href="#">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
`,
|
|
};
|
|
|
|
export const MozillaExampleInProse = {
|
|
render: (args) => `<nav>
|
|
<h2>Navigation</h2>
|
|
<p>
|
|
You are on my home page. To the north lies <a href="/blog">my blog</a>, from
|
|
whence the sounds of battle can be heard. To the east you can see a large
|
|
mountain, upon which many <a href="/school">school papers</a> are littered.
|
|
Far up this mountain you can spy a little figure who appears to be me,
|
|
desperately scribbling a <a href="/school/thesis">thesis</a>.
|
|
</p>
|
|
<p>
|
|
To the west are several exits. One fun-looking exit is labeled
|
|
<a href="https://games.example.com/">"games"</a>. Another more
|
|
boring-looking exit is labeled <a href="https://isp.example.net/">ISP™</a>.
|
|
</p>
|
|
<p>
|
|
To the south lies a dark and dank <a href="/about">contacts page</a>.
|
|
Cobwebs cover its disused entrance, and at one point you see a rat run
|
|
quickly out of the page.
|
|
</p>
|
|
</nav>`,
|
|
};
|