emoji mart
v5.6.0
Emoji mart adalah yang dapat disesuaikan
Emoji Picker HTML Component untuk Web
Demo 
Dibawa kepada Anda oleh tim Missive
Data
Pemetik
Komponen emoji
Pencarian tanpa kepala
Dapatkan data emoji dari penduduk asli
Internasionalisasi
Contoh
Dibangun untuk browser modern
Perkembangan
Data yang diperlukan untuk pemilih untuk bekerja telah sepenuhnya dipisahkan dari perpustakaan. Itu memberi pengembang fleksibilitas untuk mengontrol ukuran bundel aplikasi mereka dengan lebih baik dan membiarkan mereka memilih bagaimana dan kapan data ini dimuat. Data bisa:
Pro: Render pemilih secara instan, data tersedia secara offline
Kekurangan: Muat halaman awal yang lebih lambat (file yang lebih besar untuk dimuat)
Benang tambahkan @emoji-mart/data
Impor data dari '@emoji-mart/data'import {picker} dari' emoji-mart'new picker ({data})Kelebihan: Data hanya diambil saat dibutuhkan, tidak memengaruhi ukuran bundel aplikasi Anda
Cons: Latensi jaringan, tidak berfungsi secara offline (kecuali jika Anda mengkonfigurasi Peworker)
impor {picker} dari 'emoji-mart'new picker ({
Data: async () => {const response = Await fetch ('https://cdn.jsdelivr.net/npm/@emoji-mart/data' ,)seturn response.json ()
}})Dalam contoh ini data diambil dari jaringan pengiriman konten, tetapi juga bisa diambil dari domain Anda sendiri jika Anda ingin meng -host data.
NPM Instal-Save Emoji-Mart @Emoji-Mart/Data @Emoji-Mart/React
Impor data dari '@emoji-mart/data'import picker dari'@emoji-mart/react'function app () {
return (<picker data = {data} onemojiselect = {console.log} />
)} <skrip src = "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"> </script> <script>
const pickeroptions = {onemojiselect: console.log}
const picker = emojimart.picker baru (pickeroptions)
Document.Body.AppendChild (Picker) </Script>| Pilihan | Bawaan | Pilihan | Keterangan |
|---|---|---|---|
| data | {} | Data untuk digunakan untuk pemilih | |
| i18n | {} | Data lokalisasi untuk digunakan untuk pemetik | |
| kategori | [] | frequent , people , nature , foods , activity , places , objects , symbols , flags | Kategori untuk ditampilkan di pemilih. Pesanan dihormati. |
| kebiasaan | [] | Emoji Kustom | |
| Onemojiselect | null | Panggilan balik saat emoji dipilih | |
| OnClickoutside | null | Panggilan balik saat klik di luar pemetik terjadi | |
| onaddcustomemoji | null | Callback Saat tombol Tambahkan Emoji Kustom diklik. Tombol hanya akan ditampilkan jika panggilan balik ini disediakan. Ini ditampilkan saat pencarian tidak mengembalikan hasil. | |
| fokus otomatis | false | Apakah pemilih harus secara otomatis fokus pada input pencarian | |
| kategori | {} | Ikon kategori khusus | |
| Dynamicwidth | false | Apakah pemilih harus menghitung perLine secara dinamis berdasarkan lebar <em-emoji-picker> . Saat diaktifkan, perLine diabaikan | |
| EmojibutTonColors | [] | yaitu #f00 , pink , rgba(155,223,88,.7) | Serangkaian warna yang mempengaruhi warna latar belakang hover |
| emojibuttonradius | 100% | yaitu 6px , 1em , 100% | Jari -jari tombol emoji |
| emojibutTonsize | 36 | Ukuran tombol emoji | |
| emojisize | 24 | Ukuran emoji (di dalam tombol) | |
| emojifersion | 14 | 1 , 2 , 3 , 4 , 5 , 11 , 12 , 12.1 , 13 , 13.1 , 14 | Versi data emoji untuk digunakan. Versi terbaru didukung di @emoji-mart/data saat ini 14 |
| Exceptemojis | [] | Daftar ID Emoji yang akan dikecualikan dari pemilih | |
| ikon | auto | auto , outline , solid | Jenis ikon yang akan digunakan untuk pemetik. outline dengan tema terang dan solid dengan tema gelap. |
| lokal | en | en , ar , be , cs , de , es , fa , fi , fr , hi , it , ja , ko , nl , pl , pt , ru , sa , tr , uk , vi , zh | Lokal untuk digunakan untuk pemetik |
| MaxFrequentrows | 4 | Jumlah maksimum baris sering untuk ditampilkan. 0 akan menonaktifkan kategori yang sering | |
| Navposition | top | top , bottom , none | Posisi Bilah Navigasi |
| nocountryflags | false | Apakah akan menunjukkan bendera negara atau tidak. Jika tidak disediakan, TBHI ditangani secara otomatis (Windows tidak mendukung bendera negara) | |
| Noresultsemoji | cry | ID emoji untuk digunakan untuk emoji hasil tidak | |
| Perline | 9 | Jumlah emoji untuk ditampilkan per baris | |
| Previewemoji | point_up | ID emoji untuk digunakan untuk pratinjau ketika tidak melayang -layang emoji. point_up saat posisi pratinjau adalah bawah dan point_down saat posisi pratinjau di atas. | |
| Previewposisi | bottom | top , bottom , none | Posisi pratinjau |
| Posisi pencarian | sticky | sticky , static , none | Posisi input pencarian |
| mengatur | native | native , apple , facebook , google , twitter | Himpunan emoji untuk digunakan untuk pemilih. native menjadi yang paling pertunjukan, yang lain mengandalkan spritesheets. |
| kulit | 1 | 1 , 2 , 3 , 4 , 5 , 6 | Warna kulit emoji |
| Skintoneposisi | preview | preview , search , none | Posisi pemilih warna kulit |
| tema | auto | auto , light , dark | Tema warna pemetik |
| getspritesheeturl | null | Fungsi yang mengembalikan URL spritesheet untuk digunakan untuk pemilih. Itu harus kompatibel dengan data yang disediakan. |
Anda dapat menggunakan emoji khusus dengan menyediakan berbagai kategori dan emoji mereka. Emoji juga mendukung banyak warna kulit dan dapat berupa GIF atau SVG.
Impor data dari '@emoji-mart/data'import picker dari'@emoji-mart/react'const custom = [
{id: 'github', name: 'github', emojis: [{{id: 'octocat', name: 'octocat', kata kunci: ['github'], skins: [{src: './octocat.png' }],}, {id: 'shipit', name: 'squirrel', kata kunci: ['github'], skins: [{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', name: 'gifs', emojis: [{{id: 'party_parrot', name: 'Party Parrot', kata kunci: ['tari', 'menari'], skins: [{src: '. /party_parrot.gif '}],},],
},] function app () {
return (<picker data = {data} custom = {custom} />
)} Anda dapat menggunakan ikon kategori khusus dengan menyediakan objek dengan nama kategori sebagai kunci dan ikon sebagai nilai. Format yang didukung saat ini adalah string svg dan src . Lihat contoh.
const customcategoryicons = {
Categoryicons: {Activity: {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-23.33 0-31.98 20.68-31.98 32.03C0 6.522 1.987 13.1 6.115 18.78L46.52.9.9.9.9.9.9.93.9.9.9.9.8.9.9.8.8.8.8.66.8.66.8.66.8.66.8.66.8.66.19.812.19 3C0-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 49132.72 79.91-1 .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 220.4 230.9 183.4 273.4.2.27.2 192.8 220.4 230.9 183.4 273.4.2.2.2.2.2.2.2.273.2 192.8 220.4 273.4 273.8.4 273.8.8 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.5 140.4 640 120.140.3-140.7C630.5 140.4 640.3 ,}, orang: {src: './people.png',},
},}Penggunaan komponen web emoji adalah sama, tidak peduli perpustakaan apa yang Anda gunakan.
Pertama, Anda perlu memastikan data telah diinisialisasi. Anda perlu memanggil ini hanya sekali per halaman dimuat. Perhatikan bahwa jika Anda menelepon init seperti ini, Anda tidak perlu memasukkan data dalam alat peraga pemilih Anda. Tidak ada salahnya, itu akan noop.
Impor data dari '@emoji-mart/data'import {init} dari' emoji-mart'init ({data})Kemudian Anda dapat menggunakan komponen emoji di HTML / JSX Anda.
<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>
| Atribut | Contoh | Keterangan |
|---|---|---|
| pengenal | +1 | ID emoji |
| Kode pintas | :+1::skin-tone-2: | Kode pendek emoji |
| warga asli | ? | Emoji asli |
| ukuran | 2em | Ukuran elemen inline |
| Fallback | :shrug: | String yang akan diterjemahkan jika emoji tidak dapat ditemukan |
| mengatur | native | Set Emoji: native , apple , facebook , google , twitter |
| kulit | 1 | Nada kulit emoji: 1 , 2 , 3 , 4 , 5 , 6 |
Anda dapat mencari tanpa pemetik. Sama seperti komponen emoji, data perlu diinisialisasi terlebih dahulu untuk menggunakan indeks pencarian.
Impor data dari '@emoji-mart/data'import {init, SearchIndex} dari' emoji-mart'init ({data}) pencarian fungsi async (nilai) {
const emojis = tunggu searchIndex.search (nilai)
const result = emojis.map ((emoji) => {return emoji.skins [0] .native
})
console.log (hasil)} pencarian ('natal') // => ['?', '??', '? ?', '?', '?', '?', '☃️', ' ❄️ ','? ',' ⛄ '] Anda bisa mendapatkan data emoji dari emoji asli. Ini berguna jika Anda ingin mendapatkan ID emoji dari emoji asli. Sama seperti komponen emoji, data perlu diinisialisasi terlebih dahulu untuk mengambil data emoji.
Impor data dari '@emoji-mart/data'import {init, getemojidatafromnative} dari' emoji-mart'init ({data}) getemojidatafromnative ('??'). Lalu (console.log)/* {aliases: [' hand_with_index_and_middle_fingers_crossed '], id:' crossed_fingers ', kata kunci: [' tangan ',' dengan ',' indeks ',' dan ',' tengah ',' baik ',' beruntung '], nama:' silang jari ', asli : '??', shortcodes: ': crossed_fingers :: skin-tone-6:', skin: 6, Unified: '1f91e-1f3ff',} *//Emojimart UI mendukung berbagai bahasa, jangan ragu untuk membuka PR jika Anda hilang.
Impor i18n dari'@emoji-mart/data/i18n/fr.json'i18n.search_no_results_1 = 'aucun emoji'new picker ({i18n}))Mengingat ukuran file kecil, bahasa Inggris built-in dan tidak perlu disediakan.
Kategori
Font Emoji Kustom
Gaya khusus
Komponen emoji
Pencarian tanpa kepala
Warna kendur
Emojimart mengandalkan API ini, Anda mungkin perlu menyertakan polyfill jika Anda perlu mendukung browser yang lebih lama:
Shadow Dom (MDN)
Elemen Kustom (MDN)
IntersectionObserver (MDN)
Async/Await (MDN)
Instalasi benang Dev benang
