logo polydile dile-components

dile-selector

Web Component to create easily a generic selector interface from one value between several posibilities.

This component is created to use in more complex component, only to create a navigation interface.

For example it is is possible to use with a dile-pages component, to change the view when the selected item changes.

Installation

npm i @dile/dile-selector

Usage

Import the component.

import '@dile/dile-selector/dile-selector.js';
import '@dile/dile-selector/dile-selector-item.js'; 

Use the component.

<dile-selector selected="2">
  <dile-selector-item>One</dile-selector-item>
  <dile-selector-item>Two</dile-selector-item>
  <dile-selector-item>Three</dile-selector-item>
  <dile-selector-item>Four</dile-selector-item>
</dile-selector>

Properties

More complex example

The next example show how to use the attrForSelected property.

<dile-selector selected="posts" attrForSelected="name">
  <dile-selector-item icon="navigate_next" name="users">Users</dile-selector-item>
  <dile-selector-item icon="navigate_next" name="posts">Posts</dile-selector-item>
  <dile-selector-item icon="navigate_next" name="articles">Articles</dile-selector-item>
  <dile-selector-item icon="navigate_next" name="faq">FAQ</dile-selector-item>
  <dile-selector-item icon="navigate_next" name="contact">Contact</dile-selector-item>
</dile-selector>

Custom Events

dile-selector-item

This component implements a selection option.

If you like to use it you need to import the component.

import '@dile/dile-selector/dile-selector-item.js';

The use of this component is not mandatory. If you like to create your own selector element, with a custom UI, we recomend to use the dile-selector-mixin

Properties

CSS custom properties

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

Custom propertyDescriptionDefault
--dile-selector-padding-yThe padding top and bottom of the selection elements0.2rem
--dile-selector-padding-xThe padding left and right of the selection elements0.5rem
--dile-selector-background-colorThe option background colorTransparent
--dile-selector-text-colorThe option text color#000
--dile-selector-selected-text-colorThe selected option text color#fff
--dile-selector-selected-background-colorThe selected option background color#039be5;
--dile-selector-selected-font-weightThe selected option text font weightnormal
--dile-selector-icon-colorDefines the icon color#039be5
--dile-selector-selected-icon-colorDefines the icon color#fff
--dile-selector-icon-sizeIcon size20px
--dile-selector-text-decorationOnly for links when using hrefnone

dile-selector demos

Simple Example

In this example we are using the selected element index.

class MyComponent extends LitElement {

  render() {
    return html`
      <dile-selector id="select1">
        <dile-selector-item>One</dile-selector-item>
        <dile-selector-item>Two</dile-selector-item>
        <dile-selector-item>Three</dile-selector-item>
        <dile-selector-item>Four</dile-selector-item>
      </dile-selector>
      <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 item and one of the optional icons in the dile-selector-item.

class SecondComponent extends LitElement {

  render() {
    return html`
      <dile-selector id="select2" attrForSelected="name">
        <dile-selector-item icon="navigate_next" name="users">Users</dile-selector-item>
        <dile-selector-item icon="navigate_next" name="posts">Posts</dile-selector-item>
        <dile-selector-item icon="navigate_next" name="articles">Articles</dile-selector-item>
        <dile-selector-item icon="navigate_next" name="faq">FAQ</dile-selector-item>
        <dile-selector-item icon="navigate_next" name="contact">Contact</dile-selector-item>
      </dile-selector>
      <p id="msg1"></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-selector with dile-pages demo

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

<style>
main.selectionlayout {
  display: flex; 
  column-gap: 1.8rem;
  --dile-selector-selected-background-color: #fc9;
  --dile-selector-selected-text-color: blue;
  --dile-selector-selected-icon-color: orange;
  --dile-selector-icon-color: #aaa;
  --dile-selector-selected-font-weight: bold;
}
main.selectionlayout dile-selector {
  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-selector id="select2" attrForSelected="name" selectorId="selector" selected="home">
    <dile-selector-item icon="label_important" name="home">Home</dile-selector-item>
    <dile-selector-item icon="label_important" name="about">About</dile-selector-item>
    <dile-selector-item icon="label_important" name="contact">Contact</dile-selector-item>
  </dile-selector>
  <dile-pages attrForSelected="name" selectorId="selector" selected="home">
    <div name="home">
      <h2>Homepage</h2>
      <p>I am the home page</p>
    </div>
    <div name="about">
      <h2>About</h2>
      <p>I am the about page</p>
    </div>
    <div name="contact">
      <h2>Contact</h2>
      <p>I am the contact page</p>
    </div>
  </dile-pages>
</main>