The emojione-selector's intro from puranjayjain

puranjayjain / emojione-selector Goto Github PK

View Code? Open in Web Editor NEW

A polymer element that works best as a emoji picker and is powered by the emojione library

License: MIT License

HTML 99.97% Batchfile 0.03%

emojione-selector's Introduction

<emojione-selector>

A polymer element that works best as a emoji picker and is powered by the emojione library

demo

https://puranjayjain.github.io/emojione-selector/

Key Features:

Supports unicode diversity update
Advanced search with multi keyword search
Features a real-life demo
Mobile first approach to a picker
Independent of any containers like a dialog or menu, user is free to use it in a container of their choosing

Example:

<iron-ajax url="messages.json" last-response="{{messages}}" auto></iron-ajax>

<iron-list id="messages" items="[[messages]]" as="item">
  <template>
    <div>
      <div class$="message [[item.side]]">
        <span inner-h-t-m-l="{{getMessage(item.message)}}"></span>
      </div>
    </div>
  </template>
</iron-list>
<iron-collapse opened="{{opened}}">
  <emojione-selector opened="{{opened}}" emoji="{{emoji}}"></emojione-selector>
</iron-collapse>
<div class="demo-bottom">
  <paper-icon-button id="emojiButton" icon="{{computeIfChatIcon(opened)}}" src="{{computeIfChatImg(opened)}}" title="emoji"></paper-icon-button>
  <paper-input label="Type something" value="{{message}}" no-label-float></paper-input>
  <paper-button id="send" raised>Send</paper-button>
</div>

Recommend Projects