Unduh tagger - Unduh Kode Sumber tagger

tagger

Sumber daya lainnya

0.6.2

Unduh

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

Tagger: nol ketergantungan, editor tag vanilla javascript

Demo online

Instalasi

 npm install @jcubic/tagger

atau

 yarn add @jcubic/tagger

Penggunaan

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

Beberapa input dapat dibuat dengan melewati nodelist atau array elemen (mis. Document.QuerySelectorAll ()). Jika hanya satu elemen yang terkandung dalam daftar maka Tagger akan mengembalikan instance Tagger, serangkaian instance tagger akan dikembalikan jika jumlah elemen lebih besar dari 1.

Penggunaan dengan bereaksi

Tagger dapat dengan mudah digunakan dengan 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

Lihat demo beraksi pada codepen.

API

Metode:

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

Opsi:

Bungkus (default false) Izinkan tag untuk membungkus garis baru alih -alih gulungan overflow
Izin_duplicates (default false)
allow_spaces (default true)
add_on_blur (default false)
penyelesaian {list: string[] | function(): Promise(string[])|string[], delay: miliseconds, min_length: number}
fungsi tautan function(name): string|false itu harus mengembalikan apa yang seharusnya ada di atribut href atau false
TAG_LIMIT number (default -1) Batas jumlah tag, saat diatur ke -1 Tidak ada batasan
string placeholder (default unset) Jika disetel dalam opsi atau pada input awal, nilai placeholder ini akan ditampilkan dalam input entri tag
function(name): string Filter (Nama): String itu harus mengembalikan nama tag setelah menerapkan filter apa pun (misalnya string.touppercase ()), string kosong untuk memfilter tag dan mencegah pembuatan.