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 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.
To start using this library, you can simply add a script tag in the head of your index.html:
<script src="https://unpkg.com/[email protected]/dist/cstsortan-components.js"></script>
- 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
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/[email protected]/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>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent