Needless UI

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

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

Needless UI กำหนดสไตล์ให้เอลิเมนต์เนทีฟด้วย design token ของ W3C และสไตล์ชีตเดียวที่ไม่ผูกกับเฟรมเวิร์กใด ๆ ส่วน directive ของ Angular จะเพิ่มพฤติกรรมจาก Angular Aria คอมโพเนนต์ทุกตัวจึงเข้าถึงได้ตั้งแต่การเรนเดอร์ครั้งแรก

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

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

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

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

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

    คอมโพเนนต์เป็น CSS ธรรมดาใน cascade layer วันนี้ใช้กับ Angular ต่อไปคือ React และใช้กับ 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 แค่สองบรรทัดก็เสร็จ

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

install.sh
pnpm add @needless-ui/angular @angular/aria @angular/cdk
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() {}
}