Search

README

Demo

Components

mdc-search-bar
mdc-search-view

Status

Component	Ready to use
mdc-search-bar	Nearly Yes
mdc-search-view	No

Todo

Replace icon(normal button element) to icon-button in search-bar.

Hide Avatar

Code

<mdc-search-bar>
    <mdc-icon slot="avatar" name="search"></mdc-icon>
</mdc-search-bar>

<mdc-search-bar hide-avatar></mdc-search-bar>

Leading Icon

Code

<mdc-search-bar>
    <mdc-icon-button slot="leading-icon">
        <mdc-icon>search</mdc-icon>
    </mdc-icon-button>
</mdc-search-bar>

<mdc-search-bar>
    <mdc-icon-button slot="leading-icon">
        <mdc-icon>menu</mdc-icon>
    </mdc-icon-button>
</mdc-search-bar>

Supporting Text

Code

<mdc-search-bar supporting-text="Search"></mdc-search-bar>

<mdc-search-bar supporting-text="Type to search..."></mdc-search-bar>

Trailing Icon

Code

<mdc-search-bar>
    <mdc-icon-button slot="trailing-icon">
        <mdc-icon>mic</mdc-icon>
    </mdc-icon-button>
</mdc-search-bar>

<mdc-search-bar>
    <mdc-icon-button slot="trailing-icon">
        <mdc-icon>mic</mdc-icon>
    </mdc-icon-button>
    <mdc-icon-button slot="trailing-icon">
        <mdc-icon>tune</mdc-icon>
    </mdc-icon-button>
</mdc-search-bar>

Value

Code

<mdc-search-bar></mdc-search-bar>

<mdc-search-bar value="hello"></mdc-search-bar>