ngx-emoji-mart (英语)

德莫尔数字 : https://ngx-emoji-mart.vercel.app. 互联网档案馆的存檔,存档日期2014-12-22

这个项目是 爱莫吉玛特 被误入歧途.

安装

npm install @ctrl/ngx-emoji-mart
# Or if you're using yarn
yarn add @ctrl/ngx-emoji-mart
# Or if you're using pnpm
pnpm install @ctrl/ngx-emoji-mart

依赖关系

每个版本的最新版本

构成部分

拾取器

添加 PickerComponent 输入模块

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

@NgModule({
  imports: [PickerComponent],
})
export class AppModule {}

// Or if using standalone components

@Component({
  standalone: true,
  imports: [PickerComponent],
})
export class AppComponent {}

导入样式 styles.scss数字 :

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

或者把这些风格包起来 angular.json 配置 :

"build": {
  "options": {
    "styles": [
      "src/styles.scss",
      "node_modules/@ctrl/ngx-emoji-mart/picker.css"
    ]
  }
}

现在我们可以使用 emoji-mart 组件 :

<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',
},

工作表大小

工作表来自 (单位:公斤),一个为出版文件服务的全球CDN 无。 。 。 .

实例 emoji 对象 :

{
  id: 'smiley',
  name: 'Smiling Face with Open Mouth',
  colons: ':smiley:',
  text: ':)',
  emoticons: [
    '=)',
    '=-)'
  ],
  skin: null,
  native: '😃'
}

{
  id: 'santa',
  name: 'Father Christmas',
  colons: ':santa::skin-tone-3:',
  text: '',
  emoticons: [],
  skin: 3,
  native: '🎅🏼'
}

{
  id: 'octocat',
  name: 'Octocat',
  colons: ':octocat',
  text: '',
  emoticons: [],
  custom: true,
  imageUrl: 'https://github.githubassets.com/images/icons/emoji/octocat.png'
}

爱莫吉

添加 EmojiComponent 到您的模块或独立组件 imports数字 :

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

<ngx-emoji [emoji]="{ id: 'santa', skin: 3 }" size="16"></ngx-emoji>
<ngx-emoji emoji=":santa::skin-tone-3:" size="16"></ngx-emoji>
<ngx-emoji emoji="santa" set="emojione" size="16"></ngx-emoji>

========================================================================================= |---------------------------------------------------------------------------------------------------------------------------------------------------------------------- - - - - - - -- - - - - - - - - - -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | 爱莫吉 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}或者一个字符串或者一个 emoji 对象 qq | 大小 emoji宽度和高度 | 正则 | false {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}让本地的独相通的emoji | (emojiClick) (英语) {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 { emoji, $event } | | (emoji Leave) (英语) {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 { emoji, $event } | | (emojiOver) (英语) {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 { emoji, $event } | | 倒计时 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 (emoji, props) => {} | | 设定 | apple Emoji的设定: 'apple', 'google', 'twitter', 'emojione' | | 工作表大小 | 64 爱莫吉 工作表大小数字 : 16, 20, 32, 64 | | 背景图像Fn | ((set, sheetSize) => …) 返回图像表用于emojis的 Fn. 用于避免本地工作表出现请求 。 | | 皮肤 | 1 QQ 皮肤颜色 : 1, 2, 3, 4, 5, 6 | | 工具提示 | false *在徘徊时显示emoji短名(标题) * * * | 隐藏奥布索莱特 | false 喜欢女性和男性的Emoji | 使用按钮 | false 使用按钮元素,而不是跨度

不支持的情绪回落

某些设定不支持所有emojis(即Facebook不支持) :shrug:) (中文(简体) ). Emoji组件不会做任何事情, 当使用独立的"Emoji"组件时,你可以通过提供"Emoji"来提供任何你想要的东西 fallback 道具来.

使组件 :shrug: 您必须:

emojiFallback = (emoji: any, props: any) => (emoji ? `:${emoji.shortNames[0]}:` : props.emoji);

<ngx-emoji set="twitter" emoji="shrug" size="24" [fallback]="emojiFallback"></ngx-emoji>

自定义emojis

您可以提供自定义的 emojis , 它会出现在自己的类别。 您可以使用单个图像作为图像Url,也可以使用第二个对象显示的图示表.

const customEmojis = [
  {
    name: 'Octocat',
    shortNames: ['octocat'],
    text: '',
    emoticons: [],
    keywords: ['github'],
    imageUrl: 'https://github.githubassets.com/images/icons/emoji/octocat.png',
  },
  {
    name: 'Test Flag',
    shortNames: ['test'],
    text: '',
    emoticons: [],
    keywords: ['test', 'flag'],
    spriteUrl: 'https://cdn.jsdelivr.net/npm/[email protected]/img/twitter/sheets-256/64.png',
    sheet_x: 1,
    sheet_y: 1,
    size: 64,
    sheetColumns: 61,
    sheetRows: 60,
  },
];

<emoji-mart [custom]="customEmojis"></emoji-mart>

无头搜索

这个 Picker 您不必利用高级搜索结果.

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

class ex {
  constructor(private emojiSearch: EmojiSearch) {
    this.emojiSearch.search('christmas').map(o => o.native);
    // => [🎄, 🎅🏼, 🔔, 🎁, ⛄️, ❄️]
  }
}

将 emoji 显示为自定义元素

// $event is from (emojiClick)
const styles = this.emoji.emojiSpriteStyles($event.emoji.sheet, 'twitter'); // pass emoji sheet
const el = document.createElement('div');
Object.assign(el.style, styles); // apply styles to new element
document.body.appendChild(el);

存储

默认情况下, EmojiMart 将存储用户所选择的皮肤和经常使用的 emojis localStorage。 。 。 .

可能的密钥有:

特征

强大的搜索

简称、名称和关键词

不仅如此 爱莫吉·马特 与大多数爱莫吉人相比.

表情

唯一一个在寻找表情时返回emojis的爱莫吉采取器.

完全自定义

锁定颜色、标题和默认的 emoji

Emojis 大小和长度

默认外观颜色

作为开发者,您可以控制默认使用哪个外观颜色.

然而,根据用户的偏好,它可以被覆盖.

支持的多组

苹果/谷歌/推特/脸书

GitHub 图像 @scttcper (英语)  • 妇女  微博 @scttcper (英语)