Pagsisimula

Gumagana ang Needless UI sa Angular 22. Standalone directive ang mga component, kaya walang module na kailangang i-import.

Pag-install

Idagdag ang Angular package kasama ang Angular Aria at ang CDK, na nagbibigay ng keyboard behavior at accessibility. Kasama na rito ang stylesheet.

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

I-import ang mga style

I-import nang isang beses ang stylesheet sa src/styles.css. Kasama rito ang mga design token at ang bawat component.

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

Nasa loob ng @layer nui ang lahat. Kung may mga global reset ang app mo gaya ng a { color: inherit }, ilagay ang mga ito sa isang layer na idineklara bago ang nui para hindi nila ma-override ang mga component.

Gumamit ng component

I-import ang mga directive na kailangan mo mula sa kanilang mga entry point at idagdag ang mga ito sa imports ng iyong 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() {}
}

Mga susunod na hakbang

Tingnan ang mga component para sa mga live na halimbawa, o basahin ang gabay sa theming para maitugma ang mga ito sa brand mo.