xin-toggle

github | live demo | npm

blueprint src url https://tonioloewald.github.io/xin-toggle/dist/blueprint.js

To create your own web-component blueprint, simply use xin-toggle thus:

npx xin-toggle my-custom-element

The example web-component is a toggle-switch.

<xin-toggle id="basic" checked>
  <div slot="on">on</div>
  <div slot="off">off</div>
</xin-toggle>

Loading a blueprint

If you just want to bundle the component…

import { makeComponent } from 'xinjs'
import blueprint from 'xin-toggle'

const { creator } = makeBlueprint( 'xin-toggle', blueprint )

document.body.append( creator() )

If you want to use a CDN:

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/module.js'
</script>
<xin-loader>
  <xin-blueprint tag="xin-toggle" src="https://tonioloewald.github.io/xin-toggle/dist/blueprint.js"></xin-blueprint>
</xin-loader>
<xin-toggle></xin-toggle>

You can also use <xin-loader> and <xin-blueprint> or makeComponent to load blueprints at runtime.

Development

This project is designed for use with Bun.

The blueprint code is ./src/blueprint.ts and unless it's complicated there's no reason it can't all be in one source file.

./index.html exercises your blueprint.

To install dependencies:

bun install

To run:

bun start

Development

This project is designed for use with Bun.

The blueprint code is ./src/blueprint.ts and unless it's complicated there's no reason it can't all be in one source file.

./index.html exercises your blueprint.

To install dependencies:

bun install

To run:

bun start