mwc-select

A Material Components tab indicator implementation using Web Components

Getting started

• When you're ready to use mwc-select in a project, install it via npm. To run the project in the browser, a module-compatible toolctain is required. We recommend installing the Polymer CLI and using its development server as follows.

  1. Ensure the webcomponents polyfills are included in your HTML page

     • Install webcomponents polyfills

       npm i @webcomponents/webcomponentsjs

     • Add webcomponents polyfills to your HTML page

       <script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

  2. Add mwc-select to your project:

     npm i @authentic/mwc-select

  3. Import the mwc-select definition into your HTML page:

     <script type="module" src="@authentic/mwc-select/index.js"></script>

     Or into your module script:

     import { Select } from "@authentic/mwc-select"

  4. Create an instance of mwc-select in your HTML page, or via any framework that supports rendering Custom Elements:

       <mwc-select label="Choose an item...">
           <select slot="select">
               <option slot="option" value="one" disabled selected>this is choice one</option>
           </select>
       </mwc-select>

       <mwc-select label="Choose an item...">
           <mwc-menu slot="menu">
               <mwc-list>
                   <mwc-list-item label="this is choice one" value="one"></mwc-list-item>
               </mwc-list>
           </mwc-menu>
       </mwc-select>

  5. Install the Polymer CLI:

     npm i -g polymer-cli

  6. Run the development server and open a browser pointing to its URL:

     polymer serve

  mwc-select is published on npm using JavaScript Modules. This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.

  However, since mwc-select uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server polymer serve automatically handles this transform.

  Tools like WebPack and Rollup can also be used to serve and/or bundle mwc-select.

Supported Browsers

The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.