emoji mart
v5.6.0
Emoji Mart - настраиваемый
Компонент сбора смайликов для сети для сети для сети
Демо 
Принесли вам команду посланий
Данные
Сборщик
Компонент эмодзи
Без головы поиск
Получить данные эмодзи от нативного
Интернационализация
Примеры
Построенный для современных браузеров
Разработка
Данные, необходимые для работы, были полностью отделены от библиотеки. Это дает разработчикам гибкость, чтобы лучше контролировать размер пакета приложений и позволить им выбирать, как и когда эти данные загружаются. Данные могут быть:
Плюсы: Picker мгновенно отображается, данные доступны в автономном режиме
Минусы: более медленная начальная загрузка страницы (больший файл для загрузки)
пряжа добавить @emoji-mart/data
Импортируйте данные из '@emoji-mart/data'import {picker} от' emoji-mart'new picker ({data})Плюсы: данные, полученные только при необходимости, не влияют на размер пакета приложений
Минусы: задержка сети, не работает в автономном режиме (если вы не настраиваете обслуживающий работник)
Import {Picker} от 'emoji-mart'new picker ({
Данные: async () => {const response = waw await fetch ('https://cdn.jsdelivr.net/npm/@emoji-mart/data' ,) return response.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 = 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 | Должен ли сборщик автоматически фокусироваться на вводе поиска | |
| категория | {} | Пользовательские значки категории | |
| динамика | false | Должен ли сборщик рассчитывать perLine динамически на основе ширины <em-emoji-picker> . Когда включено, perLine игнорируется | |
| emojibuttoncolors | [] | т.е. #f00 , pink , rgba(155,223,88,.7) | Массив цвета, который влияет на цвет фона пах |
| emojibittonradius | 100% | т.е. 6px , 1em , 100% | Радиус кнопок эмодзи |
| Emojibittonsize | 36 | Размер кнопок смайликов | |
| смайлика | 24 | Размер смайликов (внутри кнопок) | |
| эмодживерсия | 14 | 1 , 2 , 3 , 4 , 5 , 11 , 12 , 12.1 , 13 , 13.1 , 14 | Версия данных Emoji для использования. Последняя версия, поддерживаемая в @emoji-mart/data в настоящее время 14 |
| кроме Emojis | [] | Список идентификаторов смайликов, которые будут исключены из сборщика | |
| значки | auto | auto , outline , solid | Тип значков для использования для сборщика. outline с легкой темой и solid с темной темой. |
| локаль | en | en , ar , be , cs , de , es , fa , fi ru fr , HI uk zh sa vi tr KO, NL, PL, PT, RU, pl ko nl it pt , ja , hi | Локаль для использования для сборщика |
| maxfrequentrows | 4 | Максимальное количество частых строк, чтобы показать. 0 будет отключить частую категорию | |
| навигация | top | top , bottom , none | Позиция навигационной панели |
| Nocountryflags | false | Показать флаги страны или нет. Если не предоставлено, TBHIS обрабатывается автоматически (Windows не поддерживает флаги страны) | |
| Noresultsemoji | cry | Идентификатор эмодзи для использования для эмодзи нет результатов | |
| пронзительный | 9 | Количество эмодзи, чтобы показать на линию | |
| Previewemoji | point_up | Идентификатор эмодзи для использования для предварительного просмотра, когда не парит какие -либо смайлики. 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 | Функция, которая возвращает URL -адрес SpriteShieLeep для использования для сборщика. Это должно быть совместимо с предоставленными данными. |
Вы можете использовать пользовательские смайлики, предоставляя множество категорий и их смайликов. Эмодзи также поддерживают несколько оттенков кожи и могут быть GIF или SVG.
Данные импорта из '@emoji-mart/data'import Picker из'@emoji-mart/react'const custom = [
{id: 'github', name: 'github', emojis: [{id: 'octocat', name: 'octocat', ключевые слова: ['github'], скины: [{src: './octocat.png' }],}, {id: 'Shipit', имя: 'squirrel', ключевые слова: ['github'], skins: [{src: './shipit-1.png'}, {src: './shipit -2, src: './shipit-6.png'},],},],
},
{id: 'Gifs', имя: 'Gifs', Emojis: [{id: 'party_parrot', имя: 'Party Parrot', ключевые слова: ['Dance', 'Dancing'], Skins: [{src: '. /party_parrot.gif '}],},],
},] function app () {
return (<picker data = {data} custom = {custom} />
)} Вы можете использовать пользовательские значки категории, предоставляя объект с именем категории в качестве ключа и значка в качестве значения. В настоящее время поддерживаемые форматы являются svg String и src . Смотрите пример.
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 64C58,89 507,4 68,64 512 78,55 5123.29.89.89.21.21.21.21.21.21.21.21.21.21.21.21.21.21.21.21.21.21.21.21.21.21.21.21.21.21.81.87.11.21.21.21.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-1344-18.5-33.77-27.68-54.12-27.68C-139 0-27,79 4,281-39,51 12,8L307,8 159,7C262,2 192,8 220,4 230,9 183,4 273,4C-24,22227.888888-99,189,9,9 279,19,19,189,9 279,19,189,9,9 279,189,189,9,9 279,19,19,19,9 273,99,9,9 279,19,189,9,9 279,18.99,19,9 279,189,9 279,189,9 279,189,9,9 279,18.99. 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 640 99,38Z "/SSG630,5 140,4 640 120 640 99,38Z"/S./S./S./S./S./S-SS ,}, People: {src: './people.png',},
},}Использование компонентов смайликов эмодзи одинаково, независимо от того, какая библиотека вы используете.
Во -первых, вам нужно убедиться, что данные были инициализированы. Вам нужно позвонить это только один раз на страницу загрузку. Обратите внимание, что если вы называете это init , вам не обязательно включать данные в свой реквизит Sicker. Это тоже не повредит, это будет место.
Данные импорта из '@emoji-mart/data'import {init} от' emoji-mart'init ({data})Затем вы можете использовать компонент Emoji в вашем HTML / JSX.
<em-emoji id = "+1" size = "2em"> </em-emoji> <em-emoji id = "+1" кожа = "2"> </em-emoji> <em-emoji shortcodes = ": +1 :: кожи-тона-1:"> </em-emoji> <em-emoji shortcodes = ":+1 :: tone-2:"> </em-emoji>
| Атрибут | Пример | Описание |
|---|---|---|
| идентификатор | +1 | Идентификатор эмодзи |
| шорткоды | :+1::skin-tone-2: | Шорткод смайликов |
| родной | ? | Родной эмодзи |
| размер | 2em | Встроенный размер элемента |
| отступать | :shrug: | Строка, которую нужно отображать на случай, если смайлики не найдут |
| набор | native | Набор Emoji: native , apple , facebook , google , twitter |
| кожа | 1 | Тон кожи эмодзи: 1 , 2 , 3 , 4 , 5 , 6 |
Вы можете искать без сборщика. Как и компонент смайликов, data необходимо сначала инициализироваться, чтобы использовать индекс поиска.
Данные импорта из '@emoji-mart/data'import {init, searchindex} из' emoji-mart'init ({data}) async function search (value) {
const emojis = await searchindex.search (value)
const results = emojis.map ((emoji) => {return emoji.skins [0] .native
})
console.log (результаты)} search («Рождество») // => ['?', '??', '? ?', '?', '?', '? ❄ ','? ',' ⛄ '] Вы можете получить данные смайликов от нативного смайлика. Это полезно, если вы хотите получить идентификатор смайликов от местного смайлика. Как и компонент смайликов, data необходимо сначала инициализироваться, чтобы получить данные смайликов.
Импортируйте данные из '@emoji-mart/data'import {init, getemojidatafromnative} от' emoji-mart'init ({data}) getemojidatafromnative ('??'). Тогда (console.log)/* {Aliases: [' hand_with_index_and_middle_fingers_crossed '], id:' crossed_fingers ', ключевые слова: [' hand ',' с ',' index ',' и ',' middle ',' good ',' Lucky '], имя:' Скрещенные пальцы ', родные : '??Пользовательский интерфейс Emojimart поддерживает несколько языков, не стесняйтесь открывать PR, если у вас отсутствует.
Импорт i18n с'@emoji-mart/data/i18n/fr.json'i18n.search_no_results_1 = 'aucun emoji'new Picker ({i18n})Учитывая небольшой размер файла, английский встроен и не должен быть предоставлен.
Категории
Пользовательский шрифт эмодзи
Пользовательские стили
Компонент эмодзи
Без головы поиск
Слабые цвета
Emojimart полагается на эти API, вам, возможно, придется включить полифиллы, если вам нужно поддерживать более старые браузеры:
Shadow Dom (MDN)
Пользовательские элементы (MDN)
RecsectionObserver (mdn)
Асинхро
Установка пряжи пряжа дев
