lion

สิงโต

เว็บไซต์ · พื้นฐาน · คำแนะนำ · ส่วนประกอบ · บล็อก

Lion คือชุดของ Web Components ที่มีประสิทธิภาพสูง เข้าถึงได้ และมีความยืดหยุ่น!

พวกมันมอบเลเยอร์ไวท์เลเบลที่ไม่มีใครเชื่อได้ ซึ่งสามารถขยายไปยังเลเยอร์ส่วนประกอบของคุณเองได้

• ประสิทธิภาพสูง: มุ่งเน้นไปที่ประสิทธิภาพที่ยอดเยี่ยมในเบราว์เซอร์ที่เกี่ยวข้องทั้งหมดโดยมีจำนวนการอ้างอิงน้อยที่สุด

• การเข้าถึง: มุ่งเป้าไปที่การปฏิบัติตามมาตรฐาน WCAG 2.2 AA เพื่อสร้างส่วนประกอบที่ทุกคนสามารถเข้าถึงได้

• ความยืดหยุ่น: มอบโซลูชันผ่านคลาส Web Components และ JavaScript ซึ่งสามารถใช้ ปรับใช้ และขยายได้เพื่อให้เหมาะกับทุกความต้องการ

• Modern Code: Lion จำหน่ายในรูปแบบโมดูล es ล้วนๆ

• เปิดเผยฟังก์ชัน/คลาสและส่วนประกอบของเว็บ: จัดส่งฟังก์ชันการทำงานในรูปแบบที่เหมาะสมที่สุด

หมายเหตุ: ตัวอย่างสาธิตของเราอาจดูเรียบง่ายและไม่มีสไตล์มากนัก นี่เป็นการตั้งใจ พวกมันได้รับการออกแบบมาให้เป็นพื้นฐาน ดังนั้นคุณสามารถเพิ่มสไตล์ของคุณเองเพื่อให้เข้ากับการออกแบบที่คุณต้องการได้อย่างง่ายดาย โดยไม่ต้องจัดการกับสไตล์ที่มีอยู่แล้ว

สำรวจ Lion Guides ▶

วิธีการติดตั้ง

 npm ฉัน @lion/ui

วิธีใช้

ขยายคอมโพเนนต์ของเว็บ

นี่เป็นกรณีการใช้งานหลักสำหรับ lion เพื่อนำเข้าคลาสส่วนประกอบ และขยายคลาสเหล่านั้นสำหรับส่วนประกอบของระบบการออกแบบของคุณเอง

 นำเข้า { css } จาก 'lit'; นำเข้า { LionInput } จาก '@lion/ui/input.js'; คลาส MyInput ขยาย LionInput {
  รับสไตล์คงที่ () {return [ super.styles, css` /* สไตล์ของคุณที่นี่ */ `,];
  }}customElements.define('my-input', MyInput);

ใช้ระบบจาวาสคริปต์

