НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Выбор эмодзи

Emoji picker — панель, где находят и вставляют эмодзи. Человек ищет или листает по категориям, выбирает оттенок кожи и нажимает на эмодзи; вставляете его вы.

Стабильный Figma
ОбзорИспользованиеAPIДоступность 
<tk-emoji-picker></tk-emoji-picker>

Анатомия

Часть Что это
tk-emoji-picker сама панель; приподнята, со скруглёнными углами
part search поле поиска с кнопкой оттенка кожи в конце
part nav строка вкладок категорий
part grid прокручиваемая сетка эмодзи или результаты поиска
part preview необязательная строка внизу с эмодзи в фокусе и его названием

Сначала идут недавние эмодзи, затем категории: Smileys & emotion, People & body, Animals & nature, Food & drink, Travel & places, Activities, Objects, Symbols, Flags. У края сетка растворяется, если дальше есть что прокручивать.

Настройки

<tk-emoji-picker preview columns="6" label="Choose a reaction"></tk-emoji-picker>
  • preview: показывает эмодзи в фокусе или под курсором крупно, с названием.
  • columns: сколько эмодзи в строке, по умолчанию 8.
  • label: имя сетки, по умолчанию «Choose an emoji».
  • flags: категория флагов, по умолчанию включена. В Windows флаги не отображаются; чтобы убрать их, задайте в скрипте picker.flags = false. Атрибутом её не выключить.

Поиск и просмотр

  • Ввод текста оставляет подходящие эмодзи. Если ничего не нашлось, панель пишет «No emoji found. Try another word.» Esc или пустое поле возвращают к просмотру.
  • Вкладка категории прокручивает к ней; при прокрутке вкладки следуют за ней.
  • При наведении поле поиска не меняется. В фокусе рамка окрашивается в цвет фокуса и утолщается внутрь.

Оттенок кожи

Кнопка в конце поля поиска открывает шесть оттенков, от Default до Dark. Оттенок применяется ко всем эмодзи, у которых он есть. Это атрибут skin-tone, от 0 до 5; смена оттенка человеком вызывает tk-skin-tone-change.

Вставка и недавние

Слушайте tk-emoji-select и вставляйте detail.emoji — в нём уже есть оттенок кожи. Сама панель ничего не вставляет.

<tk-emoji-picker id="picker"></tk-emoji-picker>
<script type="module">
  const picker = document.getElementById('picker');
  picker.addEventListener('tk-emoji-select', (event) => {
    document.getElementById('message').value += event.detail.emoji;
  });
</script>

Для строки недавних либо задайте persist-recents, и панель сама сохранит список и оттенок в локальном хранилище, либо ведите список сами и передавайте его в recent:

<tk-emoji-picker id="reactions"></tk-emoji-picker>
<script type="module">
  const picker = document.getElementById('reactions');
  let recent = JSON.parse(localStorage.getItem('recent') ?? '[]');
  picker.recent = recent;
  picker.addEventListener('tk-emoji-select', (event) => {
    recent = [event.detail.emoji, ...recent.filter((e) => e !== event.detail.emoji)].slice(0, 24);
    localStorage.setItem('recent', JSON.stringify(recent));
    picker.recent = recent;
  });
</script>

Без того и другого строка пишет «No recent emoji yet».

Во всплывающей панели

Чтобы открывать эмодзи по кнопке, положите панель в Popover и уберите у него отступы:

<tk-popover label="Emoji" style="--tk-popover-padding: 0;">
  <tk-icon-button slot="trigger" label="Add emoji"><span aria-hidden="true">😀</span></tk-icon-button>
  <tk-emoji-picker></tk-emoji-picker>
</tk-popover>

tk-emoji-select доходит до вашего обработчика снаружи popover. Открывайте по клику, не по наведению.

Системные эмодзи

Эмодзи рисует системный шрифт, поэтому они выглядят как на остальном устройстве и не требуют картинок.

  • В Windows флаги показываются двумя буквами.
  • Составные эмодзи вроде 👨‍👩‍👧 в старых системах могут распасться на отдельные, а совсем новые — показаться пустым квадратом.
  • Цвет эмодзи токенами не меняется.
  • Данные эмодзи загружаются при первом появлении панели, около 85 kB в gzip, и общие для всех панелей на странице. Пока они грузятся, сетка пишет «Loading emoji…».