Px-app-nav is a Predix UI component which can be used as a navigation bar or as a drawer for applications.
Use px-app-nav to cleanly navigate portions or pages of a application. The navigation can be minimized or expanded to reveal the navigation items, which can have sub-items. The navigation can host other web components or authentication such as the px-login web component. Navigation items can use icons to better communicate with the user.
- node.js
- npm
- bower
- Install the webcomponents-lite.js polyfill to add support for web components and custom elements to your application.
First, install the component via bower on the command line.
bower install px-app-nav --save
Second, import the component to your application with the following tag in your head.
<link rel="import" href="/bower_components/px-app-nav/px-app-nav.html"/>
Finally, use the component in your application:
<px-app-nav></px-app-nav>
Read the full API and view the demo here.
Events follow the Polymer data-binding standards.
You can can attach listeners by using one of the methods below:
- Polymer Event listener
- on- annotated event listener
- addEventListener vanila Javascript method
From the component's directory...
$ npm install
$ bower install
$ gulp sass
From the component's directory, to start a local server run:
$ gulp serve
Navigate to the root of that server (e.g. http://localhost:8080/) in a browser to open the API documentation page, with link to the "Demo" / working examples.
By default gulp serve is configured to enable LiveReload and will be watching for modifications in your root directory as well as /css.
Please use Github Issues to submit any bugs you might find.