← Back


Distribution Bar Polymer 2 element




[ This description is mirrored from at on 2019-05-10 ]

Distribution Bar Web Component <alump-dbar>

Build Status Published on GitHub tag Bower GitHub issues

Online demo at

WebJar Maven dependency (Vaadin 10)

When 0.2.0 is released, you can pull webjar to your Vaadin 10 project with Maven dependency snipplet:



<alump-dbar values="[34,66]" class="alump-shade alump-r20" style="width: 100%;">

Width in pixels can be also defined with width attribute (width can not be left undefined):

<alump-dbar values="[34,66]" class="alump-shade alump-r20" width="300">


First install dependency to your (Polymer) project with Bower

bower install alump-dbar

Then link to element from your Polymer html file (your relative path might be different)

<link rel="import" href="../bower_components/alump-dbar/alump-dbar.html">

After this you can just add example above to your HTML file


0.2.0-alpha1 (2018-03-09)

  • Moved to alphas to try to figure out how to get webjars generated correctly
  • Work to pair web component with Vaadin 10 started

0.1.6 (2018-03-09)

  • Finally found the actual SemVer issue breaking webjaring, I hope.

0.1.5 (2018-03-09)

  • Fixing linting error left in 0.1.4
  • Also update some development dependencies

0.1.4 (2018-03-09)

  • Just trying resolve webjaring SemVer issues
  • Minor code clean ups
  • Upgrading dependencies to current versions

0.1.3 (2017-08-09)

  • Element will now automatically resize itself if size is changed because relative size to it's parent

0.1.2 (2017-08-07)

  • aria-label and aria-valuenow attributes are now generated for items
  • Item formatted can now return number, string or object (with 'text' and 'html' values). Object to be used when HTML coding is used.
  • Color of items can be now be defined in itemFormatter (will override theming colors when defined)
  • Using now background CSS property on items, to allow gradients and images
  • Fix naming of valuesum to valueSum
  • --alump-dbar-font-size and --alump-dbar-font-family custom styling properties added
  • Fix --alump-dbar-text-shadow to always apply when defined
  • Make update (schedule render) function public, usually there should not be need to call this

0.1.1 (2017-08-04)

  • Fixing project metadata to improve presentation at
  • Fix overdrawn content, adding --alump-dbar-padding variable

0.1.0 (2017-08-04)

  • Initial release

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.


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



  • polymer#^2.0.0
  • iron-resizable-behavior#^2.0.0
Apache License 2.0


Polymer 2.0+
Browser Independent