UNPKG

@webwriter/chemdraw

Version:

Periodic table of the elements. Each element can be focused on to get a brief overview of its properties.

github.com/webwriter-app/chemdraw

webwriter-app/chemdraw

60 lines (37 loc) • 2.05 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
# Chemdraw (`@webwriter/chemdraw@2.1.1`) [License: MIT](LICENSE) | Version: 2.1.1 Periodic table of the elements. Each element can be focused on to get a brief overview of its properties. ## `PeriodicTable` (`<webwriter-periodic-table>`) ### Usage Use with a CDN (e.g. [jsdelivr](https://jsdelivr.com)): ```html <link href="https://cdn.jsdelivr.net/npm/@webwriter/chemdraw/widgets/webwriter-periodic-table.css" rel="stylesheet"> <script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/chemdraw/widgets/webwriter-periodic-table.js"></script> <webwriter-periodic-table></webwriter-periodic-table> ``` Or use with a bundler (e.g. [Vite](https://vite.dev)): ``` npm install @webwriter/chemdraw ``` ```html <link href="@webwriter/chemdraw/widgets/webwriter-periodic-table.css" rel="stylesheet"> <script type="module" src="@webwriter/chemdraw/widgets/webwriter-periodic-table.js"></script> <webwriter-periodic-table></webwriter-periodic-table> ``` ## Fields | Name (Attribute Name) | Type | Description | Default | Reflects | | :-------------------: | :--: | :---------: | :-----: | :------: | | `selectedElement` (`selectedElement`) | `Element` | The element object of the selected element | `periodicTable.elements[0]` | ✓ | *Fields including [properties](https://developer.mozilla.org/en-US/docs/Glossary/Property/JavaScript) and [attributes](https://developer.mozilla.org/en-US/docs/Glossary/Attribute) define the current state of the widget and offer customization options.* ## Events | Name | Description | | :--: | :---------: | | focus | - | *[Events](https://developer.mozilla.org/en-US/docs/Web/Events) are dispatched by the widget after certain triggers.* ## Editing config | Name | Value | | :--: | :---------: | *The [editing config](https://webwriter.app/docs/packages/configuring/#editingconfig) defines how explorable authoring tools such as [WebWriter](https://webwriter.app) treat the widget.* *No public methods, slots, custom CSS properties, or CSS parts.* --- *Generated with @webwriter/build@1.9.0*