@nextcloud/vueNcEmojiPicker
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| activeSet | The emoji-set | string | - | 'native' |
| showPreview | Show preview section when hovering emoji | boolean | - | false |
| previewFallbackEmoji | The fallback emoji in the preview section | string | - | 'grinning' |
| previewFallbackTitle | The fallback text in the preview section | string | - | t('Pick an emoji') |
| closeOnSelect | Whether to close the emoji picker after picking one | boolean | - | true |
| container | Selector for the popover container | string|object|Element|boolean | - | 'body' |
Events
| Event name | Properties | Description |
|---|---|---|
| select | Emits a string containing the emoji e.g. '👩🏿💻' | |
| select-data | Emits a object with more data about the picked emoji |
Slots
| Name | Description | Bindings |
|---|---|---|
| default |
General description
This component allows the user to pick an emoji.
Usage
- Listen to the select event and pass in an HTML element that will be treated as a trigger:
vue
<template>
<div>
<NcEmojiPicker @select="select" style="display: inline-block">
<NcButton> Click Me </NcButton>
</NcEmojiPicker>
<span>selected emoji: {{ emoji }}</span>
</div>
</template>
<script>
export default {
data() {
return {
emoji: ""
};
},
methods: {
select(emoji) {
this.emoji = emoji;
}
}
};
</script>
- Showing a preview and keeping it open after a user selected an emoji
vue
<template>
<div>
<NcEmojiPicker
:close-on-select="false"
:show-preview="true"
@select="select"
style="display: inline-block"
>
<NcButton> Click Me </NcButton>
</NcEmojiPicker>
<span>selected emoji: {{ emoji }}</span>
</div>
</template>
<script>
export default {
data() {
return {
emoji: ""
};
},
methods: {
select(emoji) {
this.emoji = emoji;
}
}
};
</script>