toastify js

ให้ความช่วยเหลือ

Toastify เป็นห้องสมุดการแจ้งเตือน Toast Vanilla ที่มีน้ำหนักเบา

การสาธิต

คลิกที่นี่

คุณสมบัติ

• การแจ้งเตือนแบบซ้อนหลายครั้ง

• ปรับแต่งได้

• ไม่มีการปิดกั้นเธรดการดำเนินการ

ตัวเลือกการปรับแต่ง

• ข้อความแจ้งเตือน

• ระยะเวลา

• สีพื้นหลังขนมปังปิ้ง

• การแสดงไอคอนปิด

• แสดงตำแหน่ง

• ตำแหน่งชดเชย

การติดตั้ง

ตอนนี้ Toastify รองรับการติดตั้งผ่าน NPM

• เรียกใช้คำสั่งด้านล่างเพื่อเพิ่ม toastify-js ไปยังโครงการที่มีอยู่หรือใหม่ของคุณ

npm install --save toastify-js

หรือ

yarn add toastify-js -S

• นำเข้า toastify-js ลงในโมดูลของคุณเพื่อเริ่มใช้งาน

import Toastify from 'toastify-js'

คุณสามารถใช้ CSS เริ่มต้นจาก toastify ดังนี้ด้านล่างและในภายหลังแทนที่หรือเลือกที่จะเขียน CSS ของคุณเอง

import "toastify-js/src/toastify.css"

การเพิ่ม toastifyjs ไปยังหน้า html โดยใช้วิธีดั้งเดิม

หากต้องการเริ่มใช้ toastify ให้เพิ่ม CSS ต่อไปนี้ในหน้าของคุณ

 <link rel = "stylesheet" type = "text/css" href = "https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"

และสคริปต์ที่ด้านล่างของหน้า

 <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/toastify-js"> </script>

ไฟล์จะถูกส่งผ่านบริการ CDN ที่จัดทำโดย JSDELIVER

