On this page

Examples

The followings are some complete examples showcasing how to use ElementalComponent and its various features

The example uses the following technologies to make life easier, but of course ElementalComponent can be used without any of these

Abu for some helpers such as creation of ValueObject
Vite as a build tool... create a project with typescript support
Bulma CSS for some nice css effects
Support for Typescript
Support for SCSS / CSS

Setup

index.html

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Elemental Web Examples</title>
  </head>
  <body>
    <script type="module" src="./examples"></script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Elemental Web Examples</title>
  </head>
  <body>
    <script type="module" src="./examples"></script>
  </body>
</html>

Stateless Component Example

Stateful Component Example

Inheritance Example