taggier
v0.11.0
Published
JavaScript object to easing tag and hashtag inputs
Downloads
3
Maintainers
Readme
Taggier
JavaScript object to easing tag and hashtag inputs
See it on action: Taggier
Uses comma ,
as the separator
NPM
npm install taggier
HTML:
<div id="example"></div>
JavaScript:
import Taggier from 'taggier';
const taggier = new Taggier('example');
CSS:
.tag {
background-color: #ccc;
padding: 8px 16px;
cursor: pointer;
border-radius: 8px;
}
.tag:hover {
filter: brightness(95%);
transition: all .1s ease;
}
.tag::after {
content: ' \00d7';
}
.tag:hover::after {
color: red;
}
Syntax
new Taggier(divId|div[, options]);
Parameters
divId
String - The id of the div Element
div
HTMLDivElement - The div Element
options
Object - Optional
Options
Object: Second parameter - Optional
const myOptions = {
gap: 8,
hashtag: true
};
const taggier = new Taggier('example', myOptions);
gap
Number - Set the gap in pixels between each tag. Default: 16
forbiddenPattern
Regex | Boolean - Forbidden characters. (Set to false
to have none) Default: /[^\w]+/g
(Alphanumeric)
hashtag
Boolean - Is hashtag. Default: false
border
Boolean - If no css for the element is specified a 1px solid gray
will be assign. Default: true
focus
Boolean - Has outline. Default: true
Accessors
tags
Array - Array of strings beeing each element a tag text.
Methods
getTags()
: Array - Returns a new Array of strings beeing each element a tag text.
setTags(values)
(values : Array) : void - Sets tags beeing each element a tag text.
addTags(values)
(values : Array) : void - Add tags beeing each element a tag text.
removeAll()
: void - Remove all tags.
hasPendingText()
: Boolean - Returns true
if there is any text not tagged.
pendingText()
: String - Returns the pending text in the element.
makeTagFromPendingText()
: void - Makes a Tag from pending text in the element.