Windmillcode Angular CDK

Windmillcode Angular CDK

ยินดีต้อนรับสู่ Windmillcode Angular Library ชุดที่ครอบคลุมของส่วนประกอบเชิงมุมที่ออกแบบมาเพื่อช่วยให้คุณสร้างแอพพลิเคชั่นเว็บที่มีส่วนร่วมแข็งแกร่งและใช้งานง่าย ไลบรารีนี้หรือที่รู้จักกันในชื่อชุดพัฒนาส่วนประกอบเชิงมุม Windmillcode (CDK) ให้ชุดของส่วนประกอบ UI ที่นำกลับมาใช้ใหม่ได้แต่ละชุดได้รับการออกแบบด้วยความใส่ใจในรายละเอียดและประสิทธิภาพ

-

คุณสมบัติ

การกำหนดค่า/การติดตั้งน้อยที่สุด

• ห้องสมุดส่วนใหญ่ขึ้นอยู่กับปัญหาวัสดุเชิงมุมและปัญหาความเข้ากันได้จะปรากฏขึ้นเมื่อโครงการของคุณใหญ่ขึ้น พื้นฐานของส่วนประกอบของเราคือวานิลลา js และคุณสมบัติ typescript ที่เสถียรดังนั้นเมื่อโครงการของคุณเติบโตขึ้นหากมีปัญหาการกำหนดค่าใด ๆ (หวังว่า) จะไม่อยู่กับเรา

เชื่อมโยงความคิดที่ซับซ้อนลงในรหัสได้ง่ายขึ้น

• เราจะสร้างการบินของเราเองได้อย่างไรโดยไม่คว้าส่วนประกอบ จะเกิดอะไรขึ้นถ้าเราต้องการสร้างส่วนประกอบใหม่นับจากศูนย์ลง mabye 90% ของรายละเอียด vey โดยการทำความเข้าใจว่าคุณสามารถผูกคลาสของเรากับคุณสมบัติที่ซับซ้อนขององค์ประกอบทุกอย่างที่ค่อนข้างมีเหตุผลหรือยากที่จะนำไปใช้ในขณะนี้มีรูปแบบที่สม่ำเสมอซึ่งสำหรับความคิดสร้างสรรค์ที่มากขึ้นในส่วนของนักพัฒนา

รู้สึกเหมือนตอบสนอง

• คุณมีส่วนประกอบและคุณมีอุปกรณ์ประกอบฉากของคุณและคุณยังมี setState การออกแบบนี้ทำให้ง่ายขึ้นสำหรับผู้ที่มีพื้นหลัง React/NextJs เพื่อเปลี่ยนเป็น Angular หากใช้ห้องสมุดของเรา

ปลั๊กและเล่น

Angular สามารถรับภาษา verbose ที่ค่อนข้างเรามุ่งมั่นที่จะทำให้เชิงมุมง่ายขึ้นด้วย plug and play mentaility ด้วย plug and play ทุก compoonent มีอุปกรณ์ประกอบฉากเช่นเดียวกับในการตอบสนองอุปกรณ์ประกอบฉากนี้เป็นคลาสและคุณเพียงแค่ผ่าน prop to class เพื่อแสดงส่วนประกอบ

 // app.component.ts

// Standalone there are default values to see how the component works
props = new WMLInputZeroProps ( { } )

// To pass arguments/customize
props = new WMLInputZeroProps ( {
  datetime : new WMLInputZeroDatetimeProps ( {
    type : "datetime" ,
    min = new Date ( "[YOUR BIRTHDAY FOR EXAMPLE]" )
  } )
} ) 

// app.component.html
< wml-input-zero [props] = props >
</ wml-input-zero >

การอัปเดตที่คงที่และเป็นไปตาม:

• ตั้งแต่รอบ Angular 16.2 สำหรับทุกรุ่นเชิงมุมเราจึงสร้างไลบรารีเวอร์ชันใหม่ เวอร์ชันจะขึ้นอยู่กับ @Angular-Core ซึ่งหมายความว่าคุณสามารถมั่นใจได้ว่าห้องสมุดนั้นทันสมัยอยู่เสมอด้วยเวอร์ชันเชิงมุมล่าสุด ลงไปที่เวอร์ชันแพตช์ อย่างไรก็ตาม ณ วันที่ 18.1.3 ห้องสมุดได้รับการรวมเป็นหนึ่งเดียวสำหรับการใช้งานการผลิต

คอลเลกชันส่วนประกอบที่กว้างขวาง

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

ปรับแต่งได้และสามารถปรับแต่งได้

ส่วนประกอบได้รับการออกแบบให้ปรับแต่งได้ง่ายและสามารถปรับแต่งได้ช่วยให้คุณสามารถจัดแนวพวกเขากับแนวทางการสร้างแบรนด์และการออกแบบของแอปพลิเคชันของคุณได้ VIA การปรับเปลี่ยนตัวแปร CSS ที่เฉพาะเจาะจงสำหรับแต่ละองค์ประกอบที่คุณสามารถควบคุมได้จากรูปลักษณ์และความรู้สึกของส่วนประกอบ

