@sutton-signwriting/sgnw-components
Version:
a javascript package of web components for use with the SignWriting script.
76 lines (51 loc) • 2.71 kB
Markdown
[Read Me](README.md) |
[Using the Components](USAGE.md) |
[<sgnw-components />](SGNW-COMPONENTS.md) |
[<fsw-components />](FSW-COMPONENTS.md) |
[Change Log](CHANGELOG.md)
# Using the Sutton SignWriting Web Components
## Script tag
Put tags similar to this in HEAD
<script type="module" src="https://unpkg.com/@sutton-signwriting/sgnw-components@1.1.0/dist/sgnw-components/sgnw-components.esm.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/@sutton-signwriting/sgnw-components@1.1.0/dist/sgnw-components/sgnw-components.css"/>
Then use the elements anywhere in your template, JSX, html etc
## ES Modules
Put script tag in HEAD
<script type="module">
import { defineCustomElements } from 'https://unpkg.com/@sutton-signwriting/sgnw-components@1.1.0/loader/index.es2017.mjs';
defineCustomElements();
</script>
Then use the elements anywhere in your template, JSX, html etc
## Node modules
- Run `npm install @sutton-signwriting/sgnw-components --save`
- Put a script tag similar to this `<script src='node_modules/@sutton-signwriting/sgnw-components/dist/sgnw-components.js'></script>` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
## In a stencil-starter app
- Run `npm install @sutton-signwriting/sgnw-components --save`
- Add an import to the npm packages `import '@sutton-signwriting/sgnw-components';`
- Then you can use the element anywhere in your template, JSX, html etc
## Sutton SignWriting Web Components
**<sgnw-components />** use [SignWriting in Unicode (SWU)](https://tools.ietf.org/id/draft-slevinski-formal-signwriting-09.html#name-signwriting-in-unicode-swu) characters.
- [sgnw-symbol](SGNW-COMPONENTS.md#sgnw-symbol)
- [sgnw-sign](SGNW-COMPONENTS.md#sgnw-sign)
- [sgnw-vp](SGNW-COMPONENTS.md#sgnw-vp)
- [sgnw-button](SGNW-COMPONENTS.md#sgnw-button)
- [sgnw-palette-symbol](SGNW-COMPONENTS.md#sgnw-palette-symbol)
- [sgnw-palette](SGNW-COMPONENTS.md#sgnw-palette)
- [sgnw-signbox](SGNW-COMPONENTS.md#sgnw-signbox)
## Formal SignWriting Web Components
**<fsw-components />** use [Formal SignWriting in ASCII (FSW)](https://tools.ietf.org/id/draft-slevinski-formal-signwriting-09.html#name-formal-signwriting-in-ascii) characters.
- [fsw-symbol](FSW-COMPONENTS.md#fsw-symbol)
- [fsw-sign](FSW-COMPONENTS.md#fsw-sign)
- [fsw-vp](FSW-COMPONENTS.md#fsw-vp)
- [fsw-button](FSW-COMPONENTS.md#fsw-button)
- [fsw-palette-symbol](FSW-COMPONENTS.md#fsw-palette-symbol)
- [fsw-palette](FSW-COMPONENTS.md#fsw-palette)
- [fsw-signbox](FSW-COMPONENTS.md#fsw-signbox)