الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

الرموز التعبيرية قابلة للتخصيص
مكون Emoji Picker HTML للويب
العرض التوضيحي

Emojimart

missive | البريد الإلكتروني للفريق ، الدردشة الجماعية ، مهام الفريق ، تطبيق واحد
أحضره لك فريق Missive

جدول المحتويات

  • بيانات

  • منقار

  • مكون الرموز التعبيرية

  • بحث مقطوع الرأس

  • احصل على بيانات الرموز التعبيرية من الأم

  • تدويل

  • أمثلة

  • بنيت للمتصفحات الحديثة

  • تطوير

بيانات

تم فصل البيانات المطلوبة للمنتقي إلى العمل بالكامل من المكتبة. يمنح ذلك المطورين المرونة للتحكم بشكل أفضل في حجم حزمة التطبيق الخاصة بهم والسماح لهم باختيار كيف ومتى يتم تحميل هذه البيانات. يمكن أن تكون البيانات:

تم تجميعها مباشرة في قاعدة الشفرة الخاصة بك

  • الايجابيات: يعرض منتقي على الفور ، البيانات متوفرة في وضع عدم الاتصال

  • سلبيات: تحميل الصفحة الأولية الأبطأ (ملف أكبر للتحميل)

 الغزل إضافة @exoji-mart/data
 استيراد البيانات من '@exoji-mart/data'import {picker} من' Emoji-Mart'new Picker ({data})

جلبت عن بعد

  • الإيجابيات: البيانات التي تم جلبها فقط عند الحاجة ، لا تؤثر على حجم حزمة التطبيق الخاص بك

  • سلبيات: زمن انتقال الشبكة ، لا يعمل في وضع عدم الاتصال (ما لم تقم بتكوين عامل خدمة)

 استيراد {picker} من 'exoji-mart'new picker ({
  البيانات: async () => {const response = await fetch ('https://cdn.jsdelivr.net/npm/@emoji-mart/data' ، responnturn response.json ()
  }})

في هذا المثال ، يتم جلب البيانات من شبكة تسليم المحتوى ، ولكن يمكن أيضًا جلبها من مجالك الخاص إذا كنت ترغب في استضافة البيانات.

منقار

رد فعل

 تثبيت NPM-Save Emoji-Mart @Emoji-Mart/Data @exoji-Mart/React
 استيراد البيانات من "@exoji-mart/data'import picker من '@exoji-mart/react'function app () {
  إرجاع (<data picker = {data} onemojiselect = {console.log} />
  )}

متصفح

 <script src = "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"> </script> <script>
  const pickeroptions = {onemojiselect: console.log}
  Const Picker = New Emojimart.picker (PickerOptions)

  document.body.appendchild (picker) </script>

الخيارات / الدعائم

خيار تقصير الخيارات وصف
بيانات {}
 بيانات لاستخدامها في المنتقي
i18n {}
 بيانات التعريب لاستخدامها في المنتقة
فئات [] frequent ، people ، nature ، foods ، activity ، places ، objects ، symbols ، flags فئات لإظهار في منتقي. يتم احترام النظام.
مخصص []
 الرموز التعبيرية المخصصة
onemojiselect null
 رد الاتصال عند تحديد رموز تعبيرية
onclickoutside null
 رد الاتصال عندما يحدث نقرة خارج المنتقي
onaddcustomemoji null
 رد الاتصال عند النقر فوق زر إضافة رموز تعبيرية مخصصة . سيتم عرض الزر فقط إذا تم توفير رد الاتصال هذا. يتم عرضه عند إرجاع البحث لا توجد نتائج.
التركيز التلقائي false
 ما إذا كان ينبغي على المنتقة التركيز تلقائيًا على إدخال البحث
فئة {}
 أيقونات الفئة المخصصة
DynamicWidth false
 ما إذا كان ينبغي على المنتقي حساب perLine بشكل ديناميكي بناءً على عرض <em-emoji-picker> . عند التمكين ، يتم تجاهل perLine
Emojibttoncolors [] IE #f00 ، pink ، rgba(155,223,88,.7) مجموعة من الألوان التي تؤثر على لون خلفية التحويم
Emojibttonradius 100% أي 6px ، 1em ، 100% نصف قطر أزرار الرموز التعبيرية
emojibuttonsize 36
 حجم أزرار الرموز التعبيرية
الرموز التعبيرية 24
 حجم الرموز التعبيرية (داخل الأزرار)
