https://github.com/mulaza/badge-tags.js
BadgeTags.js is a javascript library that helps turn your flagged keywords into mobile badge tags.
https://github.com/mulaza/badge-tags.js
component component-library javascript javascript-library library ui-components webdevelopment
Last synced: 3 months ago
JSON representation
BadgeTags.js is a javascript library that helps turn your flagged keywords into mobile badge tags.
- Host: GitHub
- URL: https://github.com/mulaza/badge-tags.js
- Owner: Mulaza
- License: mit
- Created: 2021-05-03T03:35:41.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-23T18:02:09.000Z (almost 5 years ago)
- Last Synced: 2025-02-16T13:44:21.899Z (over 1 year ago)
- Topics: component, component-library, javascript, javascript-library, library, ui-components, webdevelopment
- Language: JavaScript
- Homepage:
- Size: 202 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Badge Tags.js
## About
BadgeTags.js is a javascript library that helps turn your flagged keywords into mobile badge tags.
## Install
### NPM
To install this package with NPM run the command below and link the needed javascript and css into your html file.
```text
npm i badgetags --save
```
### Direct Download
To use this package you need to link the needed javascript file into your html file.
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.
```html
```
## How To Use
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.
```html
I was in #Florida all #weekend at the #beach.
```
In a separate javascript file create an instance of the the `BadgeTags` class. And you're done.
```javascript
// Tags Instance
const tags = new BadgeTags();
```
## API
The tags class object takes one object witch is used to change the apperance and functionality of the created badge tags.
### Background Color
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.
```javascript
// Props object
const props = {
backgroundColor: "#ff4a9d", // pink
textColor: 'white'
}
```
### Text Color
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.
```javascript
// Props object
const props = {
textColor: "#d53eff" // purple
}
```
#### Shape
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 `box`.
```javascript
const props = {
shape: 'box',
}
```
### Border Color
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.
```javascript
// Props object
const props = {
borderColor: "#00d9ba" // teal
}
```
### Click Callback
The `callback` property is used to assign a single callback function to all badge tags fired on the `click` event.
```javascript
// Callback function
function hey(event){
console.log(`${target.event.innerHTML} 🔥`);
};
// Props object
const props = {
callback: hey
}
// Tags Instance
const tags = new BadgeTags(props);
```