-

พรีเมี่ยม / องค์กร

การทำให้เป็นสากล - ส่วนประกอบทั้งหมดเข้ากันได้กับ I18N ภายใต้ NGX -Translate ใช้ไฟล์ en.json เริ่มต้นในโครงการของคุณและอัปเดตและส่งสตริง i18n ไปยังคีย์ที่เหมาะสมในอุปกรณ์ประกอบฉากที่ส่งผ่านไปยังส่วนประกอบดูเวอร์ชันพรีเมี่ยมของไลบรารี

คำเตือน

• ไม่ได้ตั้งค่าแบบอักษรเพื่อให้คุณสามารถตั้งค่าแบบอักษรทั่วโลกได้โดยไม่ต้องกังวลกับการแทนที่
• "เวอร์ชันก่อนหน้าทั้งหมดใน changelog ไม่มีอยู่ทุกรุ่นเริ่มต้นที่ 18.1.3003 แม้ว่าจะมีแผนสำหรับการย้อนกลับไปยัง Angular ทุกรุ่นแพตช์ (ไม่ค้ำจุน) ใช้การติดตั้ง NPM-Verbose [ชื่อแพ็คเกจ]-สำหรับรุ่นที่เก่ากว่า 18

แพ็คเกจ

Windmillcode Angular Library นำเสนอส่วนประกอบที่หลากหลายซึ่งแต่ละชิ้นได้รับการออกแบบมาเพื่อตอบสนองความต้องการ UI ที่เฉพาะเจาะจงในแอปพลิเคชันเชิงมุมของคุณ ด้านล่างนี้เป็นรายการของส่วนประกอบที่มีอยู่พร้อมกับคำอธิบายสั้น ๆ :

• WML Components Base :

นี่คือแพ็คเกจพื้นฐานที่ห้องสมุดทั้งหมดของเรามุ่งเน้น รากฐานของมันคือ WMluiproperty บล็อกการสร้างขั้นพื้นฐานของแอปพลิเคชันใด ๆ ที่มีไว้เพื่อใช้สำหรับกรอบ JavaScript ทั้งหมดไม่เพียงแค่เชิงมุม จากที่นี่พื้นฐานของการปนเปื้อนภาพเคลื่อนไหวส่วนประกอบไดนามิกและอื่น ๆ ถูกสร้างขึ้น

• WML ส่วนประกอบเชิงมุมฐาน :

ขยายส่วนประกอบ WML ขึ้นอยู่กับการดูแลสำหรับนักพัฒนาเชิงมุม มีประโยชน์ในการรักษาความสอดคล้องภายใน codebase

• WML สาม :

JS สามตัวค่อนข้างมีความอดทนและไม่ใช่ทุกสิ่งที่คุณต้องการในการสร้างฉากมีไว้สำหรับคุณการเปลี่ยนแปลงนี้ด้วยห้องสมุด Three.js ของเรา ชั้นเรียนของเราจัดการกับคณิตศาสตร์และการใช้งานฟิสิกส์เพื่อให้คุณสามารถมุ่งเน้นไปที่การเพิ่มและวางวัตถุในฉาก

• แผนผัง WML :

แผนผังเชิงมุมของเราเองเพื่อสร้างชั้นเรียนเชิงมุมตามเทมเพลตโครงการเชิงมุมของเรา

• หีบเพลง WML :

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

• ปุ่ม WML :

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

• WML Carousel :

ส่วนประกอบม้าหมุนที่ช่วยให้การแสดงผลหลายรายการในแฟชั่นเลื่อนหรือหมุนเหมาะสำหรับแกลเลอรี่หรือจัดแสดงผลิตภัณฑ์หลายรายการ

• ชิป WML :

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

• ฟิลด์ WML :

ส่วนประกอบของฟิลด์ซึ่งอาจเป็นแบบฟอร์มซึ่งเป็นวิธีที่เป็นมาตรฐานในการป้อนข้อมูล

• ตัวจัดการไฟล์ WML :

ส่วนประกอบที่ครอบคลุมสำหรับการจัดการการโต้ตอบไฟล์รวมถึงการอัปโหลดการดาวน์โหลด (ใน backlog) และการแสดงข้อมูลไฟล์

• แบบฟอร์ม WML :

ส่วนประกอบหรือชุดของส่วนประกอบที่ออกแบบมาเพื่อสร้างรูปแบบที่สอดคล้องและใช้งานได้รวมถึงการควบคุมแบบฟอร์มต่างๆ

• WML Infinite Dropdown :

ส่วนประกอบแบบดรอปดาวน์ที่ขยายอย่างไม่สิ้นสุด เหมาะสำหรับเมนูที่มีเนื้อหาการนำทางจำนวนมาก

• อินพุต WML :

ส่วนประกอบอินพุตอเนกประสงค์สำหรับแบบฟอร์มให้วิธีการที่สม่ำเสมอในการรวบรวมอินพุตของผู้ใช้

