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/dile-tabs

Usage

Import the component.

<script type="module">
  import '@dile/dile-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 propertyDescriptionDefault
--dile-tab-text-colorThe tab text color#666
--dile-tab-background-colorThe tab background colorTransparent
--dile-tab-selected-text-colorThe tab text color#fff
--dile-tab-selected-background-colorThe tab background color#039be5;
--dile-tab-paddingContent padding of the tab8px 12px 6px 12px
--dile-tab-selected-line-heightDefines selected tab line height5px
--dile-tab-selected-line-colorDefines selected tab line color#0070c0
--dile-tab-border-radiusTab top-left & top-right border radius4px
--dile-tab-borderUnselected tab bordernone
--dile-tab-selected-borderSelected tab bordernone
--dile-tab-font-weightTab font weightnormal
--dile-tab-font-sizeTab font size1rem
--dile-tab-text-transformTab text transformuppercase

dile-tabs demo

Simple Example

In this example we are using the selected element index.

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);
export const JsStory = () => html`<my-component></my-component>`;

Selection by name Example

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

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);
export const JsStory2 = () => html`<second-component></second-component>`;

dile-tabs with dile-pages demo

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

<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>