@authentic/mwc-tab-indicator NPM

mwc-tab-indicator

A Material Components tab indicator implementation using Web Components

Getting started

When you're ready to use mwc-tab-indicator 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-tab-indicator to your project:
  npm i @authentic/mwc-tab-indicator
3. Import the mwc-tab-indicator definition into your HTML page:
  <script type="module" src="@authentic/mwc-tab-indicator/index.js"></script>
  Or into your module script:
  import { TabIndicator } from "@authentic/mwc-tab-indicator"
4. Create an instance of mwc-tab-indicator in your HTML page, or via any framework that supports rendering Custom Elements:
  <mwc-tab-indicator></mwc-tab-indicator>
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-tab-indicator 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-tab-indicator 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-tab-indicator.

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.