Extollo/ui
2
0
Fork 0
generated from garrettmills/template-npm-typescript
Code Issues Pull Requests Projects Releases Wiki Activity
b64fb999e7
ui/index.html

233 lines
12 KiB
HTML
Raw Normal View History

Start ui framework with web components
2021-11-27 02:45:45 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
Modal & theming
2021-11-27 05:26:46 +00:00
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif
Start ui framework with web components
2021-11-27 02:45:45 +00:00
}
</style>
<script>
if ( typeof $ !== 'function' ) {
window.$ = (...args) => document.querySelector(...args)
}
</script>
<script src="dist/extollo-ui.dist.js" type="module"></script>
</head>
<body>
<ex-page>
<ex-nav appName="Extollo"></ex-nav>
Modal & theming
2021-11-27 05:26:46 +00:00
<h1>Header 1</h1>
<p>
Example anchor tag: <a href="#">look no further</a>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor.
</p>
<p>
Some <i>more</i>, <em>text</em>, <b>goes</b>, <strong>here</strong>, <code>like this</code>.
</p>
<p>
<strong>Block quote:</strong>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor. </blockquote>
<blockquote class="ex-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor. </blockquote>
<blockquote class="ex-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor. </blockquote>
<blockquote class="ex-warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor. </blockquote>
<blockquote class="ex-danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor. </blockquote>
</p>
<h2>Header 2</h2>
<p>
<b>Code blocks</b>
<pre><code>import time
# Quick, count to ten!
for i in range(10):
# (but not *too* quick)
time.sleep(0.5)
print i</code></pre>
</p>
<h3>Header 3</h3>
<ol>
<li>
Testing
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Still testing</li>
<li>
some before code
<pre><code>const bob = 'bar'
console.log('bar')</code></pre>
some following code
</li>
</ol>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading h</h6>
<p>
A line:
</p>
<hr>
<p>Here's a link to <a href="http://foo.bar">a website</a>, to a <a href="local-doc.html">local doc</a>, and to a <a href="#an-h2-header">section heading in the current doc</a>. Here's a footnote <a href="#fn1" id="fnref1"><sup>1</sup></a>.</p>
<p>Tables can look like this:</p>
<table>
<caption>
Shoes, their sizes, and what they're made of
</caption>
<thead>
<tr >
<th align="left">size</th>
<th align="left">material</th>
<th align="left">color</th>
</tr>
</thead>
<tbody>
<tr >
<td align="left">9</td>
<td align="left">leather</td>
<td align="left">brown</td>
</tr>
<tr >
<td align="left">10</td>
<td align="left">hemp canvas</td>
<td align="left">natural</td>
</tr>
<tr >
<td align="left">11</td>
<td align="left">glass</td>
<td align="left">transparent</td>
</tr>
</tbody>
</table>
<p>Multi-line tables:</p>
<table style="width:46%;">
<colgroup>
<col width="13%">
<col width="31%">
</colgroup>
<thead>
<tr>
<th align="left">keyword</th>
<th align="left">text</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">red</td>
<td align="left">Sunsets, apples, and other red or reddish things.</td>
</tr>
<tr>
<td align="left">green</td>
<td align="left">Leaves, grass, frogs and other things it's not easy being.</td>
</tr>
</tbody>
</table>
<p>A horizontal rule follows.</p>
<hr>
<p>Images are responsive by default:</p>
<div>
<!-- <img alt="example image" src="#" title="An exemplary image">-->
<p>example image</p>
</div>
<hr>
<h1 id="form-elements">Form Elements</h1>
<form>
<div id="forms__input">
<h3>Input fields</h3>
<p><label for="input__text">Text Input</label> <input id="input__text" placeholder="Text Input" type="text"></p>
<p><label for="input__password">Password</label> <input id="input__password" placeholder="Type your Password" type="password"></p>
<p><label for="input__webaddress">Web Address</label> <input id="input__webaddress" placeholder="http://yoursite.com" type="url"></p>
<p><label for="input__emailaddress">Email Address</label> <input id="input__emailaddress" placeholder="name@email.com" type="email"></p>
<p><label for="input__phone">Phone Number</label> <input id="input__phone" placeholder="(999) 999-9999" type="tel"></p>
<p><label for="input__search">Search</label> <input id="input__search" placeholder="Enter Search Term" type="search"></p>
<p><label for="input__text2">Number Input</label> <input id="input__text2" placeholder="Enter a Number" type="number"></p>
<p><label for="input__text3">Error</label> <input id="input__text3" placeholder="Text Input" type="text"></p>
<p><label for="input__text4">Valid</label> <input id="input__text4" placeholder="Text Input" type="text"></p>
</div>
<p><a href="#top">[Top]</a></p>
<div id="forms__select">
<h3>Select menus</h3>
<p><label for="select">Select</label> <select id="select">
<optgroup label="Option Group">
<option>
Option One
</option>
<option>
Option Two
</option>
<option>
Option Three
</option>
</optgroup>
</select></p>
</div>
<p><a href="#top">[Top]</a></p>
<div id="forms__checkbox">
<h3>Checkboxes</h3>
<ul style="list-style:none;">
<li><label for="checkbox1"><input checked="checked" id="checkbox1" name="checkbox" type="checkbox"> Choice A</label></li>
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
</ul>
</div>
<p><a href="#top">[Top]</a></p>
<div id="forms__textareas">
<h3>Textareas</h3>
<p><label for="textarea">Textarea</label>
<textarea cols="48" id="textarea" placeholder="Enter your message here" rows="8"></textarea></p>
</div>
<p><a href="#top">[Top]</a></p>
<div id="forms__html5">
<div id="forms__action">
<h3>Action buttons</h3>
<p><input type="submit" value="input type=submit"> <input type="button" value="input type=button"> <input type="reset" value="input type=reset"> <input disabled type="submit" value="input disabled"></p>
<p><input type="submit" value="input type=submit" class="ex-secondary"> <input type="button" value="input type=button" class="ex-secondary"> <input type="reset" value="input type=reset" class="ex-secondary"> <input disabled type="submit" value="input disabled" class="ex-secondary"></p>
<p><input type="submit" value="input type=submit" class="ex-danger"> <input type="button" value="input type=button" class="ex-danger"> <input type="reset" value="input type=reset" class="ex-danger"> <input disabled type="submit" value="input disabled" class="ex-danger"></p>
<p><input type="submit" value="input type=submit" class="ex-success"> <input type="button" value="input type=button" class="ex-success"> <input type="reset" value="input type=reset" class="ex-success"> <input disabled type="submit" value="input disabled" class="ex-success"></p>
<p><input type="submit" value="input type=submit" class="ex-warning"> <input type="button" value="input type=button" class="ex-warning"> <input type="reset" value="input type=reset" class="ex-warning"> <input disabled type="submit" value="input disabled" class="ex-warning"></p>
<p><button type="submit">&lt;button type=submit&gt;</button> <button type="button">&lt;button type=button&gt;</button> <button type="reset">&lt;button type=reset&gt;</button> <button disabled type="button">&lt;button disabled&gt;</button></p>
</div>
<p><a href="#top">[Top]</a></p>
</div>
</form>
Start ui framework with web components
2021-11-27 02:45:45 +00:00
</ex-page>
Modal & theming
2021-11-27 05:26:46 +00:00
<ex-modal header="Modal header goes here">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor.
</p>
</ex-modal>
Start ui framework with web components
2021-11-27 02:45:45 +00:00
<script>
window.addEventListener('load', () => {
$('ex-nav').tap(el => {
el.items = [{ title: 'Home', name: 'home' }]
el.addEventListener('onItemClick', ev => {
console.log('item clicked!', ev)
})
})
})
</script>
</body>
</html>
Reference in New Issue Copy Permalink