Bắt đầu sử dụng

Needless UI hoạt động với Angular 22. Các component là standalone directive, nên không cần import module nào.

Cài đặt

Thêm gói Angular cùng với Angular Aria và CDK, hai thư viện cung cấp hành vi bàn phím và khả năng tiếp cận. Stylesheet đi kèm sẵn trong gói.

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

Import style

Import stylesheet một lần trong src/styles.css. Stylesheet này bao gồm các design token và mọi component.

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

Mọi thứ đều nằm trong @layer nui. Nếu ứng dụng của bạn có các reset toàn cục như a { color: inherit }, hãy đặt chúng trong một layer được khai báo trước nui để chúng không ghi đè component.

Sử dụng component

Import các directive bạn cần từ entry point tương ứng và thêm chúng vào imports của component.

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

Bước tiếp theo

Xem các component để thử ví dụ trực tiếp, hoặc đọc hướng dẫn tùy chỉnh theme để khớp với thương hiệu của bạn.