શરૂઆત

Needless UI, Angular 22 સાથે કામ કરે છે. કમ્પોનન્ટ્સ standalone ડાયરેક્ટિવ્સ છે, તેથી ઇમ્પોર્ટ કરવા માટે કોઈ મૉડ્યૂલ નથી.

ઇન્સ્ટૉલેશન

ng add ચલાવો. તે કીબોર્ડ અને ઍક્સેસિબિલિટી વર્તન પૂરું પાડતા Angular Aria અને CDK સાથે Angular પૅકેજ ઉમેરે છે, અને તમારી ગ્લોબલ સ્ટાઇલ્સમાં સ્ટાઇલશીટ ઇમ્પોર્ટ કરે છે.

ng add @needless-ui/angular

તેના બદલે જાતે સેટઅપ કરવું હોય, તો પૅકેજ ઉમેરો અને પછી નીચે બતાવ્યા પ્રમાણે સ્ટાઇલ્સ ઇમ્પોર્ટ કરો.

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

સ્ટાઇલ્સ ઇમ્પોર્ટ કરો

સ્ટાઇલશીટ src/styles.css ની સૌથી ઉપર એક જ વાર ઇમ્પોર્ટ થાય છે, જ્યાં ng add તેને મૂકે છે. Sass સ્ટાઇલશીટમાં તેના બદલે @use '@needless-ui/css'; લખો. Needless UI ની સ્ટાઇલશીટમાં ડિઝાઇન ટોકન્સ અને બધા કમ્પોનન્ટ્સ સમાયેલા છે.

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

બધું @layer nui ની અંદર આવે છે. જો તમારી ઍપમાં a { color: inherit } જેવા ગ્લોબલ રીસેટ હોય, તો તે કમ્પોનન્ટ્સને ઓવરરાઇડ ન કરે એ માટે તેમને nui પહેલાં જાહેર કરેલા લેયરમાં મૂકો.

જો તમે Tailwind CSS વાપરતા હો, તો nui ને Tailwind ના base લેયર પછી અને તેની યુટિલિટીઝ પહેલાં જાહેર કરો: આમ કરવાથી Tailwind ની રીસેટ સ્ટાઇલ્સ કમ્પોનન્ટ્સને ઓવરરાઇડ કરી શકતી નથી, અને યુટિલિટી ક્લાસ હજી પણ તેમના પર પ્રાથમિકતા ધરાવે છે. Tailwind મળે ત્યારે ng add આ જાતે જ કરી દે છે.

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

કમ્પોનન્ટ વાપરો

તમને જોઈતા ડાયરેક્ટિવ્સ તેમના એન્ટ્રી પૉઇન્ટ્સમાંથી ઇમ્પોર્ટ કરો અને તમારા કમ્પોનન્ટના 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() {}
}

આગળનાં પગલાં

લાઇવ ઉદાહરણો માટે કમ્પોનન્ટ્સ જુઓ, અથવા તમારી બ્રાન્ડ સાથે મેળ બેસાડવા થીમિંગ માર્ગદર્શિકા વાંચો.