@lit-component/message-box
Version:
A simple message-box web component
71 lines (65 loc) • 4.91 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><message-box> ⌲ Home</title>
<link rel="stylesheet" href="docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="prism-okaidia.css" rel="stylesheet" />
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="/node_modules/lit/polyfill-support.js"></script>
<script type="module" src="message-box.bundled.js"></script>
</head>
<body>
<header>
<h1><message-box></h1>
<h2>A web component just for me.</h2>
</header>
<nav>
<a href="">Home</a>
<a href="examples/">Examples</a>
<a href="api/">API</a>
<a href="install/">Install</a>
</nav>
<div id="main-wrapper">
<main>
<h1><message-box></h1>
<p><code><message-box></code> is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.</p>
<h2>As easy as HTML</h2>
<section class="columns">
<div>
<p><code><message-box></code> is just an HTML element. You can it anywhere you can use HTML!</p>
<pre class="language-html"><code class="language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>message-box</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> This is a message-box web component.<br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>message-box</span><span class="token punctuation">></span></span></code></pre>
</div>
<div>
<message-box>
<span slot="message">
This is a message-box web component.
</span>
<button slot="button">Close</button>
</message-box>
</div>
</section>
<h2>Configure with attributes</h2>
<section class="columns">
<div>
<p><code><message-box></code> can be configured with attributed in plain HTML.</p>
<pre class="language-html"><code class="language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>message-box</span><br> <span class="token attr-name">min-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12em<span class="token punctuation">"</span></span><br> <span class="token attr-name">radius</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>128vw<span class="token punctuation">"</span></span><br> <span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is a smooth one...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>message-box</span><span class="token punctuation">></span></span></code></pre>
</div>
<div>
<message-box min-width="12em" radius="128vw">
<span slot="message">This is a smooth one...</span>
</message-box>
</div>
</section>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
</p>
</footer>
</body>
</html>