Needless UI

โอเพนซอร์ส · Angular 22 · React 19 · MIT

คอมโพเนนต์ UI ที่ออกแบบมาดีเกินความจำเป็น

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

เริ่มต้นใช้งาน ดูคอมโพเนนต์ทั้งหมด

สร้างขึ้นมาทำไม

  • ไม่มีรุ่นพรีเมียม

    ไทม์ไลน์ทรัพยากรและกิจกรรมที่เกิดซ้ำของ Scheduler รวมถึงการจัดกลุ่ม ข้อมูลแบบต้นไม้ และการส่งออกเป็น Excel ของตารางข้อมูล ใช้สัญญาอนุญาต MIT เหมือนส่วนอื่นทั้งหมด ไม่ต้องมี license key และไม่มีลายน้ำ หากกำลังย้ายมาจากไลบรารีแบบเสียเงิน อ่านคู่มือสำหรับ FullCalendar และ AG Grid ได้เลย

  • เอลิเมนต์เนทีฟมาก่อน

    <button nuiButton> คือปุ่มจริง ๆ ฟอร์ม คีย์บอร์ด และโปรแกรมอ่านหน้าจอจึงทำงานได้ตามปกติ เพราะไม่มีอะไรห่อหุ้มปุ่มไว้

  • สไตล์ชีตเดียว ใช้ได้ทุกเฟรมเวิร์ก

    คอมโพเนนต์เป็น CSS ธรรมดาใน cascade layer วันนี้ใช้กับ Angular ใช้กับ React ได้แล้วสำหรับ Scheduler กับตารางข้อมูล และใช้กับ HTML ธรรมดาได้เสมอ

  • CSS ของคุณชนะเสมอ

    ทุกอย่างอยู่ใน @layer nui สไตล์ของคุณจึงเขียนทับได้โดยไม่ต้องใช้ !important หรือแข่งกันเรื่อง specificity

  • เข้าถึงได้ตั้งแต่การออกแบบ

    ทุกคู่สีผ่านการตรวจตาม WCAG 2.2 AA ตั้งแต่ตอนสร้างชุดสี ส่วนโฟกัส โหมด forced colors และการลดการเคลื่อนไหวก็จัดการไว้ให้แล้ว

  • ปรับแต่งได้เกินความจำเป็น

    สปริง เอฟเฟกต์การกดและการปรากฏ รูปทรงมุม รัศมีมุม และความหนาแน่น ใช้ attribute เดียวกับทั้งแอป หรือ input เดียวต่อคอมโพเนนต์ บน design token มาตรฐานของ W3C

  • Angular ยุคใหม่

    รองรับ signal input และโหมด zoneless เรนเดอร์ฝั่งเซิร์ฟเวอร์ได้ และแยก entry point ให้แต่ละคอมโพเนนต์ แอปจึงรวมเฉพาะสิ่งที่ import เท่านั้น

คำสั่งเดียว แล้ว import อีกบรรทัดเดียว

รัน ng add เพื่อติดตั้งแพ็กเกจและ import สไตล์ชีตให้ แล้วใช้คอมโพเนนต์ในคอมโพเนนต์แบบ standalone ใดก็ได้

ng-add.sh
ng add @needless-ui/angular
usage.ts
import { Component } from '@angular/core';
import { NuiButton } from '@needless-ui/angular/button';

@Component({
  selector: 'app-root',
  imports: [NuiButton],
  template: `<button nuiButton (click)="save()">Save changes</button>`,
})
export class App {
  save() {}
}