การดาวน์โหลด chayns components - chayns components ดาวน์โหลดซอร์สโค้ดดาวน์โหลด

chayns components

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

v4.20.24

ดาวน์โหลด

ชุดของส่วนประกอบปฏิกิริยาที่สวยงามสำหรับการพัฒนาแอพพลิเคชั่นChayns®

การติดตั้ง

ก่อนอื่นคุณควรติดตั้งแพ็คเกจ chayns-components ลงในโครงการของคุณ:

 # Yarn
yarn add chayns-components

# NPM
npm install chayns-components

สไตล์ของส่วนประกอบของเรานั้นมีให้ผ่านห้องสมุด chayns-css และส่วนประกอบบางส่วนยังขึ้นอยู่กับ chayns-js API ดังนั้นคุณควรรวมสิ่งเหล่านี้ไว้ใน HTML ของคุณ:

 <!-- CSS styles -->
< script
  src =" https://api.chayns-static.space/css/v4/compatibility/compatibility.min.js "
  version =" 4.2 "
> </ script >

<!-- JS api -->
< script src =" https://api.chayns-static.space/js/v4.0/chayns.min.js " > </ script >

ภาพรวมส่วนประกอบ

ส่วนประกอบต่อไปนี้เป็นส่วนหนึ่งของแพ็คเกจนี้:

