logo polydile dile-components

dile-input-search

Web Component to create a customized search input with the tipical search icon and a clear search functionality. Also it provides a "delay" property to wait when a keystroke occurs and when a search is emitted.

This component does not search anything by itself. It's only a search user interface you may use to create a search functionality as you need. Instead of making a search the component emits events with a keyword to tell others that the user want to perform a search action.

Installation

npm i @dile/ui

Usage

Import the component.

import '@dile/ui/components/input/input-search.js';

Use the component.

<dile-input-search></dile-input-search>

Properties

Methods

Custom events

{
  keyword: "the text searched"
}

CSS Custom Properties

You can customize it using CSS Custom Properties.

Custom property Description Default
--dile-icon-color Icon color 0.5rem
--dile-icon-size Icon size 24px
--dile-input-width Input element width 100%
--dile-input-border-width Input element border width 1px
--dile-input-border-color Input element border color #888
--dile-input-border-radius Input element border radius 5px
--dile-input-font-size Input element font size 1em
--dile-input-line-height Input element line height 1.5em
--dile-input-color Input text color #303030
--dile-input-background-color Color for the background input element #fff
--dile-input-padding Padding for the input text 5px
--dile-input-placeholder-color Placeholder color #ccc
--dile-input-focus-border-color Border color on focus state #6af

dile-input-search demos

Default search input

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

class MyComponent extends LitElement {
  static get styles() {
    return css`
      
    `
  }

  render() {
    return html`
      <dile-input-search id="search1" @dile-input-search=${this.searchSelected}></dile-input-search>
      <p>
        <button id="clear" @click=${this.clear}>Clear</button>
      </p>
      <div id="message1">Message...</div>
    `
  }
  searchSelected(e) {
    let keyword = e.detail.keyword;
    keyword = keyword ? 'Search is performed. Keyword is: ' + keyword : 'The keyword is cleared';
    this.shadowRoot.getElementById('message1').innerText = keyword;
  }
  clear() {
    this.shadowRoot.getElementById('search1').clear();
  }
}
customElements.define('my-component', MyComponent);
</script>
<my-component></my-component>

Styled search interface

<style>
  .styled {
    --dile-input-border-radius: 0;
    --dile-input-border-color: #e553e3;
    --dile-input-border-width: 4px;
    --dile-input-line-height: 2.5rem;
    --dile-input-background-color: #333;
    --dile-input-placeholder-color: #999;
    --dile-input-color: #fff;
    --dile-input-width: 300px;
    --dile-icon-size: 32px;
    --dile-icon-color: #c923c6;
  }
</style>
<dile-input-search 
  id="search2"
  class="styled" 
  placeholder="Search..."
></dile-input-search>