Pagsisimula

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

Pag-install

Patakbuhin ang ng add. Idinadagdag nito ang Angular package kasama ang Angular Aria at ang CDK, na nagbibigay ng keyboard behavior at accessibility, at ini-import nito ang stylesheet sa global styles mo.

ng add @needless-ui/angular

Kung gusto mo itong i-set up nang mano-mano, idagdag ang mga package, saka i-import ang mga style gaya ng ipinapakita sa ibaba.

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

I-import ang mga style

I-import nang isang beses ang stylesheet sa pinakaitaas ng src/styles.css, kung saan din ito inilalagay ng ng add. Sa isang Sass stylesheet, isulat na lang ang @use '@needless-ui/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.

Kung gumagamit ka ng Tailwind CSS, ideklara ang nui pagkatapos ng base layer ng Tailwind at bago ang mga utility nito: sa gayon, hindi na mabubura ng reset ng Tailwind ang style ng mga component, at nananaig pa rin sa mga ito ang mga utility class. ng add na mismo ang gumagawa nito kapag nakita nitong may Tailwind.

/* src/styles.css */
@layer theme, base, nui, components, utilities;
@import '@needless-ui/css';
@import 'tailwindcss';

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.