mirror of
https://github.com/picocss/pico.git
synced 2025-04-25 18:56:15 -04:00
58 lines
1.1 KiB
TypeScript
58 lines
1.1 KiB
TypeScript
|
import { createHTMLElement } from "../HTMLElement";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
title: "Sectioning/Search",
|
||
|
|
tags: ["autodocs"],
|
||
|
|
args: {
|
||
|
|
content: "Content",
|
||
|
|
},
|
||
|
|
// Render the <html> element
|
||
|
|
render: (args) => {
|
||
|
|
return createHTMLElement("search", args);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Default = {};
|
||
|
|
|
||
|
|
export const MozillaExample = {
|
||
|
|
render: (args) => `<search>
|
||
|
|
<label>
|
||
|
|
Find and filter your query
|
||
|
|
<input type="search" id="query" />
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" id="exact-only" />
|
||
|
|
Exact matches only
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h3>Results:</h3>
|
||
|
|
<ul id="results">
|
||
|
|
<!-- search result content -->
|
||
|
|
</ul>
|
||
|
|
<output id="no-results">
|
||
|
|
<!-- no results content -->
|
||
|
|
</output>
|
||
|
|
</section>
|
||
|
|
</search>
|
||
|
|
`,
|
||
|
|
};
|
||
|
|
|
||
|
|
export const MozillaExample2 = {
|
||
|
|
render: (args) => `<header>
|
||
|
|
<h1>Car rental agency</h1>
|
||
|
|
<search title="Website">...</search>
|
||
|
|
</header>
|
||
|
|
<main>
|
||
|
|
<h2>Cars available for rent</h2>
|
||
|
|
<search title="Cars">
|
||
|
|
<h3>Filter results</h3>
|
||
|
|
...
|
||
|
|
</search>
|
||
|
|
<article>
|
||
|
|
<!-- search result content -->
|
||
|
|
</article>
|
||
|
|
</main>
|
||
|
|
`,
|
||
|
|
};
|