@authentic/mwc-top-app-bar
TypeScript icon, indicating that this package has built-in type declarations

0.9.0 • Public • Published

mwc-top-app-bar

A Material Components top app bar implementation using Web Components

Getting started

  • 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.

    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-top-app-bar to your project:

      npm i @authentic/mwc-top-app-bar

    3. Import the mwc-top-app-bar definition into your HTML page:

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

      Or into your module script:

      import { TopAppBar } from "@authentic/mwc-top-app-bar"

    4. 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></mwc-top-app-bar>

    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-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.

Readme

Keywords

none

Package Sidebar

Install

npm i @authentic/mwc-top-app-bar

Weekly Downloads

1

Version

0.9.0

License

Apache-2.0

Unpacked Size

286 kB

Total Files

14

Last publish

Collaborators

  • dashby
  • eporroa
  • luissardon
  • mmicheux
  • rodanato
  • timothyjoh
  • w.rojas