หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด

องค์ประกอบโต้ตอบการแชท

โต้ตอบองค์ประกอบการแชท js

หมายเหตุ: แพ็คเกจนี้ไม่รองรับ react-native อีกต่อไป

เอกสารฉบับเต็ม , บันทึกการเปลี่ยนแปลง

ติดตั้ง 

 npm install react-chat-elements --save

นำเข้า 

 // RCE CSS
import 'react-chat-elements/dist/main.css'
// MessageBox component
import { MessageBox } from 'react-chat-elements'

ส่วนประกอบ

  1. รายการแชท
  2. กล่องข้อความ
  3. ข้อความของระบบ
  4. รายการข้อความ
  5. รายการสนทนา
  6. ป้อนข้อมูล
  7. ปุ่ม
  8. ป๊อปอัป
  9. แถบด้านข้าง
  10. แถบนำทาง
  11. ดรอปดาวน์
  12. อวตาร
  13. ข้อความตำแหน่ง
  14. Spotifyข้อความ
  15. รายการประชุม
  16. รายการประชุม
  17. การประชุมLink

ส่วนประกอบ ChatItem

Chatitem-ภาพถ่าย

 import { ChatItem } from 'react-chat-elements'
; < ChatItem
  avatar = { 'https://facebook.github.io/react/img/logo.svg' }
  alt = { 'Reactjs' }
  title = { 'Facebook' }
  subtitle = { 'What are you doing?' }
  date = { new Date ( ) }
  unread = { 0 }
/>

อุปกรณ์ประกอบฉาก ChatItem

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
อวตาร ไม่มี เชือก URL รูปภาพอวตารของ ChatItem
อวตารยืดหยุ่น เท็จ บูลีน รูปภาพประจำตัว ChatItem ที่ยืดหยุ่น
ทางเลือกอื่น ไม่มี เชือก ข้อความแสดงแทนรูปภาพอวตารของ ChatItem
ชื่อ ไม่มี เชือก ชื่อรายการแชท
คำบรรยาย ไม่มี เชือก คำบรรยาย ChatItem
วันที่ ไม่มี วันที่ วันที่รายการแชท
dateString ไม่มี เชือก ChatItem แสดงถึง dateString หรือ timeagojs (ตอนนี้, วันที่)
ยังไม่ได้อ่าน 0 ภายใน จำนวน ChatItem ที่ยังไม่ได้อ่าน
บนคลิก ไม่มี การทำงาน ChatItem เมื่อคลิก
บน ContextMenu ไม่มี การทำงาน ChatItem บนเมนูบริบท
สถานะสี ไม่มี สี สีสถานะ ChatItem
สถานะสีประเภท ป้ายสถานะ เชือก ประเภทสีสถานะ ChatItem (ล้อมรอบ, ป้าย)
ข้อความสถานะ ไม่มี สี ข้อความสถานะ ChatItem
ขี้เกียจโหลดรูปภาพ ไม่มี เส้นทางภาพ ขี้เกียจโหลดรูป
ปิดเสียง เท็จ บูล ข้อมูลปิดเสียงแชท
แสดงปิดเสียง เท็จ บูล การมองเห็นปุ่มปิดเสียงแชท
แสดงวิดีโอคอล เท็จ บูล การมองเห็นปุ่มสนทนาทางวิดีโอ
onClickMute ไม่มี การทำงาน ปุ่มปิดเสียง
onClickVideoCall ไม่มี การทำงาน ปุ่มแฮงเอาท์วิดีโอ

ส่วนประกอบกล่องข้อความ

ไฟล์ รูปถ่าย ข้อความ ที่ตั้ง วิดีโอ เสียง
ไฟล์ข้อความข้อความรูปภาพข้อความข้อความสถานที่
 import { MessageBox } from 'react-chat-elements'
; < MessageBox
  position = { 'left' }
  type = { 'photo' }
  text = { 'react.svg' }
  data = { {
    uri : 'https://facebook.github.io/react/img/logo.svg' ,
    status : {
      click : false ,
      loading : 0 ,
    } ,
  } }
/>

