emoji mart
v5.6.0
이모티콘 마트는 사용자 정의 할 수 있습니다
웹의 이모티콘 html 구성 요소
데모 
Missive 팀이 당신에게 가져 왔습니다
데이터
소매치기
이모티콘 구성 요소
헤드리스 검색
네이티브로부터 이모티콘 데이터를 얻습니다
국제화
예
현대식 브라우저를 위해 제작되었습니다
개발
피커가 작동하는 데 필요한 데이터는 라이브러리에서 완전히 분리되었습니다. 이를 통해 개발자는 앱 번들 크기를 더 잘 제어 할 수있는 유연성을 제공 하고이 데이터가 어떻게 그리고 언제로드되는지 선택할 수 있습니다. 데이터는 다음과 같습니다.
장점 : 피커 렌더링은 즉시 렌더링되며 데이터는 오프라인으로 사용할 수 있습니다
단점 : 초기 페이지로드 느린 (로드 할 큰 파일)
원사 add @emoji-mart/data
'@emoji-mart/dataimport {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 설치--save emoji-mart @emoji-mart/data @emoji-mart/react
'@emoji-mart/data import picker'@emoji-mart/react'function app () {에서 '@emoji-mart/dataimport picker에서 데이터 가져 오기
return (<picker data = {data} onemojiselect = {console.log} />
)} <script src = "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"> </script> <cript>
const pickeroptions = {onemojiselect : console.log}
Const Picker = New Emojimart.picker (Pickeroptions)
Document.body.appendChild (Picker) </script>| 옵션 | 기본 | 선택 | 설명 |
|---|---|---|---|
| 데이터 | {} | 피커에 사용할 데이터 | |
| i18n | {} | 피커에 사용할 현지화 데이터 | |
| 카테고리 | [] | frequent , people , nature , foods , activity , places , objects , symbols , flags | 피커에 표시 할 카테고리. 주문이 존중됩니다. |
| 관습 | [] | 맞춤형 이모티콘 | |
| OneMojiselect | null | 콜백 이모티콘이 선택되었을 때 | |
| onclickoutside | null | 콜백 피커 외부의 클릭이 발생하면 콜백 | |
| onaddcustomemoji | null | 콜백 사용자 정의 이모티콘 버튼을 클릭하면 콜백. 버튼은이 콜백이 제공된 경우에만 표시됩니다. 검색에서 결과가 없으면 표시됩니다. | |
| 자동 초점 | false | 피커가 검색 입력에 자동으로 집중 해야하는지 여부 | |
| 카테고리콘 | {} | 사용자 정의 카테고리 아이콘 | |
| Dynamicwidth | false | 피커가 <em-emoji-picker> 의 너비를 기반으로 perLine 동적으로 계산 해야하는지 여부. 활성화되면 perLine 무시됩니다 | |
| 이모 지부 콜러 | [] | IE #f00 , pink , rgba(155,223,88,.7) | 호버 배경에 영향을 미치는 색상 배열 |
| 이모 지부 톤 라디우스 | 100% | IE 6px , 1em , 100% | 이모티콘 버튼의 반경 |
| emojibittonsize | 36 | 이모티콘 버튼의 크기 | |
| 이모 젠즈 | 24 | 이모티콘의 크기 (버튼 내부) | |
| 이모리언 | 14 | 1 , 2 , 3 , 4 , 4, 5 , 11 , 12 , 12.1 , 13 , 13.1 , 14 | 사용할 이모티콘 데이터의 버전. @emoji-mart/data 에서 지원되는 최신 버전은 현재 14입니다 |
| 제외하고 | [] | 피커에서 제외 될 이모티콘 ID 목록 | |
| 아이콘 | auto | auto , outline , solid | 피커에 사용할 아이콘 유형. 가벼운 테마로 outline 하고 어두운 테마로 solid . |
| 장소 | en | en , ar , be , cs , de , es , fa , fi , fr , hi , it , ja , ko , nl , pl , pt , ru , sa , tr , uk , vi , zh | 피커에 사용할 로케일 |
| Maxfrequentrows | 4 | 보여줄 최대 행의 최대 수. 0 빈번한 카테고리를 비활성화합니다 | |
| 탐색 | top | top , bottom , none | 내비게이션 바의 위치 |
| 노카 컨트리 플래그 | false | 국가 깃발을 보여줄지 여부. 제공되지 않으면 TBHIS가 자동으로 처리됩니다 (Windows는 국가 플래그를 지원하지 않습니다) | |
| Noresultsemoji | cry | 결과 No 결과에 사용할 이모티콘의 ID 이모티콘 | |
| PERLINE | 9 | 라인 당 표시 할 이모티콘 수 | |
| Previewemoji | point_up | 이모티콘을 호버하지 않을 때 미리보기에 사용할 이모티콘의 ID. point_up 미리보기 위치가 하단이고 point_down 있을 때 미리보기 위치 인 경우 Point_down. | |
| 미리보기 | bottom | top , bottom , none | 미리보기의 위치 |
| 검색 | sticky | sticky static , none | 검색 입력의 위치 |
| 세트 | native | native , apple , facebook , google , twitter | 피커에 사용할 이모티콘 세트. native 가장 성능이 뛰어나고 다른 사람들은 Spritesheets에 의존합니다. |
| 피부 | 1 | 1 , 2 , 3 , 4 , 5 , 6 | 이모티콘 피부 톤 |
| SkintonePosition | preview | preview , search , none | 피부 톤 선택기의 위치 |
| 주제 | auto | auto , light dark | 피커의 색상 테마 |
| GetSpritesheetUrl | null | Spritesheet의 URL을 피커에 사용하도록 반환하는 함수. 제공된 데이터와 호환되어야합니다. |
다양한 카테고리와 그 이모티콘을 제공하여 사용자 정의 이모티콘을 사용할 수 있습니다. 이모티콘은 또한 여러 개의 피부 색조를 지원하며 GIF 또는 SVG 일 수 있습니다.
'@emoji-mart/data'import picker '@emoji-mart/react'const custom = [에서 데이터 가져 오기
{id : 'github', name : 'github', emojis : [{id : 'octocat', 이름 : '옥토 카트', 키워드 : [ 'github'], 스킨 : [{src : './octocat.png' }],}, {id : 'shipit', name : 'squirrel', 키워드 : [ 'github'], 스킨 : [{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', 이름 : 'party parrot', 키워드 : [ 'dance', 'dancing'], 스킨 : [{src : '. /party_parrot.gif '}],},],
},] function app () {
return (<picker data = {data} custom = {custom} />
)} 카테고리 이름의 객체를 키로, 아이콘을 값으로 제공하여 사용자 정의 범주 아이콘을 사용할 수 있습니다. 현재 지원되는 형식은 svg 문자열 및 src 입니다. 예를 참조하십시오.
const customcategoryicons = {
CategoryIcons : {활동 : {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 13.1 6.115 18.78L46.52 64C58.89 507.4 68.64 512.612.29.90 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 80S75.75 79.91-80S540.2 496.1 352ZM640-0 .34-12.72 -39.2L-23.63-32.5C-13.44-18.5-33.77.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.424.22 27.88-18 63.999. 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.4640 120 640 99.38Z "/>>>>>>>>>>> 0.38Z. ,}, 사람 : {src : './people.png',},
},}이모티콘 웹 구성 요소 사용은 어떤 라이브러리를 사용하든 동일합니다.
먼저 데이터가 초기화되었는지 확인해야합니다. 페이지로드 당 한 번만 호출해야합니다. 이와 같이 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 :: 스킨 톤 -1 :"> </em-emoji> <em-emoji shortcodes = ":+1 :: 스킨 톤 -2 :"> </em-emoji>
| 기인하다 | 예 | 설명 |
|---|---|---|
| ID | +1 | 이모티콘 ID |
| 단축 코드 | :+1::skin-tone-2: | 이모 지 단축 코드 |
| 토종의 | ? | 네이티브 이모티콘 |
| 크기 | 2em | 인라인 요소 크기 |
| 폴백 | :shrug: | 이모티콘을 찾을 수없는 경우 렌더링 할 문자열 |
| 세트 | native | 이모티콘 세트 : native , apple , facebook , google , twitter |
| 피부 | 1 | 이모티콘 스킨 톤 : 1 , 2 , 3 , 4 , 5 , 6 |
피커없이 검색 할 수 있습니다. 이모티콘 구성 요소와 마찬가지로 검색 인덱스를 사용하려면 먼저 data 초기화해야합니다.
'@emoji-mart/dataimport {init, searchIndex}'emoji-mart'Init ({data}) Async 함수 검색 (value)에서 '@emoji-mart/data'import {에서 데이터를 가져옵니다.
const emojis = searchIndex.search (값)
const results = emojis.map ((이모 지) => {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 ', 키워드 : ['핸드 ','with ','index ',', 'middle', 'good', 'guily'], 이름 : 'Crossed Fingers', Native : '??', Shortcodes : ': Crossed_fingers :: Skin-Tone-6 :', Skin : 6, Unified : '1f91e-1f3ff',} */Emojimart UI는 여러 언어를 지원하고 누락 된 경우 PR을 열어주십시오.
'@emoji-mart/data/i18n/fr.json'i18n.search_no_results_1 ='aucun emoji'new picker ({i18n})작은 파일 크기가 주어지면 영어가 내장되어 있으며 제공 할 필요가 없습니다.
카테고리
맞춤형 이모티콘 글꼴
맞춤형 스타일
이모티콘 구성 요소
헤드리스 검색
느슨한 색상
Emojimart는 이러한 API에 의존합니다. 이전 브라우저를 지원 해야하는 경우 폴리 플릴을 포함시켜야 할 수도 있습니다.
섀도우 돔 (MDN)
사용자 정의 요소 (MDN)
IntersectionObserver (MDN)
비동기/대기 (MDN)
원사 설치 원사 개발자