الرموز التعليمية الرباعية 14 1 ، 2 ، 3 ، 4 ، 5 ، 11 ، 12 ، 12.1 ، 13 ، 13.1 ، 14 إصدار بيانات الرموز التعبيرية للاستخدام. أحدث إصدار مدعوم في @emoji-mart/data هو حاليا 14
باستثناء []
 قائمة معرفات الرموز التعبيرية التي سيتم استبعادها من المنتقي
أيقونات auto auto ، outline ، solid نوع الرموز المراد استخدامها للمنتقي. outline مع موضوع خفيف solid مع موضوع مظلم.
لغة en en ، ar ، be ، cs ، de ، es ، fa ، fi ، fr ، hi ، it ، ja ، ko ، nl ، pl ، pt ، ru ، sa ، tr ، uk ، vi ، zh اللغة المراد استخدامها للمنتقي
maxfrequentrows 4
 الحد الأقصى لعدد الصفوف المتكررة لإظهار. 0 سوف تعطيل الفئة المتكررة
البحرية top top ، bottom ، none موقف شريط الملاحة
nocountryflags false
 سواء كان لإظهار أعلام البلد أم لا. إذا لم يتم توفيرها ، يتم التعامل مع TBHIs تلقائيًا (لا يدعم Windows أعلام البلد)
noresultsemoji cry
 معرف الرموز التعبيرية لاستخدامها في NO RECEST ENVER
perline 9
 عدد الرموز التعبيرية لإظهار كل سطر
المعاينة point_up
 معرف الرموز التعبيرية لاستخدامها في المعاينة عندما لا تحوم أي تعبيرية. point_up عندما يكون موضع المعاينة أسفل و point_down عندما يكون موضع المعاينة أعلى.
المعاينة bottom top ، bottom ، none موقف المعاينة
البحث sticky sticky ، static ، none موضع إدخال البحث
تعيين native native ، apple ، facebook ، google ، twitter مجموعة من الرموز التعبيرية لاستخدامها في منتقي. native كونه الأكثر أداءً ، يعتمد آخرون على أجهزة Spriteshets.
جلد 1 1 ، 2 ، 3 ، 4 ، 5 ، 6 لون جلد الرموز التعبيرية
skintoneposition preview preview ، search ، none موضع محدد لون البشرة
سمة auto auto ، light ، dark موضوع لون المنتقي
GetSpritesheturl null
 وظيفة تُرجع عنوان URL الخاص بـ Spriteshet لاستخدامه في المنتقط. يجب أن تكون متوافقة مع البيانات المقدمة.

الرموز التعبيرية المخصصة

