ホーム>プログラミング関連>その他のソースコード
ダウンロード

絵文字マートはカスタマイズ可能です
Web用の絵文字ピッカーHTMLコンポーネント
デモ

絵文字

Missive |チームメール、チームチャット、チームタスク、1つのアプリ
ミシブチームからあなたに連れてこられます

目次

  • データ

  • ピッカー

  • 絵文字コンポーネント

  • ヘッドレス検索

  • ネイティブから絵文字データを取得します

  • 国際化

  • 例

  • 最新のブラウザ向けに構築されています

  • 発達

データ

ピッカーが作業するために必要なデータは、ライブラリから完全に分離されています。これにより、開発者はアプリのバンドルサイズをより適切に制御し、このデータがどのように、いつロードされるかを選択できるようになります。データは次のとおりです。

コードベースに直接バンドルされます

  • 長所：ピッカーは即座にレンダリングし、データはオフラインで利用できます

  • 短所：初期ページの読み込みが遅い（ロードするファイルが大きい）

 YARN ADD @emoji-mart/data
 '@emoji-mart/data'import {picker}から' emoji-mart'new picker（{data}）からデータをインポートする

リモートで取得しました

  • 長所：必要なときにのみデータが取得され、アプリのバンドルサイズに影響しません

  • 短所：ネットワークの遅延は、オフラインで動作しません（サービスワーカーを構成しない限り）

 'emoji-mart'new Pickerから{Picker}をインポート（{{
  データ：async（）=> {const response = await fetch（ 'https://cdn.jsdelivr.net/npm/@emoji-mart/data',) Return Response.json（）
  }}）

この例では、データはコンテンツ配信ネットワークから取得されますが、データをホストする場合は、独自のドメインからフェッチすることもできます。

ピッカー

反応します

npmインストール -  aave emoji-mart @emoji-mart/data @emoji-mart/React
 '@emoji-mart/data'importピッカーからのデータを'@emoji-mart/React'function app（）{
  return（<picker data = {data} onemojiselect = {console.log} />
  ）}

ブラウザ

<スクリプトsrc = "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"> </script> <script>
  const pickeroptions = {onemojiselect：console.log}
  const picker = new emojimart.picker（pickeroptions）

  document.body.appendChild（ピッカー）</script>

オプション /小道具

オプションデフォルト選択肢説明
データ{}
ピッカーに使用するデータ
i18n {}
ピッカーに使用するローカリゼーションデータ
カテゴリ[] frequent 、 people 、 nature 、 foods 、 activity 、 places 、 objects 、 symbols 、 flagsピッカーに表示するカテゴリ。注文は尊重されます。
カスタム[]
カスタム絵文字
onemojiselect null
絵文字が選択されたときのコールバック
オンクリックアウトサイドnull
ピッカーの外側をクリックすると、コールバックが発生します
onaddcustomemoji null
 Callback add custom emojiボタンがクリックされたとき。ボタンは、このコールバックが提供されている場合にのみ表示されます。検索が結果を返さないときに表示されます。
オートフォーカスfalse
ピッカーが検索入力に自動的に集中する必要があるかどうか
カテゴリイコン{}
カスタムカテゴリアイコン
動的幅false
ピッカーが<em-emoji-picker>の幅に基づいて動的にperLine計算する必要があるかどうか。有効になると、 perLineは無視されます
emojibuttoncolors [] IE #f00 、 pink 、 rgba(155,223,88,.7)ホバーの背景色に影響する色の配列
絵文字100%すなわち6px 、 1em 、 100%絵文字ボタンの半径
emojibuttonsize 36
絵文字ボタンのサイズ
emojisize 24
絵文字のサイズ（ボタンの内側）
絵文字14 1 2 3 4 5 11 12 12.1 13 13.1 14使用する絵文字データのバージョン。 @emoji-mart/dataでサポートされている最新バージョンは現在14です
emojisを除く[]
ピッカーから除外される絵文字IDのリスト
アイコンauto auto 、 outline 、 solidピッカーに使用するアイコンのタイプ。明るいテーマでoutline 、暗いテーマのsolid 。
ロケールen en 、 ar 、 be 、 cs 、 de 、 es 、 fa 、 fi 、 fr zh hi 、 it 、 ja 、 ko 、 nl 、 pl 、 ru 、 sa 、 tr 、 uk 、 vi 、 ptピッカーに使用するロケール
maxfrequentrows 4
表示する頻繁な行の最大数。 0頻繁なカテゴリを無効にします
ナビジションtop top 、 bottom 、 noneナビゲーションバーの位置
nocountryflags false
国の旗を表示するかどうか。提供されていない場合、TBHISは自動的に処理されます（Windowsはカントリーフラグをサポートしていません）
noresultsemoji cry
 NO結果の絵文字に使用する絵文字のID
