toastify js Download - toastify js Source Source Download

toastify js

ซอร์สโค้ดอื่น ๆ

1.12.0

ดาวน์โหลด

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

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