像angular一样的表情符号选择器–ngx-emoji-mart

像angular一样的表情符号选择器–ngx-emoji-mart
插件名称 ngx-emoji-mart
发布时间 2020年6月9日
插件作者 TypeCtrl

一个受Slack.com启发的可自定义的,精美的Angular表情符号选择器。

安装:

# NPM
$ npm install @ctrl/ngx-emoji-mart --save

组件

选择器

ngModule中的导入模块

import { PickerModule } from '@ctrl/ngx-emoji-mart';

如果使用SASS,则在styles.scss中导入样式

@import '~@ctrl/ngx-emoji-mart/picker';

或者angular-cli也可以通过angular-cli.json包含它

"styles": [
  "styles.scss",
  "node_modules/@ctrl/ngx-emoji-mart/picker.css"
]

使用组件

<emoji-mart title="Pick your emoji…" emoji="point_up"></emoji-mart>
<emoji-mart set="emojione"></emoji-mart>
<emoji-mart (emojiClick)="addEmoji($event)"></emoji-mart>
<emoji-mart
  [style]="{ position: 'absolute', bottom: '20px', right: '20px' }"
></emoji-mart>
<emoji-mart
  [i18n]="{ search: 'Recherche', categories: { search: 'Résultats de recherche', recent: 'Récents' } }"
></emoji-mart>

I18n

search: 'Search',
emojilist: 'List of emoji',
notfound: 'No Emoji Found',
clear: 'Clear',
categories: {
  search: 'Search Results',
  recent: 'Frequently Used',
  people: 'Smileys & People',
  nature: 'Animals & Nature',
  foods: 'Food & Drink',
  activity: 'Activity',
  places: 'Travel & Places',
  objects: 'Objects',
  symbols: 'Symbols',
  flags: 'Flags',
  custom: 'Custom',
},
skintones: {
  1: 'Default Skin Tone',
  2: 'Light Skin Tone',
  3: 'Medium-Light Skin Tone',
  4: 'Medium Skin Tone',
  5: 'Medium-Dark Skin Tone',
  6: 'Dark Skin Tone',
},