Directory

← Back

jas-breadcrumbs

Simple Breadcrumbs Menu

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/homerjonathan/jas-breadcrumbs on 2019-05-10 ]

<jas-breadcrumbs>

Simple Breadcrumbs Menu with Help Icon at the right side of the Page. A Polymer 2.0 Component Only.

Using the Component


  <link rel="import" href="../bower_components/jas-breadcrumbs/jas-breadcrumbs.html">
  <jas-breadcrumbs id="breadcrumbs" selected="{{page}}"></jas-breadcrumbs>
  

This will create a menu. When the item is select the 'id' above is set to the attribute and also a message is fired. You can use your most prefered method of processing the event.

You set the breadcrumbs by sending an array in this example format below. It uses text for what appears on the menu whilst the id is what is outputted when clicked.

 var breadCrumbMenu = [];
          breadCrumbMenu.push({text: "Main", id: "main"});
          breadCrumbMenu.push({text: "Second", id: "second"});
          breadCrumbMenu.push({text: "Third", id: "third"});
          this.$.breadcrumbs.setMenu(breadCrumbMenu);

Setting Colours

This component supports

  • --app-primary-color For the Help Icon Colour
  • --breadcrumb-highlight Colour of Link when the Mouse Hovers over the Breadcrumb Option
  • --breadcrumb-color1 Normal Colour of Breadcrumb Text

Events

There are two ways. The first example below. So you can trap the output in the Polymer way.

  <jas-breadcrumbs id="breadcrumbs" selected="{{page}}"></jas-breadcrumbs>
  

Or you can trap the fired dispatch event and you can use it to change the page. Enter this into your script to trap the message.

    document.addEventListener("page_change", function(e) {
        console.log("Event: Page Change Requested - ", e.detail.page);
        // Do Your Page Change Stuff Here
    });

When the help button is pressed it sets the attribute selected to "help_page" but also dispatches an event message of "page_help".

    document.addEventListener("page_help", function(e) {
        console.log("Help Page Requested");
        // Do Your Help Page Stuff Here
    });

Hooking into the Component

It also links itself to its base class. So the last instance will overwrite the value, but normally you would only have one of these anyhow. This is useful "other" way of talking to the component. If there is a neater way let me know!


  JasBreadcrumbs.hook 
  

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#Polymer/polymer#1.9 - 2
Released
2017-06-25
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Polymer 1.0+ in 0.1.0
Browser
Browser Independent

jas-breadcrumbs - Vaadin Add-on Directory

Simple Breadcrumbs Menu jas-breadcrumbs - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/homerjonathan/jas-breadcrumbs](https://github.com//homerjonathan/jas-breadcrumbs/blob/0.2.10/README.md) on 2019-05-10 ]** # \ Simple Breadcrumbs Menu with Help Icon at the right side of the Page. A Polymer 2.0 Component Only. ## Using the Component ```html ``` This will create a menu. When the item is select the 'id' above is set to the attribute and also a message is fired. You can use your most prefered method of processing the event. You set the breadcrumbs by sending an array in this example format below. It uses text for what appears on the menu whilst the id is what is outputted when clicked. ```javascript var breadCrumbMenu = []; breadCrumbMenu.push({text: "Main", id: "main"}); breadCrumbMenu.push({text: "Second", id: "second"}); breadCrumbMenu.push({text: "Third", id: "third"}); this.$.breadcrumbs.setMenu(breadCrumbMenu); ``` ## Setting Colours This component supports * **--app-primary-color** For the Help Icon Colour * **--breadcrumb-highlight** Colour of Link when the Mouse Hovers over the Breadcrumb Option * **--breadcrumb-color1** Normal Colour of Breadcrumb Text ## Events There are two ways. The first example below. So you can trap the output in the Polymer way. ```html ``` Or you can trap the fired dispatch event and you can use it to change the page. Enter this into your script to trap the message. ```javascript document.addEventListener("page_change", function(e) { console.log("Event: Page Change Requested - ", e.detail.page); // Do Your Page Change Stuff Here }); ``` When the help button is pressed it sets the attribute selected to "help_page" but also dispatches an event message of "page_help". ```javascript document.addEventListener("page_help", function(e) { console.log("Help Page Requested"); // Do Your Help Page Stuff Here }); ``` ## Hooking into the Component It also links itself to its base class. So the last instance will overwrite the value, but normally you would only have one of these anyhow. This is useful "other" way of talking to the component. If there is a neater way let me know! ```javascript JasBreadcrumbs.hook ```
Online Demo
License
Documentation
View on GitHub
GitHub Homepage
Issue tracker

jas-breadcrumbs version 0.1.0
### Dependencies Polymer/polymer#^1.4.0 * paper-icon-button#Polymer/polymer#*

jas-breadcrumbs version 0.1.1
### Dependencies Polymer/polymer#^1.4.0 * paper-icon-button#Polymer/polymer#*

jas-breadcrumbs version 0.1.2
### Dependencies Polymer/polymer#^1.4.0 * paper-icon-button#Polymer/polymer#*

jas-breadcrumbs version 0.2.0
### Dependencies Polymer/polymer#^2.0.0

jas-breadcrumbs version 0.2.1
### Dependencies Polymer/polymer#1 - 2

jas-breadcrumbs version 0.2.2
### Dependencies Polymer/polymer#1.9 - 2

jas-breadcrumbs version 0.2.3
### Dependencies Polymer/polymer#1.9 - 2

jas-breadcrumbs version 0.2.4
### Dependencies * polymer#Polymer/polymer#1.9 - 2

jas-breadcrumbs version 0.2.5
### Dependencies * polymer#Polymer/polymer#1.9 - 2

jas-breadcrumbs version 0.2.6
### Dependencies * polymer#Polymer/polymer#1.9 - 2

jas-breadcrumbs version 0.2.7
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * paper-icon-button#^2.0.0 * iron-iconset-svg#^2.0.0

jas-breadcrumbs version 0.2.8
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * paper-icon-button#^2.0.0 * iron-iconset-svg#^2.0.0 * iron-icon#^2.0.0

jas-breadcrumbs version 0.2.9
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * paper-icon-button#^2.0.0 * iron-iconset-svg#^2.0.0 * iron-icon#^2.0.0

jas-breadcrumbs version 0.2.10
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * paper-icon-button#^2.0.0 * iron-iconset-svg#^2.0.0 * iron-icon#^2.0.0

Online