มี "ระบบ" สองสามรายการใน lion ซึ่งมี JavaScript API ตัวอย่าง ได้แก่ localize , overlays , ajax ฯลฯ

 <ประเภทสคริปต์ = "โมดูล">
  นำเข้า { ajax } จาก '@lion/ui/ajax.js';

  ajax.fetch('data.json').then(response => response.json()).then(data => { // do someone with the data});</script>

ใช้ส่วนประกอบของเว็บ

คุณยังสามารถใช้องค์ประกอบสิงโตได้โดยตรง แม้ว่านี่จะไม่ใช่กรณีการใช้งานทั่วไปก็ตาม

 <ประเภทสคริปต์ = "โมดูล">
  นำเข้า '@lion/ui/define/lion-input.js';</script><lion-input name="firstName"></lion-input>

ปัญหา

หากคุณพบปัญหากับแพ็คเกจใดๆ ที่เรานำเสนอ โปรดเปิดปัญหาข้อบกพร่องใหม่ อย่าลืมใส่คำอธิบายเกี่ยวกับสิ่งที่คาดหวังและพฤติกรรมปัจจุบัน - การเพิ่มการทำซ้ำเพิ่มเติมจะช่วยได้เสมอ

คำขอคุณสมบัติ

เมื่อคุณมีแนวคิดว่าเราจะปรับปรุงได้อย่างไร โปรดตรวจสอบการสนทนาของเราเพื่อดูว่ามีแนวคิดหรือคำขอคุณลักษณะที่คล้ายกันหรือไม่ หากไม่มี โปรดเริ่มคำขอคุณลักษณะของคุณเป็นหัวข้อสนทนาใหม่ เพิ่มชื่อ [Feature Request] My awesome feature และคำอธิบายสิ่งที่คุณคาดหวังจากการปรับปรุงและกรณีการใช้งาน

เนื้อหา

ชื่อ	รุ่น	คำอธิบาย
@สิงโต/ui		ชุดส่วนประกอบ
@สิงโต/อาแจ็กซ์		กระดาษห่อเล็ก ๆ รอบตัวดึง
ผู้จัดการซิงเกิลตัน		ตัวจัดการซิงเกิลตันมีวิธีตรวจสอบให้แน่ใจว่าอินสแตนซ์ซิงเกิลตันที่โหลดจากหลาย ๆ ตำแหน่งไฟล์ยังคงเป็นซิงเกิลตัน มีประโยชน์เบื้องต้นหากใช้แพ็คเกจหลักสองเวอร์ชันที่มีซิงเกิลตัน
ปลั๊กอิน Babel ขยายเอกสาร		ปลั๊กอินที่เขียนการนำเข้าและเทมเพลตใหม่ตามการกำหนดค่า ซึ่งช่วยให้สามารถนำเอกสารที่มีอยู่จากแพ็คเกจต้นทางกลับมาใช้ใหม่ได้ในขณะที่ยังคงใช้โค้ดส่วนขยายของคุณ
การวิเคราะห์ความรอบคอบ		พรอวิเดนซ์คือ 'All Seeing Eye' ที่สร้างสถิติการใช้งานโดยการวิเคราะห์โค้ด โดยจะวัดประสิทธิภาพและความนิยมของซอฟต์แวร์ของคุณ ด้วยคำสั่งเพียงไม่กี่คำสั่ง คุณสามารถวัดผลกระทบสำหรับการเปลี่ยนแปลง (ที่ไม่สมบูรณ์) ทำให้กระบวนการเผยแพร่ของคุณมีเสถียรภาพและคาดการณ์ได้มากขึ้น
เผยแพร่เอกสาร		เครื่องมือที่คัดลอกและประมวลผลเอกสารของคุณ (ในรูปแบบ monorepo) เพื่อให้สามารถเผยแพร่/จัดส่งพร้อมกับแพ็คเกจของคุณได้
หมายเหตุ ขยายความ		ปลั๊กอินสำหรับหมายเหตุเพื่อขยายมาร์กดาวน์โดยการนำเข้าจากไฟล์ต้นฉบับ
Rocket ที่ตั้งไว้ล่วงหน้าขยายเอกสาร Lion		เมื่อรักษาชั้นส่วนขยายของสิงโตของคุณเอง คุณมักจะต้องการรักษาเอกสารที่คล้ายกันไว้ การคัดลอกและเขียนไฟล์มาร์กดาวน์ใหม่ได้ผล แต่เมื่อใดก็ตามที่มีการเปลี่ยนแปลงใดๆ คุณต้องคัดลอกและเขียนใหม่อีกครั้ง หากต้องการทำสิ่งนี้โดยอัตโนมัติ คุณสามารถใช้พรีเซ็ตนี้สำหรับจรวดได้

เทคโนโลยี

Lion Web Components มีเป้าหมายที่จะรองรับอนาคตและใช้เทคโนโลยีที่ได้รับการพิสูจน์แล้วซึ่งได้รับการสนับสนุนอย่างดี สแต็กที่เราเลือกควรสะท้อนถึงสิ่งนี้

• สว่าง

• เวลา 22.00 น

• เปิดคอมโพเนนต์ของเว็บ

• เว็บสมัยใหม่

• มอคค่า

• ชัย

• ESLint

• สวยกว่า

• โมดูล ES

• บททดสอบมากมายมากมาย

เหตุผล

เรารู้จากประสบการณ์ว่าการสร้างคอมโพเนนต์ UI คุณภาพสูงที่สามารถเข้าถึงได้นั้นยากและใช้เวลานาน: ต้องทำซ้ำหลายครั้ง ใช้เวลาในการพัฒนานาน และการทดสอบมากมายเพื่อให้ได้คอมโพเนนต์ทั่วไปที่ทำงานในทุกบริบท รองรับ Edge Case จำนวนมาก และ สามารถเข้าถึงได้จากโปรแกรมอ่านหน้าจอที่เกี่ยวข้องทั้งหมด

Lion มุ่งหวังที่จะทำการยกของหนักให้กับคุณ ซึ่งหมายความว่าคุณเพียงแค่ต้องใช้ระบบการออกแบบของคุณเอง: โดยการนำเสนอสไตล์ การกำหนดค่าส่วนประกอบ และเพิ่มตรรกะแบบกำหนดเองขั้นต่ำที่ด้านบน

แนวทางการเข้ารหัส

ตรวจสอบหลักเกณฑ์การเขียนโค้ดของเราสำหรับข้อมูลโดยละเอียดเพิ่มเติม

วิธีการมีส่วนร่วม

โปรดทราบ: โปรเจ็กต์นี้ใช้พื้นที่ทำงาน Npm หากคุณต้องการรันการสาธิตทั้งหมดภายในเครื่อง คุณจะต้องได้รับอย่างน้อย npm 7+ และติดตั้งการอ้างอิงทั้งหมดโดยดำเนินการ npm install

Lion Web Components จะดีพอๆ กับการมีส่วนร่วมเท่านั้น อ่านคู่มือการมีส่วนร่วมของเราและรู้สึกอิสระที่จะปรับปรุง/ปรับปรุง Lion เรายังคงปิดคำขอคุณลักษณะในขณะที่เราไม่ได้ดำเนินการอยู่

ติดต่อ

อย่าลังเลที่จะสร้างปัญหา GitHub สำหรับข้อเสนอแนะหรือคำถามที่คุณอาจมี