cstsortan-components
This is a simple library containing small web components for building apps, like an appbar, a drawer and a bottom-modal. These components are build using Stencil
Stencil is also great for building entire apps (and PWAs). For that, use the stencil-app-starter.
Stencil
Stencil is a compiler for building fast web apps using Web Components.
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
Stencil components are just Web Components, so they work in any major framework or with no framework at all.
Adding the components to your project
To start using this library, you can simply add a script tag in the head of your index.html:
<script src="https://unpkg.com/cstsortan-components@0.0.1/dist/cstsortan-components.js"></script>
If you're using a bundler like webpack or rollup (like with a javascript framework)
- Run
npm i cstsortan-components --save - Then import the loader from your entry file:
import { defineCustomElements as initalizeCstsortanComponents} 'cstsortan/loader'; - And initialize the the components:
initalizeCstsortanComponents(window); - (for angular, you'll have to add the CUSTOM_ELEMENTS_SCHEMAS into the schemas of your module you are adding these components to)
- (In a stencil app you can just do an import like this:
import 'cstsortan/loader';) - Then you can use the elements anywhere in your template, JSX, html etc
Using the elements:
Here's an example that uses all three elements:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Stencil Component Starter</title>
<script src="https://unpkg.com/cstsortan-components@0.0.1/dist/cstsortan-components.js"></script>
</head>
<body>
<style>
cs-appbar {
user-select: none;
}
</style>
<cs-appbar>
<div id="btn-menu" slot="start">
<button id="btn-menu">Toggle Drawer</button>
</div>
<div id="btn-main">App Bar</div>
<div slot="end"></div>
</cs-appbar>
<side-drawer></side-drawer>
<cs-modal>
<p>Who's here?</p>
</cs-modal>
<script>
// Open the side-drawer when clicking the button
document.querySelector('#btn-menu').addEventListener('click', () => document.querySelector('side-drawer').openDrawer());
// Open the bottom modal when clicking the appbar title
document.querySelector('#btn-main').addEventListener('click', () => document.querySelector('cs-modal').openModal());
</script>
</body>
</html>