<exmg-search>

exmg-search

Exmg search provides an search input in material 3 style

Installation

npm install @exmg/exmg-search

Example Usage

<exmg-search placeHolder="Filter table.." @search-value-change="${() => console.log('update')}"></exmg-search>

API

Properties/Attributes

| Name | Type | Default | Description | | ------------- | --------- | -------- | ----------------------------------------------- | | bubbles | boolean | false | Whether or not the change events need to bubble | | placeHolder | string | Search | Default value for placeholder |

Styles

| Custom property | Description | Default | | -------------------------------------- | ---------------------- | -------------------------------------------- | | --exmg-search-outline-color | outline color | --md-outlined-field-hover-outline-width; | | --exmg-search-outline-width | outline width | 1px; | | --exmg-search-container-shape | container shape | 4px; | | --exmg-search-focus-input-text-color | focus input text color | --md-sys-color-on-surface; | | --exmg-search-focus-label-text-color | focus label text color | --md-sys-color-primary; | | --exmg-search-focus-icon-color | focus icon color | --md-sys-color-on-surface-variant; | | --exmg-search-focus-outline-color | focus outline color | --md-sys-color-primary; | | --exmg-search-focus-outline-width | focus outline width | 1px; | | --exmg-search-hover-input-text-color | hover input text color | --md-sys-color-on-surface; | | --exmg-search-hover-label-text-color | hover label text color | --md-sys-color-on-surface; | | --exmg-search-hover-outline-color | hover outline color | --md-sys-color-on-surface | | --exmg-search-input-text-color | input text color | --md-sys-color-on-surface; | | --exmg-search-input-text-font | input text font | --md-sys-typescale-body-large-font; | | --exmg-search-input-text-line-height | input text line height | --md-sys-typescale-body-large-line-height; | | --exmg-search-input-text-size | input text size | --md-sys-typescale-body-large-size; | | --exmg-search-input-text-weight | input text weight | --md-sys-typescale-body-large-weight; | | --exmg-search-label-text-color | label text color | md-sys-color-on-surface-variant; | | --exmg-search-label-text-font | label text font | --md-sys-typescale-body-large-font; | | --exmg-search-label-text-line-height | label line height | --md-sys-typescale-body-large-line-height; | | --exmg-search-label-text-size | label text size | --md-sys-typescale-body-large-size; | | --exmg-search-label-text-weight | label weight | --md-sys-typescale-body-large-weight; | | --exmg-search-icon-color | icon color | --md-sys-color-on-surface-variant; | | --exmg-search-icon-size | icon size | 24px; | | --exmg-search-outline-color | outline color | --md-sys-color-outline; | | --exmg-search-outline-width | outline color width | 1px; |

Additional references

• Demo