อุปกรณ์ประกอบฉากกล่องข้อความ

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
รหัส ฉัน (ดัชนี) เชือก รหัสกล่องข้อความ
ตำแหน่ง ซ้าย เชือก ตำแหน่งกล่องข้อความ
พิมพ์ ข้อความ เชือก ประเภทข้อความ (ข้อความ รูปภาพ ไฟล์ ตำแหน่ง Spotify วิดีโอ เสียง)
ข้อความ ไม่มี เชือก ข้อความ
ชื่อ ไม่มี เชือก ชื่อข้อความ
titleColor ไม่มี เชือก (สี) สีของชื่อข้อความ
ข้อมูล - วัตถุ ข้อมูลข้อความ
วันที่ วันที่ใหม่() วันที่ วันที่ข้อความ
dateString ไม่มี เชือก ข้อความแสดงถึง dateString หรือ timeagojs (ตอนนี้, วันที่)
บนคลิก ไม่มี การทำงาน ข้อความเมื่อคลิก (ข้อความ (วัตถุ) ถูกส่งกลับ)
บนเปิด ไม่มี การทำงาน ข้อความเมื่อเปิด (ไฟล์หรือรูปถ่าย) (ข้อความ (วัตถุ) ถูกส่งคืน)
ในการดาวน์โหลด ไม่มี การทำงาน ข้อความเมื่อดาวน์โหลด (ไฟล์หรือภาพถ่าย) (ข้อความ (วัตถุ) ถูกส่งคืน)
บนโหลด ไม่มี การทำงาน ข้อความในการโหลดรูปภาพ
บนPhotoError ไม่มี การทำงาน ข้อความบนภาพถ่ายข้อผิดพลาด
บนชื่อเรื่องคลิก ไม่มี การทำงาน ชื่อข้อความเมื่อคลิกเหตุการณ์
บนไปข้างหน้าคลิก ไม่มี การทำงาน ส่งต่อข้อความเมื่อคลิกเหตุการณ์
เมื่อตอบกลับคลิก ไม่มี การทำงาน ตอบกลับข้อความเมื่อคลิกกิจกรรม
บนข้อความการประชุมคลิก ไม่มี การทำงาน ข้อความการประชุมเมื่อคลิกเหตุการณ์
บนหัวข้อการประชุมคลิก ไม่มี การทำงาน ข้อความชื่อการประชุมเมื่อคลิกเหตุการณ์
บนMeetingVideoLinkคลิก ไม่มี การทำงาน ข้อความลิงค์วิดีโอการประชุมเมื่อคลิกเหตุการณ์
บนตอบกลับข้อความคลิก ไม่มี การทำงาน ตอบกลับข้อความเมื่อคลิกกิจกรรม
บนลบข้อความคลิก ไม่มี การทำงาน ข้อความลบเมื่อคลิกเหตุการณ์
ในการประชุมเพิ่มเติมเลือก ไม่มี การทำงาน รายการข้อความเหตุการณ์ onMeetingMoreSelect รับ 3 พารามิเตอร์: รายการข้อความ ดัชนีของรายการ เหตุการณ์
บนMeetingLinkคลิก ไม่มี การทำงาน ลิงค์การประชุมในหน้ากิจกรรมคลิก
บน ContextMenu ไม่มี การทำงาน เหตุการณ์การคลิกเมนูบริบทข้อความ
ส่งต่อ ไม่มี บูลีน ไอคอนส่งต่อข้อความ
ปุ่มตอบกลับ ไม่มี บูลีน ไอคอนตอบกลับข้อความ
ลบปุ่ม ไม่มี บูลีน ไอคอนลบข้อความ
สถานะ ไม่มี เชือก ข้อมูลสถานะข้อความ (กำลังรอ ส่ง รับ อ่าน)
บาก จริง บูลีน บากกล่องข้อความ
อวตาร ไม่มี URL URL อวตารของกล่องข้อความ
renderAddCmp ไม่มี ฟังก์ชั่น (ส่วนประกอบ) การเพิ่มส่วนประกอบที่กำหนดเองลงในกล่องข้อความ
วันที่คัดลอกได้ เท็จ บูลีน กล่องข้อความ ข้อความวันที่ คัดลอกได้
จุดสนใจ เท็จ บูลีน ใช้ในฟีเจอร์โฟกัสข้อความในคอมโพเนนต์ MessageList ทำให้สไตล์ของคอมโพเนนต์เน้น
onMessageFocused ไม่มี การทำงาน ทำให้ค่าโฟกัสเป็นเท็จหลังจากข้อความกลายเป็นโฟกัส
ตอบ ไม่มี วัตถุ ข้อมูลตอบกลับ
หดกลับ ไม่มี บูลีน ข้อความที่ถูกลบหรือเพิกถอน
ข้อความที่ส่งต่อ ส่งต่อแล้ว เชือก ข้อความที่ส่งต่อ