• WML Mobile Nav :

ส่วนประกอบการนำทางที่ออกแบบมาโดยเฉพาะสำหรับส่วนต่อประสานผู้ใช้มือถือโดยให้เมนูที่เหมาะสมสำหรับหน้าจอขนาดเล็ก

• WML แจ้ง :

องค์ประกอบการแจ้งเตือนช่วยให้คุณแสดงการแจ้งเตือนข้อความหรือข้อมูลสำคัญอื่น ๆ ให้กับผู้ใช้

• ตัวเลือก WML :

ส่วนประกอบที่มีชุดของตัวเลือกที่เลือกได้อาจเป็นแบบเลื่อนลงหรือเลือกส่วนประกอบที่สูงขึ้น

• แผง WML :

ส่วนประกอบส่วนประกอบ flyout ที่ใช้ในการจัดหาเนื้อหาข้อมูลหรือการควบคุมแบบเสริมมักใช้ในแดชบอร์ดหรือเป็นส่วนหนึ่งของอินเทอร์เฟซที่ซับซ้อน

• WML Penrose :

ส่วนประกอบการโหลดแบบกำหนดเอง

• WML Popup :

ส่วนประกอบสำหรับการแสดงเนื้อหาป๊อปอัพเช่นโมดอล, บทสนทนาหรือคำแนะนำเครื่องมือ

• WML เลือก :

องค์ประกอบเลือกที่มีรายการตัวเลือกแบบเลื่อนลงสำหรับผู้ใช้ให้เลือก

• WML SliceBox :

ขึ้นอยู่กับ JQuery SliceBox วิธีการใช้งานม้าหมุนมากขึ้น

• ตาราง WML :

ส่วนประกอบของตารางที่ออกแบบมาสำหรับการแสดงข้อมูลตารางพร้อมคุณสมบัติรวมถึงการเรียงลำดับการกรองและการปนเปื้อน

• แท็บ WML :

ส่วนประกอบสำหรับการสร้างอินเทอร์เฟซแบบแท็บช่วยให้ผู้ใช้สามารถสลับระหว่างมุมมองหรือส่วนเนื้อหาที่แตกต่างกันภายในบริบทเดียวกัน

• WML สลับ :

ส่วนประกอบสวิตช์สลับซึ่งเป็นวิธีที่ใช้งานง่ายสำหรับผู้ใช้ในการเลือกแบบไบนารีเช่นการเปิดใช้งานการตั้งค่า/ปิดการใช้งาน

---

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

เริ่มต้น

• คลิกที่ลิงค์ใด ๆ ของส่วนประกอบที่คุณต้องการและติดตั้งด้วย NPM หรือตัวจัดการแพ็คเกจที่คุณต้องการ

เอกสาร

แต่ละส่วนประกอบได้รับการบันทึกไว้พร้อมรายละเอียดเกี่ยวกับวิธีการใช้คุณสมบัติอินพุต/เอาต์พุตและตัวปล่อยเหตุการณ์ หากต้องการดำน้ำลึกลงไปในส่วนประกอบเฉพาะให้ดูที่ส่วนเอกสารเอกสารเฉพาะ readme.md

การบริจาค

** ทำงานระหว่างดำเนินการ ** เรายินดีต้อนรับการมีส่วนร่วมในห้องสมุด Angular Windmillcode! ไม่ว่าจะเป็นการเพิ่มส่วนประกอบใหม่การเพิ่มส่วนที่มีอยู่หรือการรายงานข้อบกพร่องการมีส่วนร่วมของคุณมีค่าสำหรับเรา โปรดดูแนวทางการบริจาคของเราก่อนที่จะทำการร้องขอการดึง

• ดึง repo ที่ต้องการ
• หากโมดูลส่วนประกอบแทนที่ฟรีจาก free.module.ts ด้วยโมดูล TS
• เทอร์มินัล 1

 cd projects/[desired project]
npx ng build --watch

• เทอร์มินัล 2

 # wait for project to appear in dist
cd dist/[desired project]
npm link

ในผู้บริโภคคุณต้องเพิ่มเส้นทางไปยัง dist ในผู้บริโภค tsconfig.json

  "[FULL LIBRARY NAME FROM PACKAGE.JSON]" : [
    " [PATH TO REPO GENERATED DIST]/[LIBRAY FOLDER NAME] "
  ],
  // EXAMPLE
"@windmillcode/angular-wml-slicebox" : [
  " ../../../../windmillcode-Angular-CDK/dist/wml-slicebox "
],

ใบอนุญาต

Library Angular Windmillcode ได้รับใบอนุญาต MIT

ติดต่อ

หากคุณมีคำถามหรือข้อเสนอแนะใด ๆ โปรดเข้าร่วมกับเราใน Discord เรามักจะมองหาการปรับปรุงห้องสมุดของเราและช่วยเหลือชุมชนนักพัฒนา

เพลิดเพลินไปกับการสร้างด้วย Windmillcode Angular Library!