pf-progress-slider

WebJar for pf-progress-slider

License

License

MIT
Categories

Categories

IDE Development Tools
GroupId

GroupId

org.webjars.bowergithub.pfelements
ArtifactId

ArtifactId

pf-progress-slider
Last Version

Last Version

0.1.2
Release Date

Release Date

Type

Type

jar
Description

Description

pf-progress-slider
WebJar for pf-progress-slider
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/PFElements/pf-progress-slider

Download pf-progress-slider

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bowergithub.pfelements/pf-progress-slider/ -->
<dependency>
    <groupId>org.webjars.bowergithub.pfelements</groupId>
    <artifactId>pf-progress-slider</artifactId>
    <version>0.1.2</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bowergithub.pfelements/pf-progress-slider/
implementation 'org.webjars.bowergithub.pfelements:pf-progress-slider:0.1.2'
// https://jarcasting.com/artifacts/org.webjars.bowergithub.pfelements/pf-progress-slider/
implementation ("org.webjars.bowergithub.pfelements:pf-progress-slider:0.1.2")
'org.webjars.bowergithub.pfelements:pf-progress-slider:jar:0.1.2'
<dependency org="org.webjars.bowergithub.pfelements" name="pf-progress-slider" rev="0.1.2">
  <artifact name="pf-progress-slider" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bowergithub.pfelements', module='pf-progress-slider', version='0.1.2')
)
libraryDependencies += "org.webjars.bowergithub.pfelements" % "pf-progress-slider" % "0.1.2"
[org.webjars.bowergithub.pfelements/pf-progress-slider "0.1.2"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.bowergithub.polymer : polymer jar [0,)
org.webjars.bowergithub.polymerelements : paper-slider jar [0,)

Project Modules

There are no modules declared in this project.

pf-elements

A Polymer 2.0 based collection of reusable web components

Join the chat at https://gitter.im/pf-elements/Lobby

Published on webcomponents.org

Demo

Click here for docs & demo

Element Name Latest Version (Bower) Npm version Build Status
pf-progress-slider GitHub version npm version Build Status

Install the Polymer-CLI

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


A composite component

<pf-progress-slider></pf-progress-slider> Use this element to track the progress of the user, this can be made interactive as well and user can go back to a certain step and submit the progress again, progress bar will update the progress status with the right indication(color).

Horizontal Example

 <pf-progress-slider steps="55">

</pf-progress-slider>

Vertical Example

 <pf-progress-slider vertical steps="70>

</pf-progress-slider>

Customization and usage

This element can be customized in a number of ways

Events

Custom Event Description
position-changed This event is Fired when position is changed

Methods

The following methods are available for crude events operation:

Methods Description
setCurrentPos(value) Sets the current position of the slider to the given value
getCurrentPos() Returns current value
setPosState(state, step) Sets the state of the given step e.g. set step 3 as pass

Styling

The following custom properties and mixins are available for styling:

Custom property Description Default
--pf-default-bar-color Default color of bar silver
--pf-pass-bar-color Passed color of bar 27ae60
--pf-fail-bar-color Failed color of bar e74c3c
--pf-skip-bar-color Skipped color of bar 3498db

Install the Polymer-CLI

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

Viewing Your Application

$ polymer serve

Building Your Application

$ polymer build

This will create a build/ folder with bundled/ and unbundled/ sub-folders containing a bundled (Vulcanized) and unbundled builds, both run through HTML, CSS, and JS optimizers.

You can serve the built versions by giving polymer serve a folder to serve from:

$ polymer serve build/bundled

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.

Learn more

See the list of elements, demos, and documentation by browsing this collection on webcomponents.org:

Go to webcomponents.org


Contributing

Comments, questions, suggestions, issues, and pull requests are all welcome.

Get in touch with the team

Joing us at Join the chat at https://gitter.im/pf-elements/Lobby

Some ways to help:

  • Test the elements and provide feedback: We would love to hear your feedback on anything related to the elements, like features, API and design. The best way to start is by trying them out. And to get a quick response, either drop a question/comment on the chat or open an issue in GitHub.
  • Report bugs: File issues for the elements in their respective GitHub projects.
  • Send pull requests: If you want to contribute code, check out the development instructions below.

We encourage you to read the contribution instructions by GitHub also.

License

MIT License

Versions

Version
0.1.2