First steps

Once you've set up all prerequisites, apply the controller to the target element.  
Each controller typically requires a specific HTML structure to collect the necessary data.  
Please refer to the documentation for the specific element you're using.  

Below is a short example using the skills controller to illustrate the process.

First, create the main container and assign the controller:

 

<div data-controller="easy-skills"></div>

 

Next, provide the additional information required by the controller - some fields are mandatory, others optional.
The skills controller processes multiple "skill elements" defined inside the main container:

 

<div data-controller="easy-skills">
	<div data-easy="skill" data-easy-skill-progress="70">Skill name</div>
</div>
  • data-easy="skill" identifies this as a skill element.
  • data-easy-skill-progress="70" sets the mastery percentage.
  • The skill name goes between the <div> tags.

This creates a minimal working example for one skill.
For multiple skills:

 

<div data-controller="easy-skills">
	<div data-easy="skill" data-easy-skill-progress="70">Skill name</div>
	<div data-easy="skill" data-easy-skill-progress="50">Second skill name</div>
</div>

 

Visit the documentation for individual elements to learn more about available options and configurations.