ส่วนประกอบข้อความตอบกลับ 

 import { MessageBox } from 'react-chat-elements'
; < MessageBox
  reply = { {
    photoURL : 'https://facebook.github.io/react/img/logo.svg' ,
    title : 'elit magna' ,
    titleColor : '#8717ae' ,
    message : 'Aliqua amet incididunt id nostrud' ,
  } }
  onReplyMessageClick = { ( ) => console . log ( 'reply clicked!' ) }
  position = { 'left' }
  type = { 'text' }
  text = { 'Tempor duis do voluptate enim duis velit veniam aute ullamco dolore duis irure.' }
/>

ตอบกลับข้อความ

คอมโพเนนต์ข้อความการประชุม 

 import { MeetingMessage } from 'react-chat-elements'

< MeetingMessage
    subject = { 'New Release' }
    title = { 'in ullamco' }
    date = { new Date ( ) }
    collapseTitle = { 'Commodo aliquip' }
    participants = { [
        {
            id : '1' ,
            title : 'Facebook' ,
        } ,
        .
        .
        .
    ] }
    dataSource = { [
        {
            id : '1' ,
            avatar : 'https://facebook.github.io/react/img/logo.svg' ,
            message : 'Lorem ipsum dolor sit amet.' ,
            title : 'Elit magna' ,
            avatarFlexible : true ,
            date : new Date ( ) ,
            event : { [
                title : 'Toplantı sona erdi!' ,
                avatars = { [
                    src : 'https://facebook.github.io/react/img/logo.svg'
                ] }
            ] }
            record : { [
                avatar : 'https://facebook.github.io/react/img/logo.svg' ,
                title : 'Arama' ,
                savedBy : 'Kaydeden: Elit magna' ,
                time : new Date ( ) ,
            ] }
        } ,
        .
        .
        .
    ] } / >

อุปกรณ์ประกอบฉากข้อความการประชุม

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
เรื่อง ไม่มี เชือก ข้อความการประชุม
ชื่อ ไม่มี เชือก ชื่อการประชุม
วันที่ วันที่ใหม่() วันที่ วันประชุม
ยุบหัวข้อ ไม่มี เชือก คำบรรยายการประชุม
ผู้เข้าร่วม - อาร์เรย์ อาร์เรย์ผู้เข้าร่วมการประชุม
รายการเพิ่มเติม ไม่มี อาร์เรย์ ทักข้อความรายการเพิ่มเติม
แหล่งข้อมูล - อาร์เรย์ อาร์เรย์รายการการประชุม
บนคลิก ไม่มี การทำงาน ข้อความการประชุมเมื่อคลิกเหตุการณ์ (ข้อความ (วัตถุ) ถูกส่งคืน)
บนหัวข้อการประชุมคลิก ไม่มี การทำงาน ข้อความชื่อการประชุมเมื่อคลิกเหตุการณ์ (ข้อความ (วัตถุ) ถูกส่งคืน)
บนMeetingVideoLinkคลิก ไม่มี การทำงาน ข้อความลิงก์วิดีโอการประชุมเมื่อคลิกเหตุการณ์ (ข้อความ (วัตถุ) ถูกส่งคืน)
ในการประชุมเพิ่มเติมเลือก ไม่มี การทำงาน รายการข้อความเหตุการณ์ onMeetingMoreSelect รับ 3 พารามิเตอร์: รายการข้อความ ดัชนีของรายการ เหตุการณ์

