หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

Emoji Mart สามารถปรับแต่งได้
Emoji Picker HTML Component สำหรับเว็บ
การสาธิต

อิโมจิร์ต

ขีปนาวุธ อีเมลทีม, แชทเป็นทีม, งานทีม, หนึ่งแอพ
มาถึงคุณโดยทีมขีปนาวุธ

สารบัญ

  • ข้อมูล

  • ผู้เลือก

  • องค์ประกอบอิโมจิ

  • การค้นหาแบบไม่มีหัว

  • รับข้อมูลอิโมจิจากดั้งเดิม

  • การทำให้เป็นสากล

  • ตัวอย่าง

  • สร้างขึ้นสำหรับเบราว์เซอร์ที่ทันสมัย

  • การพัฒนา

ข้อมูล

ข้อมูลที่จำเป็นสำหรับตัวเลือกการทำงานได้รับการแยกออกจากห้องสมุดอย่างสมบูรณ์ ที่ช่วยให้นักพัฒนามีความยืดหยุ่นในการควบคุมขนาดแอพของพวกเขาได้ดีขึ้นและให้พวกเขาเลือกวิธีการโหลดข้อมูลนี้และเมื่อใด ข้อมูลสามารถ:

รวมเข้ากับรหัสฐานของคุณโดยตรง

  • ข้อดี: ตัวเลือกแสดงผลทันทีข้อมูลจะพร้อมใช้งานแบบออฟไลน์

  • จุดด้อย: โหลดหน้าเริ่มต้นช้าลง (ไฟล์ที่ใหญ่กว่าในการโหลด)

 เส้นด้ายเพิ่ม @emoji-mart/data
 นำเข้าข้อมูลจาก '@emoji-mart/data'import {picker} จาก' emoji-mart'new picker ({data})

