The Ratings Component visually represents user evaluations, typically using stars or similar symbols, providing a quick and intuitive way to display feedback or quality assessments.
Note: A CDN link will not work here as customization of the default Vendor CSS is required to align with FlyonUI's design.
3
Update Tailwind Configuration
Add the path to the Raty JavaScript files in the content section of your Tailwind configuration file. Additionally, set vendors: true in the FlyonUI config to enable vendor-specific CSS generation:
Add the Raty initialization JavaScript code below the Raty JS library inclusion. Set up the Raty instance to target elements using its id or data-raty attribute. Ensure this Raty JS file is in a location where TailwindCSS can monitor it, as specified in step 3.
For more options and detailed configurations, refer to the Raty JS documentation .
consttarget=newRaty(document.querySelector('[data-raty]'), // or #Id
{
path:'path/to/star-images/',
});
target.init();
The following example demonstrates the usage of a star-based rating system with the raty-js library using images, initialized with the below provided JavaScript code. Set the path to the location where the images are stored in your project, or to the node modules if they are stored there.
The following example demonstrates the usage of a star-based rating system with the raty-js library using fonts, initialized with the below provided JavaScript code. Set the path to the location where the fonts are stored in your project, or to the node modules if they are stored there.