Chemdraw (@webwriter/[email protected])

License: MIT | 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):

<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):

npm install @webwriter/chemdraw

<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 and attributes define the current state of the widget and offer customization options.

Events

| Name | Description | | :--: | :---------: | | focus | - |

Events are dispatched by the widget after certain triggers.

Editing config

| Name | Value | | :--: | :---------: |

The editing config defines how explorable authoring tools such as WebWriter treat the widget.

No public methods, slots, custom CSS properties, or CSS parts.

Generated with @webwriter/[email protected]