Привет!
Поэтому сегодня давайте сделаем компонент Emoji в Svelte 3. Это довольно просто. Наша цель состоит в том, чтобы иметь возможность написать что-то вроде ниже, и это покажет эмодзи. Мы также хотим быть осторожным, что атрибуты доступности есть.
Давайте начнем с написания наших Emoji Компонент, и назовите это Emoji.svelte. С помощью следующего контента:
{symbol}
Быстрое объяснение:
- Компонент будет пролета
- Он имеет символ и атрибут метки, так что это совместимый на A11Y
- Ария скрыта, если нет ярлыка (но вы всегда должны ставить один)
- Символ – это фактический эмодзи, а будет отображаться как ребенок/внутренний HTML пролета
- Внутри бирка сценария мы делаем метки и переменные символов доступны
- Я ухожу из тега стиля, чтобы вы могли добавить там CSS, если хотите
И это так! Я вам просто должен импортировать компонент, как так, в тег скрипта другого компонента:
… Тогда используйте Emoji Тег, как описано в первом блоке кода, и это так!
Вы все еще должны скопировать/вставить символ эмодзи где-то и вставьте его в Символ атрибут Emoji ярлык. Если вы находитесь на Mac OS, я рекомендую легкий Qmoji Джаред Форсайт, но есть куча этих приложений Emoji для любой ОС.
Поговори с то все!
Оригинал: “https://dev.to/animo/emojis-in-svelte-3-2829”