@lit-component/message-box
Version:
A simple message-box web component
133 lines (98 loc) • 3.57 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><message-box> ⌲ Docs</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</a>
<a href="../install/">Install</a>
</nav>
<div id="main-wrapper">
<main>
<h1>API</h1>
<h2><message-box></h2>
<div>
A simple message-box web component.
</div>
<h3>Properties</h3>
<table>
<tr>
<th>Name</th><th>Attribute</th><th>Description</th><th>Type</th><th>Default</th>
</tr>
<tr>
<td>height</td><td>height</td><td>The height of component</td><td>string</td><td>"initial"</td>
</tr>
<tr>
<td>width</td><td>width</td><td>The width of component</td><td>string</td><td>"initial"</td>
</tr>
<tr>
<td>minWidth</td><td>min-width</td><td>The min-width of component</td><td>string</td><td>"initial"</td>
</tr>
<tr>
<td>border</td><td>border</td><td>The `border` css property of component</td><td>string</td><td>"0"</td>
</tr>
<tr>
<td>color</td><td>color</td><td>The `color` css property of component</td><td>string</td><td>"255, 255, 255"</td>
</tr>
<tr>
<td>radius</td><td>radius</td><td>The `border-radius` of component</td><td>string</td><td>"0"</td>
</tr>
<tr>
<td>shadow</td><td>shadow</td><td>The `box-shadow` css property of component</td><td>string</td><td>"0, 1rem, 1rem"</td>
</tr>
<tr>
<td>out</td><td>out</td><td>The out method of component. one of "right"|"top".</td><td>string</td><td>""</td>
</tr>
<tr>
<td>timeout</td><td>timeout</td><td>The display time of the component.</td><td>string</td><td>"0"</td>
</tr>
</table>
<h3>Slots</h3>
<table>
<tr>
<th>Name</th><th>Description</th>
</tr>
<tr>
<td>message</td><td>The 'message' component that needs to be displayed, the most basic such as `SPAN`</td>
</tr>
<tr>
<td>button</td><td>`BUTTON`s that need to be displayed</td>
</tr>
</table>
<h3>CSS Shadow Parts</h3>
<table>
<tr>
<th>Name</th><th>Description</th>
</tr>
<tr>
<td>--message-box-background-color</td><td>Set background color of component</td>
</tr>
<tr>
<td>--message-box-opacity</td><td>Set opacity of component</td>
</tr>
</table>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
</p>
</footer>
</body>
</html>