@hartings/la-tabs v1.0.4

\

This webcomponent follows the open-wc recommendation.

Installation

yarn add @hartings/la-tabs

Usage

If you want to use the web component directly in your html, you can use the following code:

<script>
  import '@hartings/la-tabs';
</script>

<la-tabs>
  <div slot="Tab 1">Tab 1 content</div>
  <div slot="Tab 2">Tab 2 content</div>
</la-tabs>

If you want to get the web component class, you can do so by importing it. However, you have to add the custom element to your window as follows:

<script type="module">
  import { LaTabs } from '@hartings/la-tabs';
  window.customElements.define('la-tabs', LaTabs);
</script>

<la-tabs>
  <div slot="Tab 1">Tab 1 content</div>
  <div slot="Tab 2">Tab 2 content</div>
</la-tabs>

If you want to use the web component in an ECMAScript module and do not want to define the component yourself you can adjust the import:

<script type="module">
  import '@hartings/la-example/dist/src/la-tabs.js';
</script>

<la-tabs>
  <div slot="Tab 1">Tab 1 content</div>
  <div slot="Tab 2">Tab 2 content</div>
</la-tabs>

Testing with Web Test Runner

To execute a single test run:

yarn test

To run the tests in interactive watch mode run:

yarn test:watch

Local Demo with web-dev-server

yarn start

To run a local development server that serves the basic demo located in demo/index.html