squark

Squark UI Components

Made Web Component with Svelte.

Get started

Use as Web Component

import { Input, registerCustomElement } from "squark";
import "squark/dist/style.css";

registerCustomElement({
  name: 's-input',
  component: Input,
  attributes: ['mode', 'type', 'size', 'allowClear', 'disabled', 'checked', 'value'],
  events: ['change'],
});

const el = document.querySelector("s-input");
el.props.value = "change input text";
el.addEventListener('change', (event) => {
  console.log(`typing ${event.detail}`);
});

<s-input class="my-input" onchange="handleInputChange" />

Use in Svelte

<script>
  import { Input } from "squark";
</script>

<Input class="my-input" />