emoji mart
v5.6.0
表情符號瑪特是一個可定制的
emoji選擇器html的網絡組件
演示
是由職員團隊帶給您的
數據
採摘者
表情符號組件
無頭搜索
從本機獲取表情符號數據
國際化
例子
為現代瀏覽器建造
發展
選擇器工作所需的數據已完全與庫完全解耦。這使開發人員具有更好地控制其應用程序捆綁尺寸的靈活性，並讓他們選擇加載此數據的方式和何時。數據可能是：
優點：選擇器立即渲染，數據有離線可用
缺點：初始頁面加載較慢（加載更大的文件）
紗線添加 @emoji-mart/data
從'@emoji-mart/data'import {picker}導入數據優點：僅在需要時獲取數據，不會影響您的應用程序捆綁尺寸
缺點：網絡延遲，不脫機工作（除非您配置服務工人）
來自'emoji-mart'new picker的導入{picker}（{
數據：async（）=> {const響應=等待fetch（'https://cdn.jsdelivr.net/npm/@emoji-mart/data's，reterturn response.json（）
}}））在此示例中，數據是從內容交付網絡獲取的，但是如果您想託管數據，也可以從您自己的域中獲取數據。
npm安裝-Save emoji-mart @emoji-mart/data @emoji-mart/react
從'@emoji-mart/data'import picker從'@emoji-mart/react'function app（）導入數據{
返回（<picker data = {data} onemojiselect = {console.log} />
）<script src =“ https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js”> </script> <script> <script>
const pickerOptions = {onemojiselect：console.log}
const picker = new Emojimart.picker（pickeroptions）
document.body.body.appendchild（picker）</script>| 選項 | 預設 | 選擇 | 描述 |
|---|---|---|---|
| 數據 | {} | 用於選擇器的數據 | |
| i18n | {} | 用於選擇器的本地化數據 | |
| 類別 | [] | frequent ， people ， nature ， foods ， activity ， places ， objects ， symbols ， flags | 在選擇器中顯示的類別。訂單是尊重的。 |
| 風俗 | [] | 自定義表情符號 | |
| Onemojiselect | null | 選擇表情符號時回調 | |
| OnClickoutside | null | 當訪問者外面單擊時，回調 | |
| OnAddcustomeMoji | null | 單擊“添加自定義表情符號”按鈕時回調。僅在提供此回調的情況下，將顯示該按鈕。當搜索返回沒有結果時，將顯示它。 | |
| 自動對焦 | false | 選擇器是否應自動關注搜索輸入 | |
| 類別 | {} | 自定義類別圖標 | |
| 動態寬度 | false | 選擇器是否應基於<em-emoji-picker>的寬度perLine計算。啟用後，忽略了perLine | |
| 表情符號 | [] | IE #f00 ， pink ， rgba(155,223,88,.7) | 一系列影響懸停背景顏色的顏色 |
| 表情符號 | 100% | IE 6px ， 1em ， 100% | 表情符號按鈕的半徑 |
| 表情符號 | 36 | 表情符號按鈕的大小 | |
| 表情符號 | 24 | 表情符號的大小（在按鈕內） | |
| 表情狂 | 14 | | 要使用的表情符號數據的版本。 @emoji-mart/data支持的最新版本當前為14 |
| 除非Extimemojis | [] | 表情符號ID列表將排除在選擇器之外 | |
| 圖示 | auto | auto ， outline ， solid | 用於選擇器的圖標類型。 outline帶有輕型主題，並solid深色主題。 |
| 語言環境 | en | en ， ar ， be ， cs ， de ， es ， fa ， fi ， fr ，hi， hi ， it ， ja ， ko ， nl ，nl， pl ， pt ， ru ， sa ，sa， tr ， uk ，vi，vi， vi ， zh | 採摘者使用的語言環境 |
| maxfrequentrows | 4 | 最大頻繁行顯示的最大數量。 0將禁用頻繁類別 | |
| navposition | top | top ， bottom ， none | 導航欄的位置 |
| Nocountryflags | false | 是否顯示國家旗幟。如果未提供，則會自動處理TBHI（Windows不支持Country Flags） | |
| Noresultsemoji | cry | 表情符號的ID用於無結果表情符號 | |
| perline | 9 | 每行的表情符號數量 | |
| PrevieweMoji | point_up | 當不懸停任何表情符號時，表情符號的ID將用於預覽。當預覽位置為底部時， point_up當預覽位置為頂部時， point_down 。 | |
| 預覽 | bottom | top ， bottom ， none | 預覽的位置 |
| 搜索定位 | sticky | sticky ， static ， none | 搜索輸入的位置 |
| 放 | native | native ， apple ， facebook ， google ， twitter | 用於選擇器的表情符號集。 native是最出色的人，其他人則依靠噴霧。 |
| 皮膚 | 1 | | 表情符號膚色 |
| SkintonePosition | preview | preview ， search ， none | 膚色選擇器的位置 |
| 主題 | auto | auto ， light ， dark | 選擇器的顏色主題 |
| GetSpritesheeturl | null | 返回SpriteSheet的URL的函數將用於選擇器。它應該與提供的數據兼容。 |
您可以通過提供一系列類別及其表情符號來使用自定義表情符號。表情符號還支持多種膚色，可以是GIF或SVG。
從'@emoji-mart/data'import picker導入數據，來自'@emoji-mart/react'const custom = [
{id：'github'，name：'github'，emojis：[{id：'contocat'，name：'contocat'，關鍵字：['github']，皮膚：[{src：'./octocat.png ' }]，}，{id：'shipit'，name：'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'，name：'party parrot'，關鍵字：['dance'，'dance'，'dancing']，皮膚：[ {src：'。 /party_parrot.gif'}]，}，]，，，
}，] function app（）{
返回（<picker data = {data} custa = {custom} />
）您可以通過將對像作為鍵和圖標作為值來使用自定義類別圖標。當前支持的格式是svg字符串和src 。請參見示例。
cont customCategoryicons = {
類別：{活動：{svg：'<svg xmlns =“ http://www.w.33.org/2000/svg” viewbox =“ 0 0 640 512”> <path d =“ m57.89 397.89 8.616- 16.02-19-19-25.92-192-19C-23.33 0-31.98 20.68-31.98 32.03C0 6.522 1.987 13.115 18.78L46.78L46.52 64C58.89 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 80s79.91-35.75 79.91-80S540.2 352 496.1 352zM640 99.38c0-13.61-4.133-27.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 103.5 99.63L56.34 77.52C53.79-35.39 99.15-55.3 127.1-67.1-67.27C51.88-22 101.3-49.87 146.9-82.1L202.1L202.3-146.7C630.7C630.7C630.5 140.4 640.4 64640 640 640 99.38Z ，}，人：{src：'./people.png'，}，
}，}，}無論您使用哪個庫，表情符號Web組件使用情況都是相同的。
首先，您需要確保已初始化數據。您只需要每頁加載一次一次。請注意，如果您這樣調用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-em-emoji > <em-em-emoji短號= “：+1 :: skin-tone-1：”> </em-emoji> <em-emoji快速編號=“：+1 :: skin-tone-2：” > </em-emoji>
| 屬性 | 例子 | 描述 |
|---|---|---|
| ID | +1 | 表情符號ID |
| 短代碼 | :+1::skin-tone-2: | 表情符號快捷代碼 |
| 本國的 | ? | 本地表情符號 |
| 尺寸 | 2em | 內聯元素大小 |
| 倒退 | :shrug: | 如果找不到表情符號，則要渲染的字符串 |
| 放 | native | 表情符號集： native ， apple ， facebook ， google ， twitter |
| 皮膚 | 1 | 4 6 5 3 |
您可以在沒有選擇器的情況下搜索。就像表情符號組件一樣，需要首先初始化data才能使用搜索索引。
從'@emoji-mart/data'import {init，searchIndex}導入數據，來自'emoji-mart'init（{data}）async function search（value）{
const emojis =等待searchIndex.search（value）
const結果= emojis.map（（emoji）=> {return emoji.skins [0]。
}））
console.log（結果）} search（'clisths'）// => ['？'，'??'，'？？'，'，'？'，'，'，'，？'，'☃️ '，'，'，' ❄️'，'？'，'⛄']您可以從本機表情符號獲得表情符號數據。如果您想從本機表情符號獲得表情符號ID，這將很有用。就像表情符號組件一樣，需要首先初始化data才能檢索表情符號數據。
從'@emoji-mart/data'import {init，getemojidatafromnative}中導入數據，來自'emoji-mart'init（{data}）getemojidatafromnative（'??'??'）。 hand_with_index_and_middle_fingers_crossed']，id：'crossed_fingers '，關鍵字：['hand'''with'with'with'with'index'''''index''and'''''中間'，“ good”，“ cuncys''，'ulcke's' ： '??'，快捷代碼：'：crossed_fingers :: skin-tone-6：'，皮膚：6，統一：'1f91e-1f3ff'，} */Emojimart UI支持多種語言，如果缺少您的PR，請隨時打開PR。
從'@emoji-mart/data/i18n/fr.json'i18n.search_no_results_1 ='aucun emoji'new picker（{i18n}）導入i18n。鑑於文件大小較小，英語是內置的，不需要提供。
類別
自定義表情符號字體
定製樣式
表情符號組件
無頭搜索
鬆弛的顏色
表情符號依賴於這些API，如果您需要支持較舊的瀏覽器，則可能需要包含polyfills：
影子dom（MDN）
自定義元素（MDN）
交叉駕駛器（MDN）
異步/等待（MDN）
紗線安裝 紗開