ส่วนประกอบ	คำอธิบาย
หีบเพลง›	หีบเพลงเป็นส่วนที่ยุบได้ซึ่งสลับโดยการโต้ตอบกับส่วนหัวที่มองเห็นได้อย่างถาวร
จำนวนเงิน›	จำนวนเงินคือการควบคุมสามส่วนที่ใช้ในการเพิ่มหรือลดค่าที่เพิ่มขึ้น
AnimationWrapper›	AnimationWrapper ให้ภาพเคลื่อนไหวเริ่มต้นที่สะดุดตากับเด็ก ๆ
ตรา›	ป้ายมีขนาดเล็กภาชนะวงกลมที่ใช้ในการตกแต่งส่วนประกอบอื่น ๆ ด้วยข้อมูลที่สามารถ glancable
ฟอง›	ฟองสบู่ลอยน้ำที่ใช้เป็นหลักในการใช้จ่ายส่วนประกอบ `ContextMenu` และ `Tooltip`
ปุ่ม >	ปุ่มเริ่มต้นการกระทำสามารถรวมชื่อหรือไอคอนและมาพร้อมกับชุดของสไตล์ที่กำหนดไว้ล่วงหน้า
ปฏิทิน >	ปฏิทินกริดแบบโต้ตอบที่สามารถเน้นวันที่ที่ระบุ
ช่องทำเครื่องหมาย›	ช่องทำเครื่องหมายช่วยให้ผู้ใช้สามารถทำงานที่เกี่ยวข้องกับการเลือกตัวเลือกเช่นการเลือกตัวเลือก สามารถจัดรูปแบบเป็นสวิตช์ภาพสลับระหว่างสองสถานะพิเศษร่วมกัน - เปิดและปิด
Colorpicker›	ให้ผู้ใช้เลือกสีสำหรับข้อความรูปร่างเครื่องมือทำเครื่องหมายและองค์ประกอบอื่น ๆ
Colorscheme›	ปรับโทนสีสำหรับส่วนประกอบเด็กทั้งหมด
Combobox›	ปุ่มที่มีแบบเลื่อนลงที่มีรายการที่สามารถเลื่อนได้ของค่าที่แตกต่างกันซึ่งผู้คนสามารถเลือกได้
ContextMenu›	ช่วยให้ผู้คนสามารถเข้าถึงฟังก์ชั่นเพิ่มเติมที่เกี่ยวข้องกับรายการบนหน้าจอโดยไม่ทำให้อินเทอร์เฟซยุ่งเหยิง
DateInfo›	จัดรูปแบบช่วงวันที่หรือวันที่ที่จะอ่านได้ง่ายและเปิดเผยวันที่แน่นอนในการโฮเวอร์
Emojiinput›	อินพุตข้อความที่อนุญาตให้ใส่อิโมจิ
ExpandableContent›	ส่วนที่ยุบได้ซึ่งเผยให้เห็นลูก ๆ ที่มีการเปลี่ยนแปลงสูง
FileInput›	ยอมรับประเภทไฟล์ที่ระบุผ่านกล่องโต้ตอบหรือลากและวาง
FilterButton›	ส่วนประกอบคล้ายชิปที่ใช้ในการกรองรายการ มักจะใช้ในกลุ่ม 2 หรือมากกว่า
FormattedInput›	อินพุตข้อความที่จัดรูปแบบอินพุตของมันโดยอัตโนมัติ เนื่องจากส่วนประกอบนี้ขึ้นอยู่กับคอมโพเนนต์ `Input` จึงต้องใช้อุปกรณ์ประกอบ `Input` ใด ๆ ที่ไม่ได้อยู่ในรายการซึ่งไม่ได้ระบุไว้ที่นี่ ส่วนประกอบนี้ใช้งานได้เป็นส่วนประกอบที่ไม่สามารถควบคุมได้ซึ่งหมายความว่ามันไม่ได้ใช้ `value` -Prop
แกลเลอรี่›	แกลเลอรี่รูปภาพที่แสดงภาพได้สูงสุดสี่ภาพโดยค่าเริ่มต้น นอกจากนี้ยังรองรับการจัดลำดับใหม่และการลบภาพและภาพตัวอย่างเบลอสำหรับภาพที่โหลดจาก `tsimg.cloud`
ไอคอน›	แสดงไอคอน fontawesome
Imageaccordion›	หีบเพลงที่มีภาพขนาดใหญ่และปรากฏในกริด ควรใช้ภายใน `ImageAccordionGroup`
ImageAccordionGroup›	กลุ่ม `ImageAccordion` หลายองค์ประกอบเข้าด้วยกันดังนั้นเพียงหนึ่งในนั้นเท่านั้นที่สามารถเปิดได้ในแต่ละครั้ง
ป้อนข้อมูล >	อินพุตข้อความที่สามารถตรวจสอบและตกแต่งด้วยการออกแบบที่แตกต่างกัน
รายการ >	wrapper สำหรับ `ListItem` -component เพื่อสร้างรายการ
ListItem›	รายการในรายการเพื่อแสดงข้อมูลที่เกี่ยวข้องในรูปแบบที่มีโครงสร้าง ควรใช้ภายในส่วนประกอบ `List`
Openingtimes›	อินพุตสำหรับเวลาเปิดทำการ
personfinder›	การค้นหาอัตโนมัติที่สมบูรณ์สำหรับบุคคลที่สามารถปรับแต่งให้ทำงานกับข้อมูลโดยพลการ
PositionInput›	อินพุตตำแหน่งที่มีแผนที่และอินพุตข้อความ สิ่งนี้ต้องใช้ Google Maps JavaScript API ที่เปิดใช้งาน Library Places คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับแผนที่ API ได้ที่นี่
ProgressBar›	แถบความคืบหน้าภาพเคลื่อนไหวที่สามารถแสดงความคืบหน้าการกระทำหรือสถานะที่ไม่แน่นอนเช่นสปินเนอร์กำลังโหลด
Radiobutton›	ปุ่มตัวเลือกที่อนุญาตให้เลือกหนึ่งในหลายตัวเลือก
Rfidinput›	ส่วนประกอบที่จะใช้ในสัญญาณ RFID
Scrollview›	คอนเทนเนอร์ที่เลื่อนได้พร้อมแถบเลื่อนแบบกำหนดเองที่ดูดีในทุกอุปกรณ์
Searchbox›	อินพุตเติมข้อความอัตโนมัติเพื่อค้นหารายการรายการ
SelectButton›	ปุ่มเลือกที่เปิดกล่องโต้ตอบการเลือกเมื่อคลิก
SelectItem›	ปุ่มตัวเลือกที่ขยายเนื้อหาเมื่อเลือก ควรใช้ภายใน `SelectList`
SelectList›	รายการแนวตั้งของปุ่มตัวเลือกที่เปิดเผยเนื้อหาเมื่อเลือก
Setupwizard›	ชุดของขั้นตอนที่ผู้ใช้ต้องผ่านตามลำดับ
SetupWizardItem›	รายการที่แสดงถึงขั้นตอนเดียวใน `SetupWizard`
Sharingbar›	เมนูบริบทสำหรับการแชร์ลิงก์และข้อความบางส่วนบนแพลตฟอร์มต่างๆ
ลายเซ็น >	ส่วนประกอบเพื่อให้ผู้ใช้สมัครสมาชิก
ตัวเลื่อน›	แทร็กแนวนอนที่มีนิ้วหัวแม่มือที่สามารถเคลื่อนย้ายระหว่างค่าต่ำสุดและค่าสูงสุด
Sliderbutton›	ชุดปุ่มเชิงเส้นซึ่งไม่เหมือนกัน
smallwaitcursor›	ตัวบ่งชี้การโหลดวงกลมขนาดเล็ก
Taginput›	อินพุตข้อความที่อนุญาตให้จัดกลุ่มเป็นแท็ก
Textarea›	อินพุตข้อความ multiline ที่สามารถเติบโตได้โดยอัตโนมัติด้วยเนื้อหา
TextString›	โหลดสตริงข้อความจากฐานข้อมูลของเราและแสดง จัดการการเปลี่ยนและเปลี่ยนสตริงผ่าน `CTRL` + `Click` (ภายในเท่านั้น)
คำแนะนำเครื่องมือ›	ห่อส่วนประกอบเด็กและแสดงข้อความเมื่อเด็กถูกโฮเวอร์หรือคลิก อนุญาตให้แสดงได้อย่างไม่แน่นอนโดยการโทร `.show()` หรือ `.hide()` ในการอ้างอิง
Verificationicon›

ฟังก์ชั่นยูทิลิตี้

นอกจากนี้เรายังมีชุดของฟังก์ชั่นยูทิลิตี้ทั่วไป:

การทำงาน	คำอธิบาย
ImageUpload	ฟังก์ชั่นเพื่ออัปโหลดรูปภาพไปยัง tsimg.cloud
istobitemployee	รับข้อมูลหากผู้ใช้เป็นพนักงาน Tobit
createlinks	สร้างสตริงที่มีลิงก์จากสตริงที่มี URL
ลบ html	ลบแท็ก HTML จากสตริง
colorutils	ฟังก์ชั่นยูทิลิตี้เพื่อแปลงค่าสี (hex, RGB, HSV)
เครื่องทำให้เท่ากัน	ฟังก์ชั่นยูทิลิตี้เพื่อทำให้ความกว้างขององค์ประกอบ HTML เท่าเทียมกัน