@hartings/la-tabs

<la-tabs>

This webcomponent follows the open-wc recommendation. This web component creates a tabbed interface by dynamically generating tabs.

Installation

yarn add "@hartings/la-tabs"

Usage

The default export provides the Web Component class and does not register the web component itself. This approach prevents side-effects and gives you direct access to the Web Component. To use the Web Component in your HTML, you need to register it yourself. The following code provides a simple example:

<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 prefer to use the web component without defining it yourself, you can adjust the import as follows:

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

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

Configuration

Add Tabs

To add a tab to the tab system, please add a HTML element with a slot name inside the la-tabs element. Each HTML element must have a unique slot attribute set (e.g. slot="Tab 1")! Without a slot name, the element will not be accessible through the tab navigation and will not be displayed. If two elements have the same name both entries will be displayed in the navigation, but both navigation entries will show the content of the first element, the other content is inaccessible.

<ELEMENT slot="UNIQUE NAME"></ELEMENT>

Default open Tab

To set the tab that is open by default you can add selectedTab="NAME" to the la-tabs element. The Name is case-sensitive and has to be an exact match to a slot name of a child element. The selectedTab can be dynamically updated.

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

Styling

The Web Component have a default style which can be overwritten using the CSS :part pseudo-selector. You cannot just pass down styling to the shadow dom, please use the pseudo-selector

la-tabs::part(KEYWORD)

with the following KEYWORD:

• tabs: General Navigation
• tab: Navigation Item
• tab-selected: Active Navigation Item
• content: Content of the selected Item

Troubleshooting

• tslib not found: please add this to your dev dependencies

yarn add tslib --dev

Further Development of Web Component

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