Directory

← Back

alump-dbar

Distribution Bar Polymer 2 element

Author

Rating

Popularity

<100

[ 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:

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

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#^2.0.0
  • iron-resizable-behavior#^2.0.0
Released
2018-03-10
Maturity
IMPORTED
License
Apache License 2.0

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

alump-dbar - Vaadin Add-on Directory

Distribution Bar Polymer 2 element alump-dbar - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/alump/alump-dbar](https://github.com//alump/alump-dbar/blob/v0.2.0-alpha1/README.md) on 2019-05-10 ]** # Distribution Bar Web Component \ [![Build Status](https://travis-ci.org/alump/alump-dbar.svg?branch=master)](https://travis-ci.org/alump/alump-dbar) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/alump/alump-dbar) [![GitHub tag](https://img.shields.io/github/tag/alump/alump-dbar.svg?style=plastic)](https://github.com/alump/alump-dbar/releases) [![Bower](https://img.shields.io/bower/v/alump-dbar.svg?style=plastic)](https://bower.io/) [![GitHub issues](https://img.shields.io/github/issues/alump/alump-dbar.svg?style=plastic)](https://github.com/alump/alump-dbar/issues) [Online demo at webcomponents.org](https://www.webcomponents.org/element/alump/alump-dbar/demo/demo/index.html) ### WebJar Maven dependency (Vaadin 10) When 0.2.0 is released, you can pull webjar to your Vaadin 10 project with Maven dependency snipplet: ```xml org.webjars.bowergithub.alump alump-dbar 0.2.0 ``` ## Examples ```html ``` ### Width in pixels can be also defined with width attribute (width can not be left undefined): ```html ``` ## 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) ```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](https://www.npmjs.com/package/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](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
Online