Perline 9
 1行あたり表示する絵文字の数
Previewemoji point_up
絵文字をホバリングしないときにプレビューに使用する絵文字のID。 point_upプレビュー位置が下部、プレビューの位置が上部の場合はpoint_down場合。
プレビューポジションbottom top 、 bottom 、 noneプレビューの位置
SearchPosition sticky sticky 、 static 、 none検索入力の位置
セットnative native 、 apple 、 facebook 、 google 、 twitterピッカーに使用する絵文字のセット。 native最もパフォーマンスが高いため、他の人はスプライトシートに依存しています。
肌1 1 2 3 4 5 6絵文字の肌のトーン
スキントンポジションpreview preview 、 search 、 noneスキントーンセレクターの位置
テーマauto auto 、 light 、 darkピッカーの色のテーマ
GetSpritesheeturl null
ピッカーに使用するスプライトシートのURLを返す関数。提供されたデータと互換性があるはずです。

カスタム絵文字

一連のカテゴリとその絵文字を提供することで、カスタム絵文字を使用できます。絵文字は複数の皮膚トーンをサポートし、GIFまたはSVGにすることもできます。

 '@emoji-mart/data'import Pickerからのデータを'@emoji-mart/React'const custom = [[
  {id： 'github'、name： 'github'、emojis：[{id： 'octocat'、name： 'octocat'、keywords：['github']、skins：[{src： './octocat.png' ' }、}、{id： 'shipit'、name： 'lirrel'、keywords：['github']、skins：[{src： './shipit-1.png'}、{src： './shipit -2.png '}、{src：' ./shipit-3.png '}、{src：' ./shipit-4.png '}、{src：' ./shipit-5.png '}、{ src： './shipit-6.png'}、]、}、]、
  }、
  {id： 'gifs'、name： 'gifs'、emojis：[{id： 'party_parrot'、name： 'party parrot'、keywords：['dance'、 'dancing']、skins：[{src： '。 /party_parrot.gif '}]、}、]、
  }、] function app（）{
  return（<picker data = {data} custom = {custom} />
  ）}

カスタムカテゴリアイコン

カテゴリ名をキーとして、アイコンを値としてオブジェクトに提供することにより、カスタムカテゴリアイコンを使用できます。現在サポートされている形式は、 svg文字列とsrcです。例を参照してください。

 const customcategoryicons = {
  categoryicons：{activity：{svg： '<svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 640 512"> <path d = "M57.89 397.2C-6.262- 8.616-16.02-13.19-25.92-13.19C-23.33 0-31.98 20.68-31.98 32.03C0 6.522 1.987 13.1 6.115 18.78L46.52 64C58.89 507.4 68.64 .03C0-6.522-1.988 -13.1-6.115-18.78L57.89 397.2ZM496.1 352C-44.13 0-79.72 -27.34-12.72 -39.2L-23.63-32.5C-13.44-18.5-33.77-27.68-54.12-27.68C-13.89 0-27.79 4.281-39.51 12.8L307.8 159.7C262.2 192.8 220.4 230.9 183.4C-27.27.27.27-59.18-59. 103.5 99.63L56.34 77.52C53.79-35.39 99.15-55.3 127.1-67.27C51.88-22 101.3-49.87 146.9-82.1L202.3-146.7C630.5 140.4 、}、人：{src： './people.png'、}、
  }、}

絵文字コンポーネント

絵文字のWebコンポーネントの使用は、どのライブラリを使用しても同じです。

まず、データが初期化されていることを確認する必要があります。これをページロードごとに1回だけ呼び出す必要があります。このようにinit呼び出す場合、ピッカーの小道具に必ずしもデータを含める必要はないことに注意してください。それも傷つかない、それはヌープします。

 '@emoji-mart/data'import {init}から' emoji-mart'init（{data}）からデータをインポートする

次に、HTML / JSXで絵文字コンポーネントを使用できます。

 <em-emoji id = "+1" size = "2em"> </em-emoji> <em-emoji id = "+1" skin = "2"> </em-emoji> <em-emojiショートコード= "：+1 :: Skin-Tone-1："> </em-emoji> <em-emojiショートコード= "：+1 :: Skin-Tone-2："> </em-Emoji>

属性 /小道具

属性例説明
id +1絵文字ID
ショートコード:+1::skin-tone-2:絵文字ショートコード
ネイティブ?ネイティブの絵文字
サイズ2emインライン要素サイズ
後退する:shrug:絵文字が見つからない場合にレンダリングされる文字列
セットnative絵文字セット： native 、 apple 、 facebook 、 google 、 twitter
肌1 4 3肌2 6 5 1

ヘッドレス検索

ピッカーなしで検索できます。絵文字コンポーネントと同様に、検索インデックスを使用するには、 data最初に初期化する必要があります。

 '@emoji-mart/data'import {init、searchindex}からのデータを' emoji-mart'init（{data}）async function search（value）{
  const emojis = await searchindex.search（value）
  const results = emojis.map（（emoji）=> {return emoji.skins [0] .native
  }）

  console.log（results）} search（ 'christmas'）// => ['？' '??'、 '？‍？'、 '？'？ '、'？ ❄️ '、'？ '、'⛄ ']

ネイティブから絵文字データを取得します

ネイティブの絵文字から絵文字データを取得できます。これは、ネイティブの絵文字から絵文字IDを取得したい場合に便利です。絵文字コンポーネントと同様に、絵文字データを取得するには、最初にdata初期化する必要があります。

 '@emoji-mart/data'import {init、getemojidatafromnative}から' emoji-mart'init（{data}）getemojidatafromnative（ '??'）からデータをインポートします。 hand_with_index_and_middle_fingers_crossed ']、id：' crossed_fingers '、keywords：[' hand '、' with '、' index '、' and '、' middle '、' good '、' lucky ']、「Crossed Fingers」、ネイティブ： '??'、ショートコード： '：Crossed_fingers :: Skin-Tone-6：'、Skin：6、Unified： '1F91E-1F3ff'、} */

国際化

emojimart UIは複数の言語をサポートしています。あなたが足りない場合は、PRを自由に開くことができます。

 i18nから'@emoji-mart/data/i18n/fr.json'i18n.search_no_results_1 = 'aucun emoji'new picker（{i18n}）からインポート

ファイルサイズが小さいことを考えると、英語は組み込まれており、提供する必要はありません。

例

  • カテゴリ

  • カスタム絵文字フォント

  • カスタムスタイル

  • 絵文字コンポーネント

  • ヘッドレス検索

  • スラック色

最新のブラウザ向けに構築されています

emojimartはこれらのAPIに依存しています。古いブラウザーをサポートする必要がある場合は、ポリフィルを含める必要がある場合があります。

  • シャドウドム（MDN）

  • カスタム要素（MDN）

  • 交差点装置（MDN）

  • async/await（mdn）

発達

糸インストール
糸dev
拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて