Skills

This controller allows you to visually present one or more skills.


Each skill requires a percentage value, a color, and a name.


You can also define a header and a description if needed.

Additionally the bars can be animated.

 

<div data-controller="easy-skills" data-easy-skills-animate-value="true" data-easy-skills-text-color-value="white">
	<div data-easy="header">My spells</div>
	<div data-easy="subHeader">Those are the spells I have mastered on my journeys.</div>
	<div data-easy="skill" data-easy-skill-progress="70">Freeze</div>
	<div data-easy="skill" data-easy-skill-progress="55" data-easy-skill-color="green">Temporal displacement</div>
	<div data-easy="skill" data-easy-skill-progress="0" data-easy-skill-color="red">Meteorite</div>
</div>

 

 

Settings

template
textColor
lightColor
darkColor
animate
animateDelay
animateDuration
animateOnEvent
animateOnEventName

template

Type: String (Keywords separated by dashes)

Specifies the name of the color template used to render skills.
The format starts with the template name, followed by the color and the color scheme.
A total of eight templates are available.

Default: 'one-dodgerblue-light'

textColor

Type: String

Font color used in elements with the background color of the template.
CSS color formats supported (name, hex, rgb, rgba).

NOTICE: The text color cannot be changed for every template.

IMPORTANT: For some templates, it may be necessary to apply a custom text color, as Easy attempts to find the best possible contrast for the currently selected skill color, which may not always produce optimal results.

Default: ''

lightColor

Type: String

Color for the background or accents in light mode (when the keyword 'light'  is used in the template setting).

Default: ''

darkColor

Type: String

Color for the background or accents in light mode (when the keyword 'dark'  is used in the template setting).

Default: ''

animate

Type: Boolean

Whether animation is enabled for skill progress bars.

Default: false

animateDelay

Type: Number

Duration in milliseconds of the progress animation.

Default: 300

animateDuration

Type: Number

Duration in milliseconds of the progress animation.

Default: 1000

animateOnEvent

Type: Boolean

Whether animation should start upon a custom event instead of immediately.

Default: false

animateOnEventName

Type: String

Name of the custom event which triggers the animation if animateOnEvent is true.

Default: 'EasySkillsEvent'