tag

taggier

JavaScript object to easing tag and hashtag inputs

Showing:

Popularity

Downloads/wk

0

GitHub Stars

2

Maintenance

Last Commit

1yr ago

Contributors

2

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

Taggier

JavaScript object to easing tag and hashtag inputs

See it on action: Taggier

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial