UNPKG

13.1 kBMarkdownView Raw
1[Read Me](README.md) |
2[Using the Components](USAGE.md) |
3[<sgnw-components />](SGNW-COMPONENTS.md) |
4[<fsw-components />](FSW-COMPONENTS.md) |
5[Change Log](CHANGELOG.md)
6
7---
8
9# Sutton SignWriting Web Components
10
11**<sgnw-components />** use [SignWriting in Unicode (SWU)](https://tools.ietf.org/id/draft-slevinski-formal-signwriting-09.html#name-signwriting-in-unicode-swu) characters.
12
13- [sgnw-symbol](SGNW-COMPONENTS.md#sgnw-symbol)
14- [sgnw-sign](SGNW-COMPONENTS.md#sgnw-sign)
15- [sgnw-vp](SGNW-COMPONENTS.md#sgnw-vp)
16- [sgnw-button](SGNW-COMPONENTS.md#sgnw-button)
17- [sgnw-palette-symbol](SGNW-COMPONENTS.md#sgnw-palette-symbol)
18- [sgnw-palette](SGNW-COMPONENTS.md#sgnw-palette)
19- [sgnw-signbox](SGNW-COMPONENTS.md#sgnw-signbox)
20
21---
22
23## sgnw-symbol
24
25The sgnw-symbol component can be used to create a symbol image
26
27### sgnw-symbol
28<sgnw-symbol symbol="񄵡"></sgnw-symbol>
29
30 <sgnw-symbol symbol="񄵡"></sgnw-symbol>
31
32### sgnw-symbol with style string
33<sgnw-symbol symbol="񄵡" styling="-CZ2"></sgnw-symbol>
34
35 <sgnw-symbol symbol="񄵡" styling="-CZ2"></sgnw-symbol>
36
37<!-- Auto Generated Below -->
38
39
40### Properties
41
42| Property | Attribute | Description | Type | Default |
43| --------- | --------- | ------------------------ | -------- | ----------- |
44| `styling` | `styling` | Style String for symbol | `string` | `undefined` |
45| `symbol` | `symbol` | SWU character for symbol | `string` | `undefined` |
46
47
48### Dependencies
49
50#### Used by
51
52 - [sgnw-vp](#sgnw-vp)
53
54#### Graph
55```mermaid
56graph TD;
57 sgnw-vp --> sgnw-symbol
58
59```
60
61----------------------------------------------
62
63
64
65## sgnw-sign
66
67The sgnw-sign component can be used to create a sign image
68
69### sgnw-sign
70<sgnw-sign sign="𝠀񁳴񁳶񉌍񉌕񁳲񁳸𝠃𝤭𝤩񁳼𝣭𝣤񁳴𝤉𝣤񉌍𝤡𝣺񉌕𝣠𝣺񁳺𝣭𝤑񁳲𝤉𝤑"></sgnw-sign>
71
72 <sgnw-sign sign="𝠀񁳴񁳶񉌍񉌕񁳲񁳸𝠃𝤭𝤩񁳼𝣭𝣤񁳴𝤉𝣤񉌍𝤡𝣺񉌕𝣠𝣺񁳺𝣭𝤑񁳲𝤉𝤑"></sgnw-sign>
73
74### sgnw-sign with style string
75<sgnw-sign sign="𝠀񁳴񁳶񉌍񉌕񁳲񁳸𝠃𝤭𝤩񁳼𝣭𝣤񁳴𝤉𝣤񉌍𝤡𝣺񉌕𝣠𝣺񁳺𝣭𝤑񁳲𝤉𝤑" styling="-CZ2"></sgnw-sign>
76
77 <sgnw-sign sign="𝠀񁳴񁳶񉌍񉌕񁳲񁳸𝠃𝤭𝤩񁳼𝣭𝣤񁳴𝤉𝣤񉌍𝤡𝣺񉌕𝣠𝣺񁳺𝣭𝤑񁳲𝤉𝤑" styling="-CZ2"></sgnw-sign>
78
79<!-- Auto Generated Below -->
80
81
82### Properties
83
84| Property | Attribute | Description | Type | Default |
85| --------- | --------- | --------------------- | -------- | ----------- |
86| `sign` | `sign` | SWU string for sign | `string` | `undefined` |
87| `styling` | `styling` | Style String for sign | `string` | `undefined` |
88
89
90### Dependencies
91
92#### Used by
93
94 - [sgnw-vp](#sgnw-vp)
95
96#### Graph
97```mermaid
98graph TD;
99 sgnw-vp --> sgnw-sign
100
101```
102
103----------------------------------------------
104
105
106
107## sgnw-vp
108
109The sgnw-vp component can be used to create a sign text paragraph
110
111### sgnw-vp
112<sgnw-vp vp="𝠀񀀒񀀚񋚥񋛩𝠃𝤟𝤩񋛩𝣵𝤐񀀒𝤇𝣤񋚥𝤐𝤆񀀚𝣮𝣭 𝠀񂇢񂇈񆙡񋎥񋎵𝠃𝤛𝤬񂇈𝤀𝣺񂇢𝤄𝣻񋎥𝤄𝤗񋎵𝤃𝣟񆙡𝣱𝣸 𝠀񅨑񀀙񆉁𝠃𝤙𝤞񀀙𝣷𝤀񅨑𝣼𝤀񆉁𝣳𝣮 񏌁𝣢𝤂 𝠀񀕁𝠃𝤍𝤕񀕁𝣾𝣷 𝠀񂌢񂇷񆙡񈗦𝠃𝤩𝤛񂌢𝣢𝣱񂇷𝣬𝤉񆙡𝤍𝣽񈗦𝤜𝤎 񏊡𝣡𝤂 𝠀񀀡𝠃𝤎𝤕񀀡𝣿𝣷 𝠀񀀒񉁩񌏁𝠃𝤮𝤙񌏁𝣴𝣴񀀒𝤙𝣻񉁩𝤙𝣟 𝠀񀕁񀕉񆇡񈩡񈩽񆇡񋺁񌀇񌀃𝠃𝤲𝤡񀕉𝣨𝤃񀕁𝤖𝤃񌀇𝣴𝣴񆇡𝤙𝣶񆇡𝣩𝣶񈩡𝤊𝣢񈩽𝣕𝣡񌀃𝣴𝣴񋺁𝣽𝣗 񏊡𝣡𝤂 𝠀񀕡𝠃𝤎𝤕񀕡𝣿𝣷 𝠀񀀒񉁩񌏁𝠃𝤮𝤙񌏁𝣴𝣴񀀒𝤙𝣻񉁩𝤙𝣟 𝠀񀂁񂇻񈟃񆕁𝠃𝤣𝤘񂇻𝤈𝤌񆕁𝣹𝤁񀂁𝤍𝣵񈟃𝣩𝣽 𝠀񀀡񋎥񀀁𝠃𝤡𝤖񀀁𝤒𝣸񀀡𝣫𝣸񋎥𝣻𝣷 𝠀񀀓񃛆񆿅񆕁𝠃𝤣𝤟񀀓𝤅𝣯񆕁𝤅𝣽񃛆𝣪𝣮񆿅𝤅𝤐 񏌁𝣢𝤂 𝠀񂇢񉳍񂇂񂇈𝠃𝤬𝤘񂇢𝤕𝣵񂇈𝣡𝣴񂇂𝣤𝣵񉳍𝣿𝣼 𝠀񀀒񀀚񋠥񋡩𝠃𝤝𝤪񋡩𝣷𝤊񀀒𝤈𝣡񋠥𝤍𝤃񀀚𝣯𝣪 𝠀񃧁񃧉񆿅񆿕񋸥𝠃𝤨𝤛񆿕𝣭𝤉񃧁𝤌𝣱񃧉𝣥𝣱񆿅𝤔𝤊񋸥𝣿𝤕 񏌁𝣢𝤂 𝠀񅡁񂇸񈗨񈗨񂇑񂇙񇀥񇀵𝠃𝤤𝤸񂇸𝣨𝣚񂇑𝤕𝤝񂇙𝣳𝤝񅡁𝣼𝣦񇀵𝣱𝣺񈗨𝤊𝣔񇀥𝤔𝣻񈗨𝤖𝣞 𝠀񄹸񈗦񄾘𝠃𝤭𝤥񄹸𝣞𝣦񄾘𝤔𝤌񈗦𝣽𝣾 𝠃𝤗𝤜񀀋𝣹𝤍񀁂𝣵𝣱 񏊡𝣡𝤂 𝠀񆅁񇅅𝠃𝤏𝤙񆅁𝣿𝣳񇅅𝣾𝤇 񏌁𝣢𝤂 𝠃𝤦𝤖񄵡𝣧𝣷񆅁𝤁𝤆񃉡𝤔𝣸 񏊡𝣡𝤂 𝠃𝤧𝤬񅩱𝤊𝤝񍳡𝣴𝣴 𝠃𝤼𝤘񃛋𝣳𝣶񃛃𝤇𝣶񈙇𝤞𝣵񈙓𝣐𝣵񆇡𝤂𝤍 񏊡𝣡𝤂 𝠀񂋣񂋫񆕁񇆡𝠃𝤜𝤞񇆡𝣹𝣯񂋣𝤁𝤆񂋫𝣱𝤋񆕁𝣿𝣿 𝠀񀟡񆄩񆕁񈟃񍩁𝠃𝤟𝥄񆄩𝤉𝤵񀟡𝤐𝤕񆕁𝤁𝤥񈟃𝣰𝤟񍩁𝣴𝣴 񏊡𝣡𝤂 𝠃𝤹𝤰񅊰𝣒𝣣񅊂𝣴𝣝񈙆𝤈𝣺񈙖𝣥𝣼񅑢𝤠𝤏񅒐𝣺𝤐 𝠀񃁁񃁉񋠩񋡭񋸡𝠃𝤦𝤬񃁁𝤇𝤝񃁉𝣥𝤑񋡭𝣯𝣨񋠩𝤌𝣵񋸡𝤀𝣠 񏌁𝣢𝤂 𝠃𝤦𝤖񄵡𝣧𝣷񆅁𝤁𝤆񃉡𝤔𝣸 𝠀񃧁񃧉񆿅񆿕񋸥𝠃𝤨𝤛񆿕𝣭𝤉񃧁𝤌𝣱񃧉𝣥𝣱񆿅𝤔𝤊񋸥𝣿𝤕 񏊡𝣡𝤂 𝠀񀀒񀀚񋠥񋡩𝠃𝤝𝤪񋡩𝣷𝤊񀀒𝤈𝣡񋠥𝤍𝤃񀀚𝣯𝣪 𝠀񅡁񂇇񉨬𝠃𝤖𝤥񂇇𝣶𝣦񅡁𝣾𝣵񉨬𝣶𝤂 𝠀񆅱񆅹񇆥񇆵񌁵𝠃𝤢𝥇񆅱𝤎𝤤񆅹𝣯𝤤񇆥𝤉𝤹񇆵𝣩𝤹񌁵𝣴𝣯 񏌁𝣢𝤂"></sgnw-vp>
113
114 <sgnw-vp vp="𝠀񀀒񀀚񋚥񋛩𝠃𝤟𝤩񋛩𝣵𝤐񀀒𝤇𝣤񋚥𝤐𝤆񀀚𝣮𝣭 𝠀񂇢񂇈񆙡񋎥񋎵𝠃𝤛𝤬񂇈𝤀𝣺񂇢𝤄𝣻񋎥𝤄𝤗񋎵𝤃𝣟񆙡𝣱𝣸 𝠀񅨑񀀙񆉁𝠃𝤙𝤞񀀙𝣷𝤀񅨑𝣼𝤀񆉁𝣳𝣮 񏌁𝣢𝤂 𝠀񀕁𝠃𝤍𝤕񀕁𝣾𝣷 𝠀񂌢񂇷񆙡񈗦𝠃𝤩𝤛񂌢𝣢𝣱񂇷𝣬𝤉񆙡𝤍𝣽񈗦𝤜𝤎 񏊡𝣡𝤂 𝠀񀀡𝠃𝤎𝤕񀀡𝣿𝣷 𝠀񀀒񉁩񌏁𝠃𝤮𝤙񌏁𝣴𝣴񀀒𝤙𝣻񉁩𝤙𝣟 𝠀񀕁񀕉񆇡񈩡񈩽񆇡񋺁񌀇񌀃𝠃𝤲𝤡񀕉𝣨𝤃񀕁𝤖𝤃񌀇𝣴𝣴񆇡𝤙𝣶񆇡𝣩𝣶񈩡𝤊𝣢񈩽𝣕𝣡񌀃𝣴𝣴񋺁𝣽𝣗 񏊡𝣡𝤂 𝠀񀕡𝠃𝤎𝤕񀕡𝣿𝣷 𝠀񀀒񉁩񌏁𝠃𝤮𝤙񌏁𝣴𝣴񀀒𝤙𝣻񉁩𝤙𝣟 𝠀񀂁񂇻񈟃񆕁𝠃𝤣𝤘񂇻𝤈𝤌񆕁𝣹𝤁񀂁𝤍𝣵񈟃𝣩𝣽 𝠀񀀡񋎥񀀁𝠃𝤡𝤖񀀁𝤒𝣸񀀡𝣫𝣸񋎥𝣻𝣷 𝠀񀀓񃛆񆿅񆕁𝠃𝤣𝤟񀀓𝤅𝣯񆕁𝤅𝣽񃛆𝣪𝣮񆿅𝤅𝤐 񏌁𝣢𝤂 𝠀񂇢񉳍񂇂񂇈𝠃𝤬𝤘񂇢𝤕𝣵񂇈𝣡𝣴񂇂𝣤𝣵񉳍𝣿𝣼 𝠀񀀒񀀚񋠥񋡩𝠃𝤝𝤪񋡩𝣷𝤊񀀒𝤈𝣡񋠥𝤍𝤃񀀚𝣯𝣪 𝠀񃧁񃧉񆿅񆿕񋸥𝠃𝤨𝤛񆿕𝣭𝤉񃧁𝤌𝣱񃧉𝣥𝣱񆿅𝤔𝤊񋸥𝣿𝤕 񏌁𝣢𝤂 𝠀񅡁񂇸񈗨񈗨񂇑񂇙񇀥񇀵𝠃𝤤𝤸񂇸𝣨𝣚񂇑𝤕𝤝񂇙𝣳𝤝񅡁𝣼𝣦񇀵𝣱𝣺񈗨𝤊𝣔񇀥𝤔𝣻񈗨𝤖𝣞 𝠀񄹸񈗦񄾘𝠃𝤭𝤥񄹸𝣞𝣦񄾘𝤔𝤌񈗦𝣽𝣾 𝠃𝤗𝤜񀀋𝣹𝤍񀁂𝣵𝣱 񏊡𝣡𝤂 𝠀񆅁񇅅𝠃𝤏𝤙񆅁𝣿𝣳񇅅𝣾𝤇 񏌁𝣢𝤂 𝠃𝤦𝤖񄵡𝣧𝣷񆅁𝤁𝤆񃉡𝤔𝣸 񏊡𝣡𝤂 𝠃𝤧𝤬񅩱𝤊𝤝񍳡𝣴𝣴 𝠃𝤼𝤘񃛋𝣳𝣶񃛃𝤇𝣶񈙇𝤞𝣵񈙓𝣐𝣵񆇡𝤂𝤍 񏊡𝣡𝤂 𝠀񂋣񂋫񆕁񇆡𝠃𝤜𝤞񇆡𝣹𝣯񂋣𝤁𝤆񂋫𝣱𝤋񆕁𝣿𝣿 𝠀񀟡񆄩񆕁񈟃񍩁𝠃𝤟𝥄񆄩𝤉𝤵񀟡𝤐𝤕񆕁𝤁𝤥񈟃𝣰𝤟񍩁𝣴𝣴 񏊡𝣡𝤂 𝠃𝤹𝤰񅊰𝣒𝣣񅊂𝣴𝣝񈙆𝤈𝣺񈙖𝣥𝣼񅑢𝤠𝤏񅒐𝣺𝤐 𝠀񃁁񃁉񋠩񋡭񋸡𝠃𝤦𝤬񃁁𝤇𝤝񃁉𝣥𝤑񋡭𝣯𝣨񋠩𝤌𝣵񋸡𝤀𝣠 񏌁𝣢𝤂 𝠃𝤦𝤖񄵡𝣧𝣷񆅁𝤁𝤆񃉡𝤔𝣸 𝠀񃧁񃧉񆿅񆿕񋸥𝠃𝤨𝤛񆿕𝣭𝤉񃧁𝤌𝣱񃧉𝣥𝣱񆿅𝤔𝤊񋸥𝣿𝤕 񏊡𝣡𝤂 𝠀񀀒񀀚񋠥񋡩𝠃𝤝𝤪񋡩𝣷𝤊񀀒𝤈𝣡񋠥𝤍𝤃񀀚𝣯𝣪 𝠀񅡁񂇇񉨬𝠃𝤖𝤥񂇇𝣶𝣦񅡁𝣾𝣵񉨬𝣶𝤂 𝠀񆅱񆅹񇆥񇆵񌁵𝠃𝤢𝥇񆅱𝤎𝤤񆅹𝣯𝤤񇆥𝤉𝤹񇆵𝣩𝤹񌁵𝣴𝣯 񏌁𝣢𝤂"></sgnw-vp>
115
116
117<!-- Auto Generated Below -->
118
119
120### Properties
121
122| Property | Attribute | Description | Type | Default |
123| ---------- | ---------- | ------------- | --------- | ----------- |
124| `colorize` | `colorize` | Colorize flag | `boolean` | `undefined` |
125| `vp` | `vp` | SWU text | `string` | `undefined` |
126
127
128### Dependencies
129
130#### Depends on
131
132- [sgnw-sign](#sgnw-sign)
133- [sgnw-symbol](#sgnw-symbol)
134
135#### Graph
136```mermaid
137graph TD;
138 sgnw-vp --> sgnw-sign
139 sgnw-vp --> sgnw-symbol
140
141```
142
143----------------------------------------------
144
145
146
147## sgnw-button
148
149The sgnw-button component can be used to create buttons with symbols, signs, and svg.
150
151### Basic Example
152
153<sgnw-button symbol="񄵡"></sgnw-button>
154
155 <sgnw-button symbol="񄵡"></sgnw-button>
156
157<!-- Auto Generated Below -->
158
159
160### Properties
161
162| Property | Attribute | Description | Type | Default |
163| -------- | --------- | ------------------------ | -------- | ----------- |
164| `sign` | `sign` | SWU string for sign | `string` | `undefined` |
165| `svg` | `svg` | SVG icon | `string` | `undefined` |
166| `symbol` | `symbol` | SWU character for symbol | `string` | `undefined` |
167
168
169### Dependencies
170
171#### Used by
172
173 - [sgnw-palette](#sgnw-palette)
174
175#### Graph
176```mermaid
177graph TD;
178 sgnw-palette --> sgnw-button
179
180```
181
182----------------------------------------------
183
184
185
186## sgnw-palette-symbol
187
188The sgnw-palette-symbol component is used inside the sgnw-palette.
189
190### Basic Example
191
192<sgnw-palette-symbol style="height:5rem;width:5rem;display:inline-block" symbol="񄵡"></sgnw-palette-symbol>
193
194 <sgnw-palette-symbol symbol="񄵡"></sgnw-palette-symbol>
195
196<!-- Auto Generated Below -->
197
198
199### Properties
200
201| Property | Attribute | Description | Type | Default |
202| -------- | --------- | ------------------------ | -------- | ----------- |
203| `symbol` | `symbol` | SWU character for symbol | `string` | `undefined` |
204
205
206### Events
207
208| Event | Description | Type |
209| -------------------- | --------------------------------------- | -------------------------------------------------------------------------- |
210| `paletteSymbolClick` | click event for the symbol palette | `CustomEvent<string>` |
211| `paletteSymbolDrop` | drop event for the signbox and sequence | `CustomEvent<{ encoding: string; symbol: string; x: number; y: number; }>` |
212
213
214### Dependencies
215
216#### Used by
217
218 - [sgnw-palette](#sgnw-palette)
219
220#### Graph
221```mermaid
222graph TD;
223 sgnw-palette --> sgnw-palette-symbol
224 style sgnw-palette-symbol fill:#f9f,stroke:#333,stroke-width:4px
225```
226
227----------------------------------------------
228
229
230
231## sgnw-palette
232
233The sgnw-palette components allows for access to the symbols of the ISWA 2010.
234
235### Basic Example
236
237<div style="height: 30vh; width: 90%; border: 1px solid yellow;"><sgnw-palette orientation="horizontal" size="small"></sgnw-palette></div>
238
239 <sgnw-palette orientation="horizontal" size="small"></sgnw-palette>
240
241<!-- Auto Generated Below -->
242
243
244### Properties
245
246| Property | Attribute | Description | Type | Default |
247| ------------- | ------------- | --------------------------------- | -------------------------------- | ------------- |
248| `alphabet` | `alphabet` | set of symbols | `object \| string` | `iswa2010SWU` |
249| `base` | `base` | mid level symbol selection | `string` | `null` |
250| `group` | `group` | top level symbol selection | `string` | `null` |
251| `lower` | `lower` | flag for small and medium palette | `boolean` | `false` |
252| `more` | `more` | flag for small palette | `boolean` | `false` |
253| `orientation` | `orientation` | orientation of palette | `"horizontal" \| "vertical"` | `"vertical"` |
254| `size` | `size` | size of palette | `"large" \| "medium" \| "small"` | `"small"` |
255
256
257### Dependencies
258
259#### Depends on
260
261- [sgnw-button](#sgnw-button)
262- [sgnw-palette-symbol](#sgnw-palette-symbol)
263
264#### Graph
265```mermaid
266graph TD;
267 sgnw-palette --> sgnw-button
268 sgnw-palette --> sgnw-palette-symbol
269
270```
271
272----------------------------------------------
273
274
275
276## sgnw-signbox
277
278The sgnw-signbox component is currently a placeholder for future development. It currently listens for the paletteSymbolDrop event and console logs the results.
279
280### Basic Example
281
282<div style="height: 30vh; width: 30%; border: 1px solid yellow;"><sgnw-signbox></sgnw-signbox></div>
283
284 <sgnw-signbox></sgnw-signbox>
285
286<!-- Auto Generated Below -->
287
288
289----------------------------------------------
290
291