Startseite>Programmierbezogen>Anderer Quellcode
Herunterladen

Emoji Mart ist ein anpassbarer
Emoji Picker HTML -Komponente für das Web
Demo

Emojimart

Missive | Team -E -Mail, Team -Chat, Teamaufgaben, eine App
Vom Maklerteam zu Ihnen gebracht

Inhaltsverzeichnis

  • Daten

  • Picker

  • Emoji -Komponente

  • Kopflose Suche

  • Holen Sie sich Emoji -Daten von Native

  • Internationalisierung

  • Beispiele

  • Für moderne Browser gebaut

  • Entwicklung

Daten

Daten, die für die Arbeit der Auswahl erforderlich sind, wurden vollständig aus der Bibliothek entkoppelt. Dies gibt den Entwicklern die Flexibilität, ihre App -Bündelgröße besser zu steuern und sie auswählen zu können, wie und wann diese Daten geladen werden. Daten können sein:

Direkt in Ihre Codebasis gebündelt

  • Vorteile: Picker rendert sofort, Daten sind offline verfügbar

  • Nachteile: Langsamer initiale Seitenlade (größere Datei zum Laden)

 Garn fügen Sie @emoji-mart/data hinzu
 Daten von '@emoji-mart/data'import {picker} aus' emoji-mart'new picker ({data}) importieren

