Skip to content
A web component
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
docs docs: ✏️ Update events docs and add it to sidebar (#101) Mar 15, 2019
example
src
tests refactor: 💡 Register not replacing element with div anymore (#104) Mar 15, 2019
typings/dasherize
.gitignore
.travis.yml
CONTRIBUTING.md add contribution guidelines (#108) Mar 19, 2019
README.md
doczrc.js ⚠️ [WIP/POC] Improvement/change to docsify (#69) Dec 22, 2018
jest.config.js Feature/add coverage to tests (#80) Jan 24, 2019
package-lock.json
package.json
rollup.config.js
stats.html
tsconfig.json Update bundle generation (#75) Jan 14, 2019

README.md

Biotope Element

Build Status codecov

Installation

You can install the biotope element in your project using npm

npm install @biotope/element --save

or yarn

yarn add @biotope/element --save

After that to use it, import it in your project:
import Component from '@biotope/element';

Usage

To use the biotope element, you have to extend it with your custom class:

import Component from '@biotope/element';

export class MyButton extends Component {
  public static componentName = 'my-button';
  
  public render() {
    return this.html`Hello World`;
  }
}

After defining your class which you can do using existing methods (link) you have to call register on the class itself to use it in the html: index.js

import Component from '@biotope/element';

export class MyButton extends Component {
  public static componentName = 'my-button';
  
  public render() {
    return this.html`Hello World 🐤`;
  }
}

MyButton.register();

After that you can use it in your html like that: index.html

<script src="index.js"></script>  
<my-button></my-button>

This will result inthe following html:

<my-button>
  Hello world 🐤
</my-button>
You can’t perform that action at this time.