คอมโพเนนต์ MeetingLink

Meetinglink-รูปภาพ

 import { MeetingLink } from 'react-chat-elements'
; < MeetingLink meetingID = '1' title = 'Lorem ipsum dolor sit amet.' />

อุปกรณ์ประกอบฉาก MeetingLink

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
รหัสการประชุม ไม่มี เชือก รหัสลิงก์การประชุม
ชื่อ ไม่มี เชือก ชื่อลิงก์การประชุม
บนMeetingLinkคลิก ไม่มี การทำงาน ลิงค์การประชุมในหน้ากิจกรรมคลิก

คอมโพเนนต์ข้อความระบบ 

 import { SystemMessage } from 'react-chat-elements'
; < SystemMessage text = { 'End of conversation' } />

อุปกรณ์ประกอบฉาก SystemMessage

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
ข้อความ ไม่มี เชือก ข้อความ

ส่วนประกอบรายการข้อความ

รายการข้อความ-ภาพถ่าย

 import { MessageList } from 'react-chat-elements'
messageListReferance = React . createRef ( ) ;

< MessageList
	referance = { messageListReferance }
	className = 'message-list'
	lockable = { true }
	toBottomHeight = { '100%' }
	dataSource = { [
	    {
	        position : 'right' ,
	        type : 'text' ,
	        text : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit' ,
	        date : new Date ( ) ,
	    } ,
	    .
	    .
	    .
	] } />

อุปกรณ์ประกอบฉากรายการข้อความ

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
การอ้างอิง ไม่มี วัตถุ อ้างอิงรายการข้อความ
ชื่อคลาส ไม่มี เชือก className รายการข้อความเสริม
แหล่งข้อมูล - อาร์เรย์ อาร์เรย์รายการข้อความ
ล็อคได้ เท็จ บูลีน มันล็อคเพื่อเลื่อนตำแหน่งเมื่อแหล่งข้อมูลมีการเปลี่ยนแปลง
ถึง BottomHeight 300 int หรือ string (เฉพาะ '100%') หากค่าของคุณสมบัติ toBottomHeight สูงกว่าค่าด้านล่างของแถบเลื่อนเมื่อมีการเปลี่ยนแปลงแหล่งข้อมูล แถบเลื่อนจะไปที่ด้านล่างของหน้า หากค่าของคุณสมบัติ toBottomHeight ได้รับการตั้งค่าเป็น '100%' แถบเลื่อนจะไปที่ด้านล่างของหน้าเมื่อแหล่งข้อมูลมีการเปลี่ยนแปลง
บนคลิก ไม่มี การทำงาน รายการข้อความเมื่อคลิก (ข้อความ (วัตถุ) ถูกส่งกลับ)
บนเปิด ไม่มี การทำงาน รายการข้อความเมื่อเปิด (ไฟล์หรือภาพถ่าย) (ข้อความ (วัตถุ) ถูกส่งคืน)
ในการดาวน์โหลด ไม่มี การทำงาน รายการข้อความเมื่อดาวน์โหลด (ไฟล์หรือภาพถ่าย) (ข้อความ (วัตถุ) ถูกส่งคืน)
บนเลื่อน ไม่มี การทำงาน รายการข้อความในเหตุการณ์เลื่อน
บนไปข้างหน้าคลิก ไม่มี การทำงาน รายการข้อความเหตุการณ์ onForwardClick
เมื่อตอบกลับคลิก ไม่มี การทำงาน รายการข้อความเหตุการณ์ onReplyClick
บนตอบกลับข้อความคลิก ไม่มี การทำงาน รายการข้อความเหตุการณ์ onReplyMessageClick
ปุ่มลง จริง บูลีน รายการข้อความเลื่อนไปที่ปุ่มด้านล่าง
downButtonBadge ไม่มี บูลีน รายการข้อความเนื้อหาป้าย downButton
บนปุ่มลงคลิก ไม่มี การทำงาน รายการข้อความบนDownButtonClick
บน ContextMenu ไม่มี การทำงาน รายการข้อความเหตุการณ์ onContextMenu รับ 3 พารามิเตอร์: รายการข้อความ ดัชนีของรายการ เหตุการณ์
บนPhotoError ไม่มี การทำงาน รายการข้อความบนภาพถ่ายข้อผิดพลาด

