تنزيل tagger - تنزيل رمز المصدر tagger

tagger

موارد أخرى

0.6.2

تنزيل

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

Tagger: Zero Dependency ، محرر علامة الفانيليا جافا سكريبت

العرض التوضيحي عبر الإنترنت

تثبيت

 npm install @jcubic/tagger

أو

 yarn add @jcubic/tagger

الاستخدام

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

يمكن إنشاء مدخلات متعددة عن طريق تمرير Nodelist أو مجموعة من العناصر (على سبيل المثال. document.queryselectorall ()). إذا كان هناك عنصر واحد فقط في القائمة ، فسيقوم Tagger بإرجاع مثيل Tagger ، فسيتم إرجاع مجموعة من مثيلات Tagger إذا كان عدد العناصر أكبر من 1.

الاستخدام مع رد الفعل

يمكن استخدام 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.

API

طُرق:

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

خيارات:

لف (خطأ افتراضي) اسمح العلامات بالالتفاف على خطوط جديدة بدلاً من التمرير الفائض
left_duplicates (خطأ افتراضي)
left_spaces (صواب افتراضي)
add_on_blur (خطأ افتراضي)
الانتهاء {list: string[] | function(): Promise(string[])|string[], delay: miliseconds, min_length: number}
وظيفة الارتباط function(name): string|false يجب أن تُرجع ما يجب أن يكون في سمة HREF أو خطأ
number TAG_LIMIT (الافتراضي -1) الحد من العلامات ، عند تعيينه على -1 لا توجد حدود
string العناصر النائمة (إلغاء تعيين افتراضي) إذا تم تعيينها في الخيارات أو على الإدخال الأولي ، سيتم عرض قيمة العنصر النائب في إدخال إدخال العلامة
وظيفة التصفية function(name): string يجب أن تُرجع اسم العلامة بعد تطبيق أي مرشحات (على سبيل المثال String.ToupperCase ()) ، سلسلة فارغة لتصفية العلامة ومنع الإنشاء.