mwc-top-app-bar
A Material Components top app bar implementation using Web Components
Getting started
-
The easiest way to try out mwc-top-app-bar is to use one of these online tools:
-
Runs in all supported browsers: StackBlitz, Glitch
-
Runs in browsers with JavaScript Modules: JSBin, CodePen.
-
-
You can also copy this HTML file into a local file and run it in any browser that supports JavaScript Modules.
-
When you're ready to use mwc-top-app-bar 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.
-
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>
-
-
Add mwc-top-app-bar to your project:
npm i @material/mwc-top-app-bar
-
Import the mwc-top-app-bar definition into your HTML page:
<script type="module" src="@material/mwc-top-app-bar/index.js"></script>
Or into your module script:
import {Switch} from "@material/mwc-top-app-bar"
-
Create an instance of mwc-top-app-bar in your HTML page, or via any framework that supports rendering Custom Elements:
<mwc-top-app-bar>sentiment_very_satisfied</mwc-top-app-bar>
-
Install the Polymer CLI:
npm i -g polymer-cli
-
Run the development server and open a browser pointing to its URL:
polymer serve
mwc-top-app-bar 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-top-app-bar 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-top-app-bar.
-
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.