fc662728eb
There is no build for the element or site utilities like PrismJS yet, so this site only works locally at the moment.
54 lines
2.6 KiB
HTML
54 lines
2.6 KiB
HTML
|
|
<!doctype html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><my-element> ⌲ Examples ⌲ Basic</title>
|
|
<link rel="stylesheet" href="/docs/docs.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
|
|
<link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
|
|
<script type="module" src="/my-element.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1><my-element></h1>
|
|
<h2>A web component just for me.</h2>
|
|
</header>
|
|
|
|
<nav>
|
|
<a href="/docs/">Home</a>
|
|
<a href="/docs/examples/">Examples</a>
|
|
<a href="/docs/api/">API</a>
|
|
<a href="/docs/install/">Install</a>
|
|
</nav>
|
|
<div id="main-wrapper">
|
|
<main>
|
|
<h2>Basic Use</h2>
|
|
<style>
|
|
my-element p {
|
|
border: solid 1px blue;
|
|
padding: 8px;
|
|
}
|
|
</style>
|
|
<my-element>
|
|
<p>This is child content</p>
|
|
</my-element>
|
|
<h3>CSS</h3>
|
|
<pre class="language-css"><code class="language-css"><span class="highlight-line"> <span class="token selector">p</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span></span></code></pre>
|
|
<h3>HTML</h3>
|
|
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-element</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is child content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>
|
|
Made with
|
|
<a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
|
|
</p>
|
|
</footer>
|
|
</body>
|
|
</html> |