tagger Download - tagger Source Code Download

tagger

Andere Ressourcen

0.6.2

Herunterladen

  _____
 |_   _|___ ___ ___ ___ ___
   | | | .'| . | . | -_|  _|
   |_| |__,|_  |_  |___|_|
           |___|___|   version 0.6.2

Tagger: Zero -Abhängigkeit, Vanilla JavaScript Tag Editor

Online -Demo

Installation

 npm install @jcubic/tagger

oder

 yarn add @jcubic/tagger

Verwendung

 tagger(document.querySelector('[name="tags"]'), {allow_spaces: false});

Mehrere Eingänge können erstellt werden, indem ein Nodelist oder ein Array von Elementen bestanden wird (z. B. document.querySelectorAll ()). Wenn in der Liste nur ein Element enthalten ist, gibt Tagger die Tagger -Instanz zurück, ein Array von Tagger -Instanzen wird zurückgegeben, wenn die Anzahl der Elemente größer als 1 ist.

Verwendung mit React

Tagger kann leicht mit ReactJs verwendet werden.

 import { useRef , useState , useEffect } from 'react'
import tagger from '@jcubic/tagger'

const App = ( ) => {
    const [ tags , setTags ] = useState ( [ ] ) ;
    const inputRef = useRef ( null ) ;

    useEffect ( ( ) => {
        const taggerOptions = {
            allow_spaces : true ,
        } ;
        tagger ( inputRef . current , taggerOptions ) ;
        onChange ( ) ;
    } , [ inputRef ] ) ;

    const onChange = ( ) => {
        setTags ( tags_array ( inputRef . current . value ) ) ;
    } ;

    return (
        < div className = "app" >
            < input type = "text" ref = { inputRef } onChange = { onChange } defaultValue = "charles, louis, michel" />
            < br />
            < ul >
                { tags . map ( ( tag , index ) => < li key = { ` ${ tag } - ${ index } ` } > { tag } </ li > ) }
            </ ul >
        </ div >
    )
}

function tags_array ( str ) {
    return str . split ( / s*,s* / ) . filter ( Boolean ) ;
}

export default App

Siehe Demo in Aktion auf Codepen.

API

Methoden:

add_tag(string): boolean
remove_tag(string): booelan
complete(string): void

Optionen:

Wrap (Standard False). Ermöglichen Sie Tags, auf neue Zeilen einzuwickeln, anstatt über einen Überlauf -Scroll
erlaubte_duplikate (Standard falsch)
Den_spaces (Standard true)
add_on_blur (Standard falsch)
Fertigstellung {list: string[] | function(): Promise(string[])|string[], delay: miliseconds, min_length: number}
Linkfunktion function(name): string|false Es sollte zurückgeben, was sich im HREF -Attribut oder falsch befinden sollte
Tag_Limit number (Standard -1) Grenze Anzahl der Tags, wenn auf -1 festgelegt wird, gibt es keine Grenzen
Platzhalterzeichenfolge (Standard -Uneinstellung) Wenn in Optionen oder in der ersten Eingabe festgelegt string , wird dieser Platzhalterwert in der Tageingabeeingabe angezeigt
Filterfunktion function(name): string Es sollte den Tag -Namen zurückgeben, nachdem Filter (z. B. string.touppercase ()), leerer Zeichenfolge, um das Tag zu filtern und die Erstellung zu verhindern.