ดึงออกจากระยะไกล

  • ข้อดี: ข้อมูลที่ดึงมาเฉพาะเมื่อจำเป็นจะไม่ส่งผลกระทบต่อขนาดชุดแอพของคุณ

  • จุดด้อย: แฝงเครือข่ายไม่ทำงานออฟไลน์ (เว้นแต่คุณจะกำหนดค่าผู้ให้บริการ)

 นำเข้า {picker} จาก 'Emoji-Mart'New Picker ({{
  ข้อมูล: async () => {const response = รอการดึงข้อมูล ('https://cdn.jsdelivr.net/npm/@emoji-mart/data',) กลับมาตอบกลับ json ()
  -

ในตัวอย่างนี้ข้อมูลถูกดึงมาจากเครือข่ายการส่งเนื้อหา แต่ก็สามารถนำมาจากโดเมนของคุณเองได้หากคุณต้องการโฮสต์ข้อมูล

ผู้เลือก

ตอบโต้

 NPM Install-Save Emoji-Mart @emoji-mart/data @emoji-mart/react
 นำเข้าข้อมูลจาก '@emoji-mart/data'import picker จาก'@emoji-mart/react'function app () {
  return (<picker data = {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 = ใหม่ emojimart.picker (pickeroptions)

  document.body.appendchild (ตัวเลือก) </script>

ตัวเลือก / อุปกรณ์ประกอบฉาก

ตัวเลือก ค่าเริ่มต้น ทางเลือก คำอธิบาย
ข้อมูล {}
 ข้อมูลที่จะใช้สำหรับตัวเลือก
i18n {}
 ข้อมูลการแปลเป็นภาษาท้องถิ่นเพื่อใช้สำหรับตัวเลือก
หมวดหมู่ [] frequent , people , nature , foods , activity , places , objects , symbols , flags หมวดหมู่ที่จะแสดงในตัวเลือก คำสั่งเป็นที่เคารพ
กำหนดเอง []
 อิโมจิที่กำหนดเอง
onemojiselect null
 โทรกลับเมื่อเลือกอิโมจิ
onclickoutside null
 โทรกลับเมื่อคลิกด้านนอกของตัวเลือกเกิดขึ้น
onaddcustomemoji null
 การโทรกลับเมื่อคลิกปุ่ม อีโมจิที่กำหนดเอง ปุ่มจะปรากฏขึ้นเฉพาะเมื่อมีการโทรกลับนี้ มันจะปรากฏขึ้นเมื่อการค้นหาส่งคืนไม่มีผลลัพธ์
ออโต้โฟกัส false
 ไม่ว่าตัวเลือกควรมุ่งเน้นไปที่อินพุตการค้นหาโดยอัตโนมัติ
หมวดหมู่ {}
 ไอคอนหมวดหมู่ที่กำหนดเอง
ไดนามิก false
 ไม่ว่าตัวเลือกควรคำนวณ perLine แบบไดนามิกตามความกว้างของ <em-emoji-picker> เมื่อเปิดใช้งาน perLine จะถูกละเว้น
EmojibuttonColors [] เช่น #f00 , pink , rgba(155,223,88,.7) อาร์เรย์ของสีที่มีผลต่อสีพื้นหลังโฮเวอร์
Emojibuttonradius 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
ยกเว้นอมโมจิส []
 รายชื่อ Emoji ID ที่จะถูกแยกออกจากตัวเลือก
ไอคอน 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
 ID ของอิโมจิที่จะใช้สำหรับอิโมจิที่ไม่มีผลลัพธ์
Perline 9
 จำนวนอิโมจิที่แสดงต่อบรรทัด
Previewemoji point_up
 ID ของอิโมจิที่จะใช้สำหรับตัวอย่างเมื่อไม่ได้โฉบอีโมจิใด ๆ point_up เมื่อตำแหน่งตัวอย่างอยู่ด้านล่างและ point_down เมื่อตำแหน่งตัวอย่างอยู่ด้านบน
PreviewPosition bottom top bottom none ตำแหน่งของตัวอย่าง
ตำแหน่งค้นหา sticky sticky static none ตำแหน่งของอินพุตการค้นหา
ชุด native native , apple , facebook , google , twitter ชุดของอิโมจิที่จะใช้สำหรับตัวเลือก native เป็นนักแสดงมากที่สุดคนอื่น ๆ พึ่งพา Spritesheets
ผิว 1 1 , 2 , 3 , 4 , 5 , 6 โทนสีผิวอิโมจิ
การวาง skintoneposition preview preview search none ตำแหน่งของตัวเลือกโทนสีผิว
ธีม auto auto light dark ธีมสีของตัวเลือก
getSpritesheeturl null
 ฟังก์ชั่นที่ส่งคืน URL ของ Spritesheet เพื่อใช้สำหรับตัวเลือก ควรเข้ากันได้กับข้อมูลที่ให้ไว้

อิโมจิที่กำหนดเอง

คุณสามารถใช้อีโมจิที่กำหนดเองได้โดยจัดเตรียมหมวดหมู่และอิโมจิของพวกเขา อิโมจิยังรองรับโทนสีผิวหลายโทนและสามารถเป็น GIF หรือ SVG

 นำเข้าข้อมูลจาก '@emoji-mart/data'import picker จาก'@emoji-mart/react'const custom = [
  {id: 'github', ชื่อ: 'gitHub', emojis: [{id: 'octocat', ชื่อ: 'octocat', คำหลัก: ['gitHub'], หนัง: [{src: './octocat.png' }],}, {id: 'shipit', ชื่อ: 'squirrel', คำหลัก: ['github'], สกิน: [{src: './shipit-1.png'} -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 '}],},],
  },] แอปฟังก์ชัน () {
  return (<picker data = {data} custom = {custom} />>
  -

ไอคอนหมวดหมู่ที่กำหนดเอง

คุณสามารถใช้ไอคอนหมวดหมู่ที่กำหนดเองโดยการจัดหาวัตถุที่มีชื่อหมวดหมู่เป็นคีย์และไอคอนเป็นค่า รูปแบบที่รองรับในปัจจุบันคือสตริง svg และ src ดูตัวอย่าง

 const customCategoryicons = {
  หมวดหมู่: {กิจกรรม: {svg: '<svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 640 512"> <path d = "M57.89 397.2C-6.262 8.616-16.02-13.19-25.92-13.19C-2233 0-31.98 20.68-31.98 32.03C0 6.522 1.987 13.1 6.115 18.78L46.52 64C58.89 507.4 68.6 512 512 512 512 .03C0-6.522-1.988 -13.1-6.115-18.78L57.89 397.2ZM496.1 352C-44.13 0-79.72 35.75-79.72 80S35.59 80 79.72 80S79.91-35.75 79.91-80S540.2 3522 3522 3522 3522 3522 3522 3522 35 -27.34-12.72 -39.2L-223.63-32.5C-123.44-18.5-33.77-27.68-54.12-27.68C-123.89 0-27.79 4.281-39.51 12.8L307.8 159.7C262.2.820.4-9-9240.4 -24 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.7C630 ,}, ผู้คน: {src: './people.png',},
  -

องค์ประกอบอิโมจิ

การใช้งานองค์ประกอบของเว็บอีโมจินั้นเหมือนกันไม่ว่าคุณจะใช้ห้องสมุดใด

ก่อนอื่นคุณต้องตรวจสอบให้แน่ใจว่าข้อมูลได้เริ่มต้นแล้ว คุณต้องเรียกสิ่งนี้เพียงครั้งเดียวต่อการโหลดหน้า โปรดทราบว่าหากคุณเรียก init เช่นนี้คุณไม่จำเป็นต้องรวมข้อมูลไว้ในอุปกรณ์ประกอบอุปกรณ์ตัวเลือกของคุณ มันก็ไม่เจ็บเหมือนกัน

 นำเข้าข้อมูลจาก '@emoji-mart/data'import {init} จาก' emoji-mart'init ({data})

จากนั้นคุณสามารถใช้องค์ประกอบอีโมจิใน HTML / JSX ของคุณ

 <em-emoji id = "+1" size = "2em"> </em-emoji> <em-emoji id = "+1" skin = "2"> </em-emoji> <em-emoji shortcodes = " ": +1 :: skin-tone-1:"> </em-emoji> <em-emoji shortcodes = ":+1 :: skin-tone-2:"> </em-emoji>

คุณลักษณะ / อุปกรณ์ประกอบฉาก

คุณลักษณะ ตัวอย่าง คำอธิบาย
รหัสประจำตัว +1 Id emoji id
รหัสย่อ :+1::skin-tone-2: รหัสย่อของอิโมจิ
พื้นเมือง ? อิโมจิพื้นเมือง
ขนาด 2em ขนาดองค์ประกอบแบบอินไลน์
ทางเลือก :shrug: สตริงที่จะแสดงผลในกรณีที่ไม่พบอิโมจิ
ชุด native ชุดอีโมจิ: native , apple , facebook , google , twitter
ผิว 1 โทนสีผิวอิโมจิ: 1 , 2 , 3 , 4 , 5 , 6

การค้นหาแบบไม่มีหัว

คุณสามารถค้นหาได้โดยไม่ต้องเลือก เช่นเดียวกับองค์ประกอบอีโมจิ data จะต้องเริ่มต้นก่อนเพื่อใช้ดัชนีการค้นหา

 นำเข้าข้อมูลจาก '@emoji-mart/data'import {init, searchindex} จาก' emoji-mart'init ({data}) การค้นหาฟังก์ชั่น async (ค่า) {
  const emojis = รอ SearchIndex.search (ค่า)
  ผลลัพธ์ const = emojis.map ((emoji) => {return emoji.skins [0] .native
  -

  console.log (ผลลัพธ์)} ค้นหา ('คริสต์มาส') // => ['?', '??', '? ‍?', '?', '?', '?', '☃', ' ❄ ','? ',' ⛄ ']

รับข้อมูลอิโมจิจากดั้งเดิม

คุณสามารถรับข้อมูลอิโมจิจากอิโมจิดั้งเดิม สิ่งนี้มีประโยชน์หากคุณต้องการได้รับ Emoji ID จากอิโมจิดั้งเดิม เช่นเดียวกับองค์ประกอบอีโมจิ data จะต้องเริ่มต้นก่อนเพื่อดึงข้อมูลอิโมจิ

 นำเข้าข้อมูลจาก '@emoji-mart/data'import {init, getemojidataFromnative} จาก' emoji-mart'init ({data}) getemojidataFromnative ('??') hand_with_index_and_middle_fingers_crossed '], id:' crossed_fingers ', คำหลัก: [' มือ ',' กับ ',' ดัชนี ',' และ ',' กลาง ',' ดี ',' โชคดี '], ชื่อ: : '?

การทำให้เป็นสากล

Emojimart UI รองรับหลายภาษาอย่าลังเลที่จะเปิดการประชาสัมพันธ์หากคุณหายไป

 นำเข้า i18n จาก'@emoji-mart/data/i18n/fr.json'i18n.search_no_results_1 = 'Aucun Emoji'new Picker ({i18n})

ด้วยขนาดไฟล์ขนาดเล็กภาษาอังกฤษจึงมีอยู่ในตัวและไม่จำเป็นต้องจัดเตรียม

ตัวอย่าง

  • หมวดหมู่

  • ฟอนต์อิโมจิแบบกำหนดเอง

  • สไตล์ที่กำหนดเอง

  • องค์ประกอบอิโมจิ

  • การค้นหาแบบไม่มีหัว

  • สีหย่อน

สร้างขึ้นสำหรับเบราว์เซอร์ที่ทันสมัย

Emojimart อาศัย API เหล่านี้คุณอาจต้องรวม polyfills หากคุณต้องการสนับสนุนเบราว์เซอร์รุ่นเก่า:

  • Shadow Dom (MDN)

  • องค์ประกอบที่กำหนดเอง (MDN)

  • Intersectionobserver (MDN)

  • Async/Await (MDN)

การพัฒนา

 การติดตั้งเส้นด้าย
DEV เส้นด้าย
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด