BadgeTags.js is a javascript library that helps turn your flagged keywords into mobile badge tags.
To install this package with NPM run the command below and link the needed javascript and css into your html file.
npm i badgetags --save
To use this package you need to link the needed javascript and css into your html file.
<link rel="stylesheet" href="/src/css/style.css">
Because the library looks over the the page content for specific classes, place the script tag at the bottom of your HTML file or add the defer
keyword to the tag, so the script will load after the HTML content.
<script src="/src/js/main.js"></script>
Create a div with your desired words in it starting with a #
value by adding the data-badge-tags
data attribute and giving it a value of active
.
NOTE: all words not starting with the #
hash sign will not displayed as badges.
<div data-badge-tags="active">
I was in #Florida all #weekend at the #beach.
</div>
In a separate javascript file create an instance of the the BadgeTags
class. And you're done.
// Tags Instance
const tags = new BadgeTags();
The tags class object takes one object witch is used to change the apperance and functionality of the created badge tags.
The backgroundColor
property is used to assign a single background color to all badge tags. The property accepts RGB colors, HEX colors as-well as css supported named colors. The property defaults to #f0f0f0
if no value is defined.
// Props object
const props = {
backgroundColor: "#ff4a9d", // pink
textColor: 'white'
}
The textColor
property is used to assign a single text color to all badge tags. The property accepts RGB colors, HEX colors as-well as css supported named colors. The property defaults to grey
if no value is defined.
// Props object
const props = {
textColor: "#d53eff" // purple
}
The shape
property is used to change the border radius of the badge tags. The property currently only accepts two values pill
and box
.If no value is assigned the property value defaults to pill
.
const props = {
shape: 'box',
}
The borderColor
property is used to assign a single text color to all badge tags. The property accepts RGB colors, HEX colors as-well as css supported named colors. The property defaults to transparent
if no value is defined.
// Props object
const props = {
borderColor: "#00d9ba" // teal
}
The callback
property is used to assign a single callback function to all badge tags fired on the click
event.
// Callback function
function hey(event){
console.log(`${target.event.innerHTML} 🔥`);
};
// Props object
const props = {
callback: hey
}
// Tags Instance
const tags = new BadgeTags(props);