Descarga tagger - Descargar código fuente tagger

tagger

Otros recursos

0.6.2

Descargar

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

Tagger: cero Dependency, editor de etiquetas de Vanilla JavaScript

Demostración en línea

Instalación

 npm install @jcubic/tagger

o

 yarn add @jcubic/tagger

Uso

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

Se pueden crear múltiples entradas pasando una nota o matriz de elementos (por ejemplo, document.querySelectorAll ()). Si solo se contiene un elemento en la lista, entonces Tagger devolverá la instancia de Tagger, se devolverá una matriz de instancias de Tagger si el número de elementos es mayor que 1.

Uso con React

Tagger se puede usar fácilmente con reactjs.

 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

Ver demostración en acción en CodePen.

API

Métodos:

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

Opciones:

wrap (falso predeterminado) Permitir que las etiquetas se envuelvan en nuevas líneas en lugar de desplazamiento de desbordamiento
persod_dupplicates (falso predeterminado)
PETH_SPACES (Predeterminado Verdadero)
add_on_blur (falso predeterminado)
finalización {list: string[] | function(): Promise(string[])|string[], delay: miliseconds, min_length: number}
Función de enlace function(name): string|false debe devolver lo que debería estar en el atributo href o falso
TAG_LIMIT number (predeterminado -1) Número de límite de etiquetas, cuando se establece en -1 no hay límites
string de marcador de posición (predeterminado unset) si se establece en opciones o en la entrada inicial, este valor de marcador de posición se mostrará en la entrada de entrada de la etiqueta
Función de filtro function(name): string debe devolver el nombre de la etiqueta después de aplicar cualquier filtros (por ejemplo, String.ToUpperCase ()), vacío de cadena para filtrar la etiqueta y evitar la creación.