9.0.4 • Published 1 year ago

@exmg/exmg-search v9.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

<exmg-search> Published on npm

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

NameTypeDefaultDescription
bubblesbooleanfalseWhether or not the change events need to bubble
placeHolderstringSearchDefault value for placeholder

Styles

Custom propertyDescriptionDefault
--exmg-search-outline-coloroutline color--md-outlined-field-hover-outline-width;
--exmg-search-outline-widthoutline width1px;
--exmg-search-container-shapecontainer shape4px;
--exmg-search-focus-input-text-colorfocus input text color--md-sys-color-on-surface;
--exmg-search-focus-label-text-colorfocus label text color--md-sys-color-primary;
--exmg-search-focus-icon-colorfocus icon color--md-sys-color-on-surface-variant;
--exmg-search-focus-outline-colorfocus outline color--md-sys-color-primary;
--exmg-search-focus-outline-widthfocus outline width1px;
--exmg-search-hover-input-text-colorhover input text color--md-sys-color-on-surface;
--exmg-search-hover-label-text-colorhover label text color--md-sys-color-on-surface;
--exmg-search-hover-outline-colorhover outline color--md-sys-color-on-surface
--exmg-search-input-text-colorinput text color--md-sys-color-on-surface;
--exmg-search-input-text-fontinput text font--md-sys-typescale-body-large-font;
--exmg-search-input-text-line-heightinput text line height--md-sys-typescale-body-large-line-height;
--exmg-search-input-text-sizeinput text size--md-sys-typescale-body-large-size;
--exmg-search-input-text-weightinput text weight--md-sys-typescale-body-large-weight;
--exmg-search-label-text-colorlabel text colormd-sys-color-on-surface-variant;
--exmg-search-label-text-fontlabel text font--md-sys-typescale-body-large-font;
--exmg-search-label-text-line-heightlabel line height--md-sys-typescale-body-large-line-height;
--exmg-search-label-text-sizelabel text size--md-sys-typescale-body-large-size;
--exmg-search-label-text-weightlabel weight--md-sys-typescale-body-large-weight;
--exmg-search-icon-coloricon color--md-sys-color-on-surface-variant;
--exmg-search-icon-sizeicon size24px;
--exmg-search-outline-coloroutline color--md-sys-color-outline;
--exmg-search-outline-widthoutline color width1px;

Additional references

9.0.4

1 year ago

9.0.3

1 year ago

9.0.1

1 year ago