เริ่มต้นใช้งาน

Needless UI ใช้งานได้กับ Angular 22 คอมโพเนนต์ต่าง ๆ เป็น directive แบบ standalone จึงไม่มีโมดูลที่ต้อง import

การติดตั้ง

เพิ่มแพ็กเกจ Angular พร้อมกับ Angular Aria และ CDK ซึ่งให้พฤติกรรมด้านคีย์บอร์ดและการเข้าถึง สไตล์ชีตมาพร้อมกับแพ็กเกจแล้ว

pnpm add @needless-ui/angular @angular/aria @angular/cdk

Import สไตล์

Import สไตล์ชีตครั้งเดียวใน src/styles.css สไตล์ชีตนี้มีทั้ง design token และคอมโพเนนต์ทุกตัว

/* src/styles.css */
@layer reset, nui, app;
@import '@needless-ui/css';

ทุกอย่างอยู่ใน @layer nui หากแอปของคุณมี reset ระดับโกลบอลอย่าง a { color: inherit } ให้ใส่ไว้ใน layer ที่ประกาศก่อน nui เพื่อไม่ให้เขียนทับคอมโพเนนต์

ใช้คอมโพเนนต์

Import directive ที่ต้องการจาก entry point ของแต่ละตัว แล้วเพิ่มลงใน imports ของคอมโพเนนต์

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

ขั้นตอนถัดไป

ดูคอมโพเนนต์เพื่อลองตัวอย่างสด หรืออ่านคู่มือการปรับธีมเพื่อปรับให้เข้ากับแบรนด์ของคุณ