يمكنك استخدام الرموز التعبيرية المخصصة من خلال توفير مجموعة من الفئات وروحياتهم التعبيرية. يدعم الرموز التعبيرية أيضًا نغمات الجلد المتعددة ويمكن أن تكون GIFs أو SVGs.

 استيراد بيانات من "@exoji-mart/data'import picker من '@exoji-mart/react'const custom = [
  {id: 'github' ، الاسم: 'github' ، emojis: [{id: 'octocat' ، الاسم: 'Octocat' ، الكلمات الرئيسية: [github '] ، الجلود: [{src:' ./octocat.png ' }] ،} ، {id: 'Shipit' ، الاسم: 'Squirrel' ، الكلمات الرئيسية: ['github'] ، الجلود: [{src: './shipit-1.png'} ، {src: './shipit -2.png '} ، {src:' ./shipit-3.png '} ، {src:' ./shipit-4.png '} ، {src:' ./shipit-5.png '} ، { SRC: './shipit-6.png'} ،] ،} ،] ،
  } ،
  {id: 'gifs' ، الاسم: 'gifs' ، emojis: [{id: 'party_parrot' ، الاسم: 'party parrot' ، الكلمات الرئيسية: ['Dance' ، 'Dancing'] ، Skins: [{src: '. /party_parrot.gif '}] ،} ،]
  } ،] وظيفة تطبيق () {
  إرجاع (<data picker = {data} custom = {custom} />
  )}

أيقونات الفئة المخصصة

يمكنك استخدام أيقونات الفئة المخصصة من خلال تزويد كائن باسم الفئة كمفتاح ورمز كقيمة. التنسيقات المدعومة حاليًا هي svg String و src . انظر المثال.

 const customCategoryIcons = {
  الفئات: {Activity: {svg: '<svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 640 512" 8.616-16.02-13.19-25.92-13.19C-23.33 0-31.98 20.68-31.98 32.03C0 6.522 1.987 3C0-6.522-1.988 -13.1-6.115-18.78L57.89 397.2ZM496.1 352C-44.13 0-79.72 .34-12.72 -39.2L-23.63-32.5C-13.44-18.5-33.77-27.68-54.12-27.68C-13.89 0-27.79 4.281-39.51 12.8L307.8 159.7C262.2 192.8 230.4 103.5 99.63L56.34 77.52C53.79-35.39 99.15-55.3 127.1-67.27C51.88-22 101.3-49.87 146.9-82.1L202.3-146.730.5 140.4 640 120 640 99.38z ،} ، الناس: {src: './people.png' ،} ،
  } ،}

مكون الرموز التعبيرية

استخدام مكون ويب Emoji هو نفسه بغض النظر عن المكتبة التي تستخدمها.

أولاً ، تحتاج إلى التأكد من تهيئة البيانات. تحتاج إلى استدعاء هذا مرة واحدة فقط لكل تحميل صفحة. لاحظ أنه إذا اتصلت init مثل هذا ، فأنت لا تحتاج بالضرورة إلى تضمين بيانات في الدعائم المنتقة. لا يؤلمني أيضًا ، سوف لا يضر.

 استيراد البيانات من '@exoji-mart/data'import {init} من' Emoji-Mart'Init ({data})

ثم يمكنك استخدام مكون الرموز التعبيرية في HTML / JSX.

 <em-emoji id = "+1" size = "2em"> </em-emoji> <em-emoji id = "+1" skin = "2" )

سمات / الدعائم

يصف مثال وصف
بطاقة تعريف +1 معرف الرموز التعبيرية
الرموز القصيرة :+1::skin-tone-2: رمز الرموز المعصورة الرموز التعبيرية
محلي ? رموز تعبيرية أصلية
مقاس 2em حجم العنصر المضمن
احتياطي :shrug: سلسلة ليتم تقديمها في حالة عدم العثور على الرموز التعبيرية
تعيين native مجموعة الرموز التعبيرية: native ، apple ، facebook ، google ، twitter
جلد 1 لون البشرة الرموز التعبيرية: 1 ، 2 ، 3 ، 4 ، 5 ، 6

بحث مقطوع الرأس

يمكنك البحث بدون منتقي. تمامًا مثل مكون الرموز التعبيرية ، يجب تهيئة data أولاً من أجل استخدام فهرس البحث.

 استيراد البيانات من '@exoji-mart/data'import {init ، searchIndex} من' exoji-mart'init ({data}) البحث عن وظيفة async (value) {
  const emojis = await searchindex.search (القيمة)
  نتائج const = exojis.map ((exoji) => {return Emoji.skins [0].
  })

  console.log (النتائج)} بحث ('عيد الميلاد') // => ['؟' ، '؟؟' ، '؟ ‍؟' ، '،' ،؟ ❄ '،'؟ '،' ⛄ ']

احصل على بيانات الرموز التعبيرية من الأم

يمكنك الحصول على بيانات الرموز التعبيرية من رموز تعبيرية أصلية. هذا مفيد إذا كنت ترغب في الحصول على معرف الرموز التعبيرية من رموز تعبيرية أصلية. تمامًا مثل مكون الرموز التعبيرية ، يجب تهيئة data أولاً من أجل استرداد بيانات الرموز التعبيرية.

 استيراد البيانات من '@exoji-mart/data'import {init ، getemojidatafromnative} من' Emoji-mart'init ({data}) getemojidatafromnative ('؟؟'). hand_with_index_and_middle_fingers_crossed '] ، id:' crossed_fingers '، الكلمات الرئيسية: ["اليد" ، " : '؟؟' ، shortcodes: ': crossed_fingers :: skin-tone-6:' ، skin: 6 ، unified: '1f91e-1f3ff' ،} */

تدويل

يدعم Emojimart UI لغات متعددة ، لا تتردد في فتح العلاقات العامة إذا كان لديك مفقود.

 استيراد i18n من'@emoji--mart/data/i18n/fr.json'i18n.search_no_results_1 = 'aucun exoji'new picker ({i18n})

بالنظر إلى حجم الملف الصغير ، فإن اللغة الإنجليزية مدمجة ولا تحتاج إلى توفيرها.

أمثلة

  • فئات

  • مخصص الرموز التعبيرية

  • أنماط مخصصة

  • مكون الرموز التعبيرية

  • بحث مقطوع الرأس

  • ألوان الركود

بنيت للمتصفحات الحديثة

يعتمد Emojimart على واجهات برمجة التطبيقات هذه ، قد تحتاج إلى تضمين ملفيات إذا كنت بحاجة إلى دعم المتصفحات القديمة:

  • Shadow Dom (MDN)

  • عناصر مخصصة (MDN)

  • IntersectionObserver (MDN)

  • Async/في انتظار (MDN)

تطوير

 تثبيت الغزل
الغزل ديف
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل