alump-dbar

Distribution Bar Polymer 2 element

View larger

Close

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

Distribution Bar Web Component <alump-dbar>

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:

<dependency>
    <groupId>org.webjars.bowergithub.alump</groupId>
    <artifactId>alump-dbar</artifactId>
    <version>0.2.0</version>
</dependency>

Examples

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

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">
</alump-dbar>

Usage

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

Releases

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.

Links

• Online Demo
• View on GitHub
• GitHub Homepage
• Issue tracker
• Documentation

Compatibility