Skip to content

Commit

Permalink
Update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
serebrov committed Jun 10, 2023
1 parent 440231b commit 1bb58b9
Showing 1 changed file with 50 additions and 0 deletions.
50 changes: 50 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -194,12 +194,62 @@ Note: CSS also includes background images for image-based emoji sets (apple, goo
| **pickerStyles** | | | Inline styles applied to the root element. Useful for positioning |
| **title** | | `Emoji Mart™` | The title shown when no emojis are hovered |
| **infiniteScroll** | | `true` | Scroll continuously through the categories |
| **selectable** | | `false` | Display "Selected" category with emoji passed as 'emoji', see "Selectable picker" section |

| Event | Description |
| --------------- | ----------------------- |
| **select** | Params: `(emoji) => {}` |
| **skin-change** | Params: `(skin) => {}` |

#### Selectable picker

Selectable picker added in #253 and allows using `Picker` component as a selector to select and unselect a single emoji.

Here is an example:

```javascript
<template>
<div>
<emoji v-if="selectedEmoji" :data="index" :emoji="selectedEmoji" :size="32" />
<picker
:data="index"
:emoji="selectedEmoji"
:selectable="true"
@select="selectableSelectEmoji"
@unselect="selectableUnselectEmoji"
/>
</div>
</template>

<script>
import data from 'emoji-mart-vue-fast/data/all.json'
import 'emoji-mart-vue-fast/css/emoji-mart.css'
import { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'

export default {
data() {
return {
index: new EmojiIndex(data),
emoji: 'point_up',
selectedEmoji: undefined,
}
},
methods: {
selectableSelectEmoji(emoji) {
this.selectedEmoji = emoji
},
selectableUnselectEmoji(emoji) {
this.selectedEmoji = undefined
},
},
components: {
Picker,
Emoji,
},
}
</script>
```

#### Picker Usage And Native Emoji vs Images

The `select` event described above can be handled to insert the emoji into the text area or use it in any other way.
Expand Down

0 comments on commit 1bb58b9

Please sign in to comment.