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 | 1 2 3 4 5 11 12 12.1 13 13.1 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 | 1 2 3 4 5 6 | 表情符号肤色 |
| 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 1 2 |
您可以在没有选择器的情况下搜索。就像表情符号组件一样，需要首先初始化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）
纱线安装 纱开