เอกสาร

 toastify ({
  ข้อความ: "นี่คือขนมปังปิ้ง"
  ระยะเวลา: 3000,
  ปลายทาง: "https://github.com/apvarun/toastify-js"
  Newwindow: จริง
  ปิด: จริง
  แรงโน้มถ่วง: "top", // `top` หรือ` bottom '
  ตำแหน่ง: "ซ้าย", // `ซ้าย ',` center' หรือ `ขวา '
  StopOnFocus: จริง // ป้องกันการยกเลิกขนมปังปิ้งบนโฮเวอร์
  สไตล์: {พื้นหลัง: "linear-gradient (ไปทางขวา, #00B09B, #96C93D)"
  -
  onclick: function () {} // การโทรกลับหลังจากคลิก}). showtoast ();

ข้อความขนมปังปิ้งจะอยู่กึ่งกลางอุปกรณ์ที่มีความกว้างของหน้าจอน้อยกว่า 360px

• ดูการเปลี่ยนแปลง

เพิ่มคลาสที่กำหนดเองของตัวเอง

หากคุณต้องการใช้คลาสที่กำหนดเองบนขนมปังปิ้งเพื่อปรับแต่ง (เช่นข้อมูลหรือคำเตือน) คุณสามารถทำได้ดังนี้:

 toastify ({
  ข้อความ: "นี่คือขนมปังปิ้ง"
  classname: "info",
  สไตล์: {พื้นหลัง: "linear-gradient (ไปทางขวา, #00B09B, #96C93D)"
  }}). showtoast ();

หลายคลาสยังสามารถกำหนดเป็นสตริงที่มีช่องว่างระหว่างชื่อคลาส

เพิ่มชดเชย

หากคุณต้องการเพิ่มออฟเซ็ตลงในขนมปังปิ้งคุณสามารถทำได้ดังนี้:

 toastify ({
  ข้อความ: "นี่คือขนมปังปิ้งที่มีออฟเซ็ต"
  ออฟเซ็ต: {x: 50, // แกนแนวนอน - สามารถเป็นตัวเลขหรือสตริงที่ระบุความสามัคคี เช่น: '2EM'Y: 10 // แกนแนวตั้ง - สามารถเป็นตัวเลขหรือสตริงที่ระบุความสามัคคี เช่น: '2em'
  },}). showtoast ();

ขนมปังปิ้งจะถูกผลัก 50px จากขวาในแกน x และ 10px จากด้านบนในแกน y

บันทึก:

หาก position เท่ากับไป left มันจะถูกผลักจากซ้าย หาก gravity เท่ากับ bottom มันจะถูกผลักจากด้านล่าง

API

คีย์ตัวเลือก	พิมพ์	การใช้งาน	ค่าเริ่มต้น
ข้อความ	สาย	ข้อความที่จะแสดงในขนมปังปิ้ง	"สวัสดี!"
โหนด	element_node	ให้โหนดที่จะติดตั้งภายในขนมปังปิ้ง node มีความสำคัญสูงกว่า text
ระยะเวลา	ตัวเลข	ระยะเวลาที่ควรแสดงขนมปังปิ้ง -1 สำหรับขนมปังถาวร	3,000
ตัวเลือก	สตริง | element_node	shadowroot	ตัวเลือก CSS หรือโหนดองค์ประกอบที่ควรเพิ่มขนมปังปิ้ง
ปลายทาง	สตริง URL	URL ที่เบราว์เซอร์ควรนำทางด้วยการคลิกขนมปังปิ้ง
ใหม่	บูลีน	ตัดสินใจว่าควรเปิด destination ในหน้าต่างใหม่หรือไม่	เท็จ
ปิด	บูลีน	เพื่อแสดงไอคอนปิดหรือไม่	เท็จ
แรงโน้มถ่วง	"Top" หรือ "Bottom"	เพื่อแสดงขนมปังจากบนหรือล่าง	"สูงสุด"
ตำแหน่ง	"ซ้าย" หรือ "ขวา"	เพื่อแสดงขนมปังทางซ้ายหรือขวา	"ขวา"
พื้นหลัง	ค่าพื้นหลัง CSS	หากต้องการเลิกกิจการให้ใช้ style.background ตัวเลือกแทน ตั้งค่าสีพื้นหลังของขนมปังปิ้ง
อวตาร	สตริง URL	รูปภาพ/ไอคอนที่จะแสดงก่อนข้อความ
ชื่อชั้นเรียน	สาย	ความสามารถในการจัดหาชื่อคลาสที่กำหนดเองสำหรับการปรับแต่งเพิ่มเติม
stopOnfocus	บูลีน	หากต้องการหยุดจับเวลาเมื่อวนเวียนอยู่เหนือขนมปังปิ้ง (เฉพาะในกรณีที่มีการตั้งค่าระยะเวลา)	จริง
การโทรกลับ	การทำงาน	เรียกใช้เมื่อขนมปังปิ้งถูกไล่ออก
onclick	การทำงาน	เรียกใช้เมื่อคลิกขนมปังปิ้ง
ชดเชย	วัตถุ	ความสามารถในการเพิ่มการชดเชยให้กับแกน
escapemarkup	บูลีน	สลับพฤติกรรมเริ่มต้นของการหลบหนีมาร์กอัป HTML	จริง
สไตล์	วัตถุ	ใช้คุณสมบัติสไตล์ HTML DOM เพื่อเพิ่มสไตล์ใด ๆ โดยตรงไปยังขนมปังปิ้ง
เกี่ยวกับการบิน	สาย	ประกาศ Toast to Screen Readers ดู https://developer.mozilla.org/en-us/docs/web/accessibility/aria/aria_live_regions สำหรับตัวเลือก	"สุภาพ"
เก่าแก่ที่สุด	บูลีน	ตั้งค่าลำดับที่ขนมปังปิ้งซ้อนกันในหน้า	จริง

คุณสมบัติที่ไม่ได้รับการคัดเลือก: backgroundColor - ใช้ style.background ตัวเลือกแทน

เบราว์เซอร์รองรับ

เช่น / ขอบ	Firefox	โครเมี่ยม	ซาฟารี	โอเปร่า
IE10, IE11, Edge	10 รุ่นสุดท้าย	10 รุ่นสุดท้าย	10 รุ่นสุดท้าย	10 รุ่นสุดท้าย

ผู้มีส่วนร่วม

นักต้มตุ๋น	Caiomoura1994	rndevfx	1ESS	D4RN0K	Danielkaiser80
skjnldsv	Chasedeandeanda	คริสเกรแฮม	wachiwi	ฟีลัมูรุนส์	คนอื่น ๆ
Haydster7	Joaquinwojcik	juliushaertl	mort3za	Sandip124	Tadaz
t12ung	Victorfeijo	คนจรจัด	Prousseau-Korem

ใบอนุญาต

mit © varun ap