Aus der Ferne abgerufen

  • PROS: Daten nur bei Bedarf eingerufen, wirken sich nicht auf Ihre App -Bündelgröße aus

  • Nachteile: Netzwerklatenz, funktioniert nicht offline (es sei denn, Sie konfigurieren einen Servicearbeiter)

 importieren {picker} aus 'emoji-mart'new picker ({{{{{{
  Daten: async () => {const response = warte fetch ('https://cdn.jsdelivr.net/npm/@emoji-mart/data',)return response.json ()
  }})

In diesem Beispiel werden die Daten aus einem Inhaltsdeliefer -Netzwerk abgeholt, könnte aber auch aus Ihrer eigenen Domain abgerufen werden, wenn Sie die Daten hosten möchten.

Picker

Reagieren

 npm install-Save emoji-mart @emoji-mart/data @emoji-mart/react
 Importieren Sie Daten aus '@emoji-mart/data'import picker aus'@emoji-mart/react'function App () {{
  return (<picker data = {data} onemojiselect = {console.log} />
  )}

Browser

 <script 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 (picker) </script>

Optionen / Requisiten

Option Standard Auswahl Beschreibung
Daten {}
 Daten, die für den Picker verwendet werden müssen
i18n {}
 Lokalisierungsdaten, die für den Picker verwendet werden sollen
Kategorien [] frequent , people , nature , foods , activity , places , objects , symbols , flags Kategorien, die im Picker angezeigt werden sollen. Ordnung wird respektiert.
Brauch []
 Benutzerdefinierte Emojis
Onemojiselect null
 Rückruf, wenn ein Emoji ausgewählt wird
ONCLICKOUTSIDE null
 Rückruf, wenn ein Klick außerhalb der Auswahl stattfindet
Onaddcustomemoji null
 Rückruf, wenn die Schaltfläche benutzerdefinierte Emoji -Schaltfläche hinzufügen wird. Die Schaltfläche wird nur angezeigt, wenn dieser Rückruf bereitgestellt wird. Es wird angezeigt, wenn die Suche keine Ergebnisse zurückgibt.
Autofokus false
 Ob der Auswahler sich automatisch auf die Sucheingabe konzentrieren sollte
Kategorie {}
 Benutzerdefinierte Kategoriensymbole
Dynamikbreite false
 Ob der Auswahler perLine dynamisch basierend auf der Breite von <em-emoji-picker> berechnen sollte. Wenn es aktiviert ist, wird perLine ignoriert
EmojibuttonColors [] dh #f00 , pink , rgba(155,223,88,.7) Eine Farbpalette, die die schwebende Hintergrundfarbe beeinflusst
Emojibuttonradius 100% dh 6px , 1em , 100% Der Radius der Emoji -Tasten
Emojibuttonsize 36
 Die Größe der Emoji -Tasten
emojisize 24
 Die Größe der Emojis (innerhalb der Tasten)
Emojiversion 14 1 , 2 , 3 , 4 , 5 , 11 , 12 , 12.1 , 13 , 13.1 , 14 Die Version der zu verwendenden Emoji -Daten. Die neueste Version, die in @emoji-mart/data unterstützt wird, ist derzeit 14
außerememojis []
 Liste der Emoji -IDs, die vom Picker ausgeschlossen werden
Ikonen auto auto , outline , solid Die Art der Symbole, die für den Picker verwendet werden soll. outline mit hellem Thema und solid mit dunklem Thema.
Gebietsschema en en , ar , be , cs , de , es , fa , fi , fr , hi , it , ja , ko , uk , PL zh Pt, ru , sa , tr pl pt , vi , nl Das Gebietsschema für den Picker zu verwenden
MaxFrequentrows 4
 Die maximale Anzahl häufiger Zeilen zu zeigen. 0 deaktiviert die häufige Kategorie
Navigation top top , bottom , none Die Position der Navigationsleiste
NocountryFlags false
 Ob Sie Landflags zeigen oder nicht. Wenn dies nicht zur Verfügung steht, wird TBHIS automatisch behandelt (Windows unterstützt keine Flaggen des Landes).
Noresultsemoji cry
 Die ID des Emoji für das Emoji No -Ergebnisse verwendet
Perline 9
 Die Anzahl der Emojis, die pro Zeile angezeigt werden,
Previewemoji point_up
 Die ID des Emoji, die für die Vorschau verwendet werden muss, wenn sie kein Emoji schweben. point_up Wenn die Vorschau -Position unten und point_down ist, wenn die Vorschau -Position oben ist.
Vorschau bottom top , bottom , none Die Position der Vorschau
Suchposition sticky sticky , static , none Die Position der Sucheingabe
Satz native native , apple , facebook , google , twitter Die Emojis -Menge für den Picker verwendet. native ist der leistungsstärkste, andere verlassen sich auf Spriteshets.
Haut 1 1 , 2 , 3 , 4 , 5 , 6 Der Emojis -Hautton
SKINTONEPosition preview preview , search , none Die Position des Hautton -Selektors
Thema auto auto , light , dark Das Farbthema des Auswahler
GetPritesheeturl null
 Eine Funktion, die die URL des Spritesheets für die Auswahl zurückgibt. Es sollte mit den bereitgestellten Daten kompatibel sein.

Benutzerdefinierte Emojis

Sie können benutzerdefinierte Emojis verwenden, indem Sie eine Reihe von Kategorien und deren Emojis bereitstellen. Emojis unterstützen auch mehrere Hauttöne und können GIFs oder SVGs sein.

 Importieren Sie Daten aus '@emoji-mart/data'import picker aus'@emoji-mart/react'const custom = [
  {id: 'github', name: 'github', emojis: [{id: 'octocat', name: 'octocat', keywords: ['github'], Skins: [{src: './octocat.png' }],}, {id: 'Shipit', Name: 'Squirrel', 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 paper', keywords: ['tanz', 'tanzen'], Skins: [{src: '. /Party_parrot.gif '}],},],
  },] function app () {
  return (<picker data = {data} custom = {custom} />
  )}

Benutzerdefinierte Kategoriensymbole

Sie können benutzerdefinierte Kategorie -Symbole verwenden, indem Sie einem Objekt den Kategoriennamen als Schlüssel und das Symbol als Wert bereitstellen. Derzeit unterstützte Formate sind svg -String und src . Siehe Beispiel.

 const CustomCategoryicons = {
  Categoryicons: {Aktivität: {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 512 78.555 512C230.97-20.97-20.97-20.97-20.97-20.97-20.97-20.97-20.97-20.97-20.97-20.97-20.97-20.97-20.97-20.97-20.97-22 3c0-6.522-1.988 -13.1-6.115-18.78L57.89 397.2zM496.1 352c-44.13 0-79.72 35.75-79.72 80s35.59 80 79.72 80s79.91-35.75 79.91-80S540.2 352 496.1 352zM640 99.38c0-13.61-4.133-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.4 273.4c-24.22 27.88-59.18 63.99- 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 640 120 640 99.38z "/> VGG ,}, people: {src: './people.png',},
  },}

Emoji -Komponente

Die Verwendung von Emoji -Webkomponenten ist dieselbe, unabhängig davon, welche Bibliothek Sie verwenden.

Zunächst müssen Sie sicherstellen, dass die Daten initialisiert wurden. Sie müssen dies nur einmal pro Seite laden. Beachten Sie, dass Sie nicht unbedingt Daten in Ihre Picker -Requisiten aufnehmen müssen, wenn Sie init so anrufen. Es tut auch nicht weh, es wird noop.

 Daten aus '@emoji-mart/data'import {init} aus' emoji-mart'init ({data}) importieren

Dann können Sie die Emoji -Komponente in Ihrem HTML / JSX verwenden.

 <em-emoji id = "+1" size = "2em"> </em-emoji> <em-emoji id = "+1" Skin = "2"> </em-emoji> <em-emoji Shortcodes = ": +1 :: Skin-tone-1:"> </em-emoji> <em-emoji mortcodes = ":+1 :: Skin-Tone-2:"> </em-emoji>

Attribute / Requisiten

Attribut Beispiel Beschreibung
Ausweis +1 Eine Emoji -Id
Shortcodes :+1::skin-tone-2: Ein Emoji -Shortcode
einheimisch ? Ein einheimischer Emoji
Größe 2em Die Inline -Elementgröße
zurückgreifen :shrug: Eine String, die gerendert werden soll, falls das Emoji nicht gefunden werden kann
Satz native Das Emoji -Set: native , apple , facebook , google , twitter
Haut 1 Der Emoji -Hautton: 1 , 2 , 3 , 4 , 5 , 6

Kopflose Suche

Sie können ohne die Auswahl suchen. Genau wie die Emoji -Komponente müssen data zuerst initialisiert werden, um den Suchindex zu verwenden.

 Daten aus '@emoji-mart/data'import {init, searchIndex} aus' emoji-mart'init ({data}) Async Funktionsuche (Wert) {importieren
  const emojis = warte suchIndex.search (Wert)
  const resultes = emojis.map ((emoji) => {return emoji.skins [0] .Native
  })

  Console.log (Ergebnisse)} Suche ('Weihnachten') // => ['?', '??', '? ‍?', '?', '?' ❄️ ','? ',' ⛄ ']

Holen Sie sich Emoji -Daten von Native

Sie können Emoji -Daten von einem nativen Emoji erhalten. Dies ist nützlich, wenn Sie die Emoji -ID von einem einheimischen Emoji erhalten möchten. Genau wie die Emoji -Komponente müssen zuerst data initialisiert werden, um die Emoji -Daten abzurufen.

 Importieren Sie Daten von '@emoji-mart/data'import {init, getemojidatafromnative} aus' emoji-mart'init ({data}) getemojidatafromnative ('??'). Dann (console.log)/* {aliases: [' Hand_with_index_and_middle_fingers_crossed '], id:' crossed_fingers ', Schlüsselwörter: [' Hand ',' mit ',' Index ', und', 'Middle', 'Good', 'Lucky'], Name: 'Crossed Fingers', Native : '??', Shortcodes: ': Crosed_fingers :: Skin-Tone-6:', Skin: 6, Unified: '1f91e-1f3ff',} */

Internationalisierung

Emojimart UI unterstützt mehrere Sprachen. Er öffnen Sie eine PR, wenn Ihre fehlt.

 Importieren Sie i18n aus

Angesichts der kleinen Dateigröße ist Englisch integriert und muss nicht bereitgestellt werden.

Beispiele

  • Kategorien

  • Benutzerdefinierte Emoji -Schrift

  • Benutzerdefinierte Stile

  • Emoji -Komponente

  • Kopflose Suche

  • Locke Farben

Für moderne Browser gebaut

Emojimart stützt sich auf diese APIs. Möglicherweise müssen Sie Polyfills einbeziehen, wenn Sie ältere Browser unterstützen müssen:

  • Shadow Dom (MDN)

  • Benutzerdefinierte Elemente (MDN)

  • IntersectionObserver (MDN)

  • Asynchron/wartet (MDN)

Entwicklung

 Garn installieren
Garn Dev
Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle