tagger 다운로드 - tagger 소스 코드 다운로드

tagger

기타 리소스

0.6.2

다운로드

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

Tagger : 제로 의존성, 바닐라 JavaScript 태그 편집기

온라인 데모

설치

 npm install @jcubic/tagger

또는

 yarn add @jcubic/tagger

용법

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

노드리스트 또는 요소 배열 (예 : Document.querySelectorall ())을 전달하여 여러 입력을 만들 수 있습니다. 목록에 하나의 요소 만 포함되면 Tagger는 Tagger 인스턴스를 반환하면 요소 수가 1보다 큰 경우 Tagger 인스턴스 배열이 반환됩니다.

React 사용

Tagger는 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

Codepen의 Demo를 참조하십시오.

API

행동 양식:

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

옵션 :

랩 (기본 거짓) 오버 플로우 스크롤 대신 새 선으로 태그를 감싸도록 허용
allow_duplicates (default false)
allow_spaces (기본값)
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 (기본 UNSET) 옵션 또는 초기 입력에 설정된 경우이 자리 표시 자 값은 태그 항목 입력에 표시됩니다.
필터 function(name): string 필터 (예 : String.toupperCase ())를 적용한 후 태그 이름을 반환해야합니다.