Needless UI

Açık kaynak · Angular 22 · React 19 · MIT

Arayüz bileşenleri, gereğinden fazla özenle tasarlandı.

Yerel öğeler üzerine kurulu, framework’ten bağımsız tek bir stil dosyasıyla biçimlendirilen erişilebilir Angular bileşenleri. Başka kütüphanelerin ayrıca sattıkları da dahil hepsi MIT lisanslı: kaynak zaman çizelgeleri sunan bir planlayıcı ve gruplama ile Excel’e aktarma yapabilen bir veri tablosu.

Hemen başlayın Bileşenlere göz atın

Neden var?

  • Ücretli sürüm yok

    Planlayıcının kaynak zaman çizelgesi ve yinelenen etkinlikleri ile veri tablosunun gruplama, ağaç verisi ve Excel’e aktarma özellikleri de diğer her şey gibi MIT lisanslıdır: lisans anahtarı yok, filigran yok. Ücretli bir kütüphaneden mi geçiyorsunuz? FullCalendar ve AG Grid kılavuzlarını okuyun.

  • Önce yerel öğeler

    <button nuiButton> gerçek bir düğmedir. Etrafına hiçbir şey sarılmadığı için formlar, klavye ve ekran okuyucular sorunsuz çalışır.

  • Tek stil dosyası, her framework

    Bileşenler, CSS katmanlarına (cascade layers) yerleştirilmiş düz CSS’tir: bugün Angular, şimdilik planlayıcı ve veri tablosu için React, düz HTML ise her zaman.

  • CSS’iniz her zaman kazanır

    Her şey @layer nui içinde gelir; bu sayede kendi stilleriniz, !important kullanmadan ve özgüllük savaşlarına girmeden onu geçersiz kılar.

  • Yapısı gereği erişilebilir

    Palet oluşturulurken her renk çifti WCAG 2.2 AA ölçütlerine göre denetlenir. Odak, forced colors ve azaltılmış hareket sizin için halledilir.

  • Gereğinden fazla özelleştirilebilir

    Yaylar, basma efektleri, giriş animasyonları, köşe şekilleri, yarıçap ve yoğunluk: standart W3C tasarım token’ları üzerinde, tüm uygulama için tek bir nitelik ya da bileşen başına tek bir girdi.

  • Modern Angular

    Signal tabanlı girdiler, zoneless çalışma, sunucu tarafında render ve bileşen başına bir giriş noktası: uygulamalar yalnızca içe aktardıklarını paketler.

Bir komut, sonra bir içe aktarma

Paketi kurup stil dosyasını içe aktarmak için ng add komutunu çalıştırın, ardından bileşenleri herhangi bir standalone bileşende kullanın.

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() {}
}