Distribution Bar Polymer 2 element

[ This description is mirrored from README.md at github.com/alump/alump-dbar on 2019-05-10 ]

Distribution Bar Web Component <alump-dbar>

Build Status Published on webcomponents.org GitHub tag Bower GitHub issues

Online demo at webcomponents.org

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


Link to this version
ImportedReleased 10 March 2018Apache License 2.0
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save alump/alump-dbar"#0.2.0-alpha1"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.2.0-alpha1


  • polymer#^2.0.0
  • iron-resizable-behavior#^2.0.0