ส่วนประกอบรายการแชท

รายชื่อแชท-รูปถ่าย

 import { ChatList } from 'react-chat-elements'

< ChatList
    className = 'chat-list'
    dataSource = { [
        {
            avatar : 'https://facebook.github.io/react/img/logo.svg' ,
            alt : 'Reactjs' ,
            title : 'Facebook' ,
            subtitle : 'What are you doing?' ,
            date : new Date ( ) ,
            unread : 0 ,
        } ,
        .
        .
        .
    ] } />

อุปกรณ์ประกอบฉาก ChatList

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
ชื่อคลาส ไม่มี เชือก className รายการแชทเสริม
แหล่งข้อมูล - อาร์เรย์ อาร์เรย์รายการแชท
บนคลิก ไม่มี การทำงาน รายการแชทเมื่อคลิก (แชท (วัตถุ) ถูกส่งคืน)
บน ContextMenu ไม่มี การทำงาน รายการแชทบนเมนูบริบท (แชท (วัตถุ) ถูกส่งคืน)
บนอวาตาร์ข้อผิดพลาด ไม่มี การทำงาน รายการแชทเกี่ยวกับข้อผิดพลาด avatar img
ขี้เกียจโหลดรูปภาพ ไม่มี เส้นทางภาพ ขี้เกียจโหลดรูป

ส่วนประกอบอินพุต 

 import { Input } from 'react-chat-elements'
inputReferance = React . createRef ( )
; < Input
  referance = { inputReferance }
  placeholder = 'Type here...'
  multiline = { true }
  value = { inputValue }
  rightButtons = { < Button color = 'white' backgroundColor = 'black' text = 'Send' /> }
/>

// Clear text, e.g.:

inputClear = ( ) => { }
// ...
; < Input clear = { clear => ( inputClear = clear ) } placeholder = 'Type here...' />
// ...
inputClear ( )

อุปกรณ์ประกอบฉากอินพุต

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
การอ้างอิง ไม่มี วัตถุ อินพุตอ้างอิง
ชื่อคลาส ไม่มี เชือก className อินพุตทางเลือก
ตัวยึดตำแหน่ง ไม่มี เชือก ป้อนข้อความตัวยึดตำแหน่ง
ค่าดีฟอลต์ ไม่มี เชือก ป้อนค่าเริ่มต้น
เมื่อเปลี่ยน ไม่มี การทำงาน อินพุตฟังก์ชัน onChange
หลายบรรทัด เท็จ บูล อินพุตคือพื้นที่ข้อความ
ความสูงอัตโนมัติ จริง บูล ป้อนความสูงอัตโนมัติ
ความสูงขั้นต่ำ 25 ภายใน อินพุตความสูงขั้นต่ำ
ความสูงสูงสุด 200 ภายใน อินพุตความสูงสูงสุด
inputStyle ไม่มี วัตถุ วัตถุ inputStyle
ปุ่มซ้าย ไม่มี วัตถุ (ส่วนประกอบ) ส่วนประกอบปุ่มซ้าย
ปุ่มขวา ไม่มี วัตถุ (ส่วนประกอบ) ส่วนประกอบปุ่มขวา
อ้างอิง ไม่มี การทำงาน อินพุตหรือการอ้างอิงพื้นที่ข้อความ
ความยาวสูงสุด ไม่มี ภายใน อินพุตหรือพื้นที่ข้อความความยาวสูงสุด
บนMaxLengthExceed ไม่มี การทำงาน เรียกว่าเมื่อความยาวสูงสุดเกิน
ออโต้โฟกัส เท็จ บูล ออโต้โฟกัสอินพุต
ค่า ไม่มี เชือก ค่าอินพุต

ส่วนประกอบปุ่ม 

 import { Button } from 'react-chat-elements'
; < Button text = { 'click me!' } />

อุปกรณ์ประกอบฉากปุ่ม

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
พิมพ์ ไม่มี เชือก ประเภทปุ่ม (มีโครงร่าง โปร่งใส)
พิการ ไม่มี เชือก ปุ่มถูกปิดใช้งาน?
ข้อความ ไม่มี เชือก ข้อความปุ่ม
ปุ่มอ้างอิง ไม่มี การทำงาน ปุ่มอ้างอิง
ชื่อ ไม่มี เชือก ชื่อปุ่ม

ส่วนประกอบป๊อปอัป 

 import { Popup } from 'react-chat-elements'
; < Popup
  show = { this . state . show }
  header = 'Lorem ipsum dolor sit amet.'
  headerButtons = { [
    {
      type : 'transparent' ,
      color : 'black' ,
      text : 'close' ,
      onClick : ( ) => {
        this . setState ( { show : false } )
      } ,
    } ,
  ] }
  text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem animi veniam voluptas eius!'
  footerButtons = { [
    {
      color : 'white' ,
      backgroundColor : '#ff5e3e' ,
      text : 'Vazgeç' ,
    } ,
    {
      color : 'white' ,
      backgroundColor : 'lightgreen' ,
      text : 'Tamam' ,
    } ,
  ] }
/>

อุปกรณ์ประกอบฉากป๊อปอัพ

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
แสดง เท็จ บูล ป๊อปอัปที่มองเห็นได้
ส่วนหัว ไม่มี เชือก ข้อความชื่อป๊อปอัป (ส่วนหัว)
headerButtons ไม่มี อาร์เรย์ ปุ่มชื่อป๊อปอัป (ส่วนหัว)
ข้อความ ไม่มี เชือก ข้อความป๊อปอัปเนื้อหา (กลาง)
สี #333 สาย (สี) สีข้อความเนื้อหาป๊อปอัป
ส่วนท้ายปุ่ม ไม่มี อาร์เรย์ ปุ่มส่วนท้ายป๊อปอัป
renderHeader ไม่มี ฟังก์ชั่น (ส่วนประกอบ) ฟังก์ชันการแสดงผลส่วนหัว
แสดงผลเนื้อหา ไม่มี ฟังก์ชั่น (ส่วนประกอบ) ฟังก์ชันเรนเดอร์เนื้อหา
renderFooter ไม่มี ฟังก์ชั่น (ส่วนประกอบ) ฟังก์ชันเรนเดอร์ส่วนท้าย

ส่วนประกอบแถบด้านข้าง 

 import { SideBar } from 'react-chat-elements'
; < SideBar top = { < div > 'TOP' area </ div > } center = { < div > 'CENTER' area </ div > } bottom = { < div > 'BOTTOM' area </ div > } />

อุปกรณ์ประกอบฉากแถบด้านข้าง

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
พิมพ์ แสงสว่าง เชือก ประเภทสไตล์แถบด้านข้าง (เช่น สว่าง มืด)
สูงสุด ไม่มี ส่วนประกอบ ส่วนประกอบด้านบนของแถบด้านข้าง
ศูนย์ ไม่มี ส่วนประกอบ ส่วนประกอบกึ่งกลางแถบด้านข้าง
ด้านล่าง ไม่มี ส่วนประกอบ ส่วนประกอบด้านล่างของแถบด้านข้าง

ส่วนประกอบแถบนำทาง 

 import { Navbar } from 'react-chat-elements'
; < Navbar left = { < div > 'LEFT' area </ div > } center = { < div > 'CENTER' area </ div > } right = { < div > 'RIGHT' area </ div > } />

อุปกรณ์ประกอบฉาก Navbar

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
พิมพ์ แสงสว่าง เชือก ประเภทสไตล์แถบนำทาง (เช่น สว่าง มืด)
ซ้าย ไม่มี ส่วนประกอบ องค์ประกอบด้านซ้ายของแถบนำทาง
ศูนย์ ไม่มี ส่วนประกอบ ส่วนประกอบศูนย์ navbar
ขวา ไม่มี ส่วนประกอบ องค์ประกอบด้านขวาของแถบนำทาง

ส่วนประกอบแบบเลื่อนลง 

 import { Dropdown } from 'react-chat-elements'
; < Dropdown
  buttonProps = { {
    text : 'Dropdown' ,
  } }
  items = { [
    {
      icon : {
        component : icon ,
        float : 'left' ,
        color : 'red' ,
        size : 22 ,
      } ,
      text : 'lorem' ,
    } ,
    {
      icon : {
        component : icon ,
        float : 'left' ,
        color : 'purple' ,
        size : 22 ,
      } ,
      text : 'ipsum' ,
    } ,
    {
      text : 'dolor' ,
    } ,
  ] }
/>

อุปกรณ์ประกอบฉากแบบเลื่อนลง

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
ประเภทภาพเคลื่อนไหว ไม่มี เชือก จางหายไปหรือเป็นค่าเริ่มต้น
ภาพเคลื่อนไหวตำแหน่ง ตะวันตกเฉียงเหนือ เชือก ตำแหน่งเริ่มต้นของแอนิเมชั่น (ตะวันตกเฉียงเหนือ, ตะวันออกเฉียงเหนือ, ตะวันตกเฉียงใต้, ตะวันออกเฉียงใต้)
รายการ ไม่มี อาร์เรย์ อาร์เรย์รายการแบบเลื่อนลง
เมื่อเลือก ไม่มี การทำงาน รายการที่เลือก
ปุ่มอุปกรณ์ประกอบฉาก ไม่มี วัตถุ คุณสมบัติของปุ่ม

ส่วนประกอบอวตาร 

 import { Avatar } from 'react-chat-elements'
; < Avatar src = { 'https://facebook.github.io/react/img/logo.svg' } alt = { 'logo' } size = 'large' type = 'circle flexible' />

อุปกรณ์ประกอบฉากอวตาร

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
src ไม่มี ภาพ src รูปภาพ
ทางเลือกอื่น ไม่มี เชือก คำอธิบายภาพ Alt
ขนาด ค่าเริ่มต้น เชือก ขนาดภาพ ค่าเริ่มต้น (25px), xsmall(30px), เล็ก (35px), กลาง (40px), ใหญ่ (45px), xlarge (55px)
พิมพ์ ค่าเริ่มต้น เชือก ประเภท: ค่าเริ่มต้น วงกลม โค้งมน (รัศมีเส้นขอบ 5px) ยืดหยุ่นได้
จดหมายรายการ ไม่มี วัตถุ อวาตาร์ให้เป็นจดหมาย
องค์ประกอบด้านข้าง ไม่มี ส่วนประกอบ องค์ประกอบด้านอวตาร
บนข้อผิดพลาด ไม่มี ส่วนประกอบ อวตาร img มีข้อผิดพลาด
ขี้เกียจโหลดรูปภาพ ไม่มี เส้นทางภาพ ขี้เกียจโหลดรูป

ส่วนประกอบข้อความตำแหน่ง 

 import { LocationMessage } from 'react-chat-elements'
; < LocationMessage
  data = { {
    latitude : '37.773972' ,
    longitude : '-122.431297' ,
    // staticURL: '<optional>',
    // mapURL: '<optional>'
  } }
/>

อุปกรณ์ประกอบฉากข้อความตำแหน่ง

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
src ไม่มี ภาพ รูปภาพ
apiKey ไม่มี เชือก คีย์ API แผนที่คงที่ของ Google
ซูม 14 ภายใน ระดับการซูมแผนที่คงที่ของ Google
เครื่องหมายสี สีแดง เชือก สีเครื่องหมายแผนที่คงที่ของ Google
ข้อมูล - วัตถุ ข้อมูลข้อความ
เป้า _ว่างเปล่า เชือก รูปภาพเสาเป้าหมายแท็ก
บนเปิด ไม่มี การทำงาน ภาพตอนเปิด

ส่วนประกอบ SpotifyMessage

สปอติฟาย

 import { SpotifyMessage } from 'react-chat-elements'
; < SpotifyMessage theme = 'white' view = 'coverart' uri = { 'spotify:user:spotify:playlist:3rgsDhGHZxZ9sB9DQWQfuf' } />

อุปกรณ์ประกอบฉาก SpotifyMessage

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
ยูริ ไม่มี ยูริ Spotify ยูริ
ธีม สีดำ เชือก สีของธีม Spotify (สีดำหรือสีขาว)
ดู รายการ เชือก ประเภทมุมมอง Spotify (รายการหรือหน้าปก)
ข้อมูล - วัตถุ ข้อมูลข้อความ
ความกว้าง 300 ภายใน Spotify ฝังความกว้าง
ความสูง 380 ภายใน Spotify ฝังความสูง

ส่วนประกอบ MeetingItem

ภาพถ่ายการประชุม

 import { MeetingItem } from 'react-chat-elements'
; < MeetingItem
  subject = { 'New Release!!!' }
  avatars = { [
    {
      src : 'https://facebook.github.io/react/img/logo.svg' ,
    } ,
  ] }
  onMeetingClick = { console . log }
  onShareClick = { console . log }
  onCloseClick = { console . log }
/>

อุปกรณ์ประกอบฉาก MeetingItem

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
เรื่อง ไม่มี เชือก หัวข้อ MeetingItem
เรื่องจำกัด 60 ภายใน ขีดจำกัดข้อความหัวเรื่อง MeetingItem
วันที่ ไม่มี วันที่ วันที่รายการประชุม
dateString ไม่มี เชือก MeetingItem แสดงถึง dateString หรือ timeagojs (ตอนนี้, วันที่)
ขี้เกียจโหลดรูปภาพ ไม่มี เส้นทางภาพ ขี้เกียจโหลดรูป
ปิดได้ จริง บูลีน MeetingItem ปิดได้
บนคลิก ไม่มี การทำงาน MeetingItem เมื่อคลิก
ในการประชุมคลิก ไม่มี การทำงาน MeetingItem ในการประชุม คลิก
บนแชร์คลิก ไม่มี การทำงาน MeetingItem เมื่อแชร์คลิก
เมื่อปิดคลิก ไม่มี การทำงาน MeetingItem เมื่อปิดคลิก
อวตาร ไม่มี วันที่ อวตารของรายการประชุม
อวตารจำกัด 5 วันที่ ขีดจำกัดอวตารของ MeetingItem
ปิดเสียงแล้ว จริง บูลีน ปิดเสียง MeetingItem แล้ว
แหล่งที่มาของเสียง โมฆะ เชือก แหล่งกำเนิดเสียง MeetingItem

คอมโพเนนต์รายการการประชุม

MeetingList-ภาพถ่าย

การประชุมปิดได้

 import { MeetingList } from 'react-chat-elements'

< MeetingList
    className = 'meeting-list'
    dataSource = { [
        {
            id : '1' ,
            subject : 'New Release' ,
            date : new Date ( ) ,
            avatars : [ {
               src : 'https://facebook.github.io/react/img/logo.svg' ,
            } ]
        } ,
        .
        .
        .
    ] } />

อุปกรณ์ประกอบฉาก MeetingList

ข้อเสนอ ค่าเริ่มต้น พิมพ์ คำอธิบาย
ชื่อคลาส ไม่มี เชือก className รายการการประชุมเพิ่มเติม
แหล่งข้อมูล - อาร์เรย์ อาร์เรย์รายการการประชุม
บนคลิก ไม่มี การทำงาน รายการการประชุมเมื่อคลิก (ส่งคืนการประชุม (วัตถุ))
ในการประชุมคลิก ไม่มี การทำงาน รายการการประชุมเมื่อคลิกการประชุม (ส่งคืนการประชุม (วัตถุ))
บนแชร์คลิก ไม่มี การทำงาน รายการการประชุมเมื่อแชร์คลิก (ส่งคืนการประชุม (วัตถุ))
เมื่อปิดคลิก ไม่มี การทำงาน รายการการประชุมเมื่อคลิกปิด (ส่งคืนการประชุม (วัตถุ))
บน ContextMenu ไม่มี การทำงาน รายการการประชุมในเมนูบริบท (ส่งคืนการประชุม (วัตถุ))
onAvatarError ไม่มี การทำงาน รายการการประชุมเกี่ยวกับข้อผิดพลาด avatar img
ขี้เกียจโหลดรูปภาพ ไม่มี เส้นทางภาพ ขี้เกียจโหลดรูป
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด