tagger下載 - tagger源代碼下載

tagger

其他資源

0.6.2

下載

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

標記：零依賴性，香草JavaScript標籤編輯器

在線演示

安裝

 npm install @jcubic/tagger

或者

 yarn add @jcubic/tagger

用法

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

可以通過傳遞元素或數組來創建多個輸入（例如document.queryselectorall（））。如果列表中只包含一個元素，則Tagger將返回Tagger實例，如果元素的數量大於1，則將返回標記器實例的數組。

用反應使用

標記器可以輕鬆與ReactJ一起使用。

 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

請參閱Codepen上的演示。

API

方法：

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

選項：

包裝（默認為false）允許標籤包裝到新線路上，而不是溢出滾動
laster_duplicates （默認為false）
允許_spaces （默認為true）
add_on_blur （默認錯誤）
完成{list: string[] | function(): Promise(string[])|string[], delay: miliseconds, min_length: number}
鏈接function(name): string|false它應該返回應該在href屬性或false中的內容
tag_limit number （默認-1）限制標籤數，當設置為-1時，沒有限制
佔位符string （默認未設置）如果在選項或初始輸入中設置，則將在標籤條目輸入中顯示此佔位符值
過濾function(name): string應用於應用任何過濾器（例如String.touppercase（）），空字符串以過濾標記並防止創建後，它應返回標籤名稱。