logo polydile dile-components

dile-tabs

Web Component to create easily a generic tabs interface.

In this package there are two components, to implement a singular tab item and a complete group of tabs. You could use this component with more complex component to create a navigation between several options.

It is possible, for example, to use dile-tabs with a dile-pages, to change the view of the component when one tab is selected.

Installation

npm i @dile/ui

Usage

Import the component.

<script type="module">
  import '@dile/ui/components/tabs/dile-tabs.js';
</script>

Use the component

<dile-tabs selected="2">
  <dile-tab>One</dile-tab>
  <dile-tab>Two</dile-tab>
  <dile-tab>Three</dile-tab>
  <dile-tab>Four</dile-tab>
</dile-tabs>

Properties

More complex example

The next example show how to use the attrForSelected property.

<dile-tabs selected="posts" attrForSelected="name">
  <dile-tab name="users">Users</dile-tab>
  <dile-tab name="posts">Posts</dile-tab>
  <dile-tab name="articles">Articles</dile-tab>
  <dile-tab name="faq">FAQ</dile-tab>
  <dile-tab name="contact">Contact</dile-tab>
</dile-tabs>

Events

dile-selected-changed:

When selected property changes by a user interaction inside the <dile-tabs> component, it dispatch the dile-selected-changed custom event. You will recive the new selected value in the selected attribute in the detail event object property.

The detail object has this properties:

{
  selected: "tab_name"
  selectorId: "selector_id"
}

CSS custom properties

You can customize the tabs using the CSS custom properties bellow.

Custom property Description Default
--dile-tab-text-color The tab text color #666
--dile-tab-background-color The tab background color Transparent
--dile-tab-selected-text-color The tab text color #fff
--dile-tab-selected-background-color The tab background color #039be5;
--dile-tab-padding Content padding of the tab 8px 12px 6px 12px
--dile-tab-selected-line-height Defines selected tab line height 5px
--dile-tab-selected-line-color Defines selected tab line color #0070c0
--dile-tab-border-radius Tab top-left & top-right border radius 4px
--dile-tab-border Unselected tab border none
--dile-tab-selected-border Selected tab border none
--dile-tab-font-weight Tab font weight normal
--dile-tab-font-size Tab font size 1rem
--dile-tab-text-transform Tab text transform uppercase

dile-tabs demo

Simple Example

In this example we are using the selected element index.

<script type="module">
import { LitElement, html, css } from 'lit';

class MyComponent extends LitElement {

  render() {
    return html`
      <dile-tabs id="select1">
        <dile-tab>One</dile-tab>
        <dile-tab>Two</dile-tab>
        <dile-tab>Three</dile-tab>
        <dile-tab>Four</dile-tab>
      </dile-tabs>
      <p id="msg1"></p>
    `
  }
  firstUpdated() {
    this.shadowRoot.getElementById('select1').addEventListener('dile-selected-changed', (e) => {
      let textElement = this.shadowRoot.getElementById('msg1');
      textElement.innerText = "The value selected is: " + e.detail.selected;
    });
  }
}
customElements.define('my-component', MyComponent);
</script>
<my-component></my-component>

Selection by name Example

In this example we are using the selected name attribute in the dile-tab.

<script type="module">
import { LitElement, html, css } from 'lit';

class SecondComponent extends LitElement {

  static get styles() {
    return css`
      :host {
        --dile-tab-text-color: #ccc;
        --dile-tab-background-color: transparent;
        --dile-tab-selected-text-color: #396;
        --dile-tab-selected-background-color: transparent;
        --dile-tab-selected-line-color: #396;
      }
    `
  }

  render() {
    return html`
      <dile-tabs id="select2" attrForSelected="name" selected="users">
        <dile-tab name="users">Users</dile-tab>
        <dile-tab name="posts">Posts</dile-tab>
        <dile-tab name="articles">Articles</dile-tab>
      </dile-tabs>
      <p id="msg1">The value selected is: users</p>
    `
  }
  firstUpdated() {
    this.shadowRoot.getElementById('select2').addEventListener('dile-selected-changed', (e) => {
      let textElement = this.shadowRoot.getElementById('msg1');
      textElement.innerText = "The value selected is: " + e.detail.selected;
    });
  }
}
customElements.define('second-component', SecondComponent);
</script>
<second-component></second-component>

dile-tabs with dile-pages demo

Using dile-tabs in association with a dile-pages element.

Home About Contact

Homepage

I am the home page content...

About

I am the about page content...

Contact

I am the contact page content...

 
<style>
main.selectionlayout {
  display: flex; 
  flex-direction: column;
  row-gap: 1.8rem;
  --dile-tab-selected-background-color: #333;
  --dile-tab-background-color: #ddd;
  --dile-tab-border-radius: 0;
  --dile-tab-selected-line-color: orange;
  --dile-tab-selected-line-height: 3px;
  --dile-tab-selected-text-color: orange;
  --dile-tab-text-transform: none;
}
main.selectionlayout dile-tabs {
  margin-top: 0.4rem;
  width: 150px
}
main.selectionlayout dile-pages div {
  margin: 0;
  padding: 0;
}
main.selectionlayout dile-pages h2 {
  margin-top: 0;
}
</style>
<main class="selectionlayout">
  <dile-tabs id="select2" attrForSelected="name" selectorId="selector" selected="home">
    <dile-tab icon="label_important" name="home">Home</dile-tab>
    <dile-tab icon="label_important" name="about">About</dile-tab>
    <dile-tab icon="label_important" name="contact">Contact</dile-tab>
  </dile-tabs>
  <dile-pages attrForSelected="name" selectorId="selector" selected="home">
    <div name="home">
      <h2>Homepage</h2>
      <p>I am the home page content...</p>
    </div>
    <div name="about">
      <h2>About</h2>
      <p>I am the about page content...</p>
    </div>
    <div name="contact">
      <h2>Contact</h2>
      <p>I am the contact page content...</p>
    </div>
  </dile-pages>
</main>