Needless UI

ਓਪਨ ਸੋਰਸ · Angular 22 · MIT

UI ਕੰਪੋਨੈਂਟ, ਜਿਨ੍ਹਾਂ ਦੀ ਇੰਜੀਨੀਅਰਿੰਗ ਲੋੜ ਨਾਲੋਂ ਕਿਤੇ ਵਧੀਆ ਹੈ।

Needless UI ਇੱਕ ਫ਼ਰੇਮਵਰਕ-ਮੁਕਤ ਸਟਾਈਲਸ਼ੀਟ ਅਤੇ W3C ਡਿਜ਼ਾਈਨ ਟੋਕਨਾਂ ਨਾਲ ਨੇਟਿਵ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਦਾ ਹੈ। ਇਸ ਦੇ Angular ਡਾਇਰੈਕਟਿਵ Angular Aria ਤੋਂ ਵਿਹਾਰ ਜੋੜਦੇ ਹਨ, ਇਸ ਲਈ ਹਰ ਕੰਪੋਨੈਂਟ ਪਹਿਲੇ ਰੈਂਡਰ ਤੋਂ ਹੀ ਪਹੁੰਚਯੋਗ ਹੁੰਦਾ ਹੈ।

ਸ਼ੁਰੂ ਕਰੋ ਕੰਪੋਨੈਂਟ ਵੇਖੋ

ਇਹ ਕਿਉਂ ਬਣਿਆ

  • ਪਹਿਲਾਂ ਨੇਟਿਵ ਐਲੀਮੈਂਟ

    <button nuiButton> ਇੱਕ ਅਸਲੀ ਬਟਨ ਹੈ। ਇਸ ਦੁਆਲੇ ਕੁਝ ਵੀ ਲਪੇਟਿਆ ਨਹੀਂ ਜਾਂਦਾ, ਇਸ ਲਈ ਫ਼ਾਰਮ, ਕੀ-ਬੋਰਡ ਅਤੇ ਸਕ੍ਰੀਨ ਰੀਡਰ ਠੀਕ ਕੰਮ ਕਰਦੇ ਹਨ।

  • ਇੱਕ ਸਟਾਈਲਸ਼ੀਟ, ਹਰ ਫ਼ਰੇਮਵਰਕ

    ਕੰਪੋਨੈਂਟ ਕੈਸਕੇਡ ਲੇਅਰਾਂ ਵਿੱਚ ਲਿਖੀ ਸਾਦੀ CSS ਹਨ: ਅੱਜ Angular, ਅੱਗੇ React, ਅਤੇ ਸਾਦਾ HTML ਹਮੇਸ਼ਾ।

  • ਜਿੱਤ ਹਮੇਸ਼ਾ ਤੁਹਾਡੀ CSS ਦੀ

    ਸਭ ਕੁਝ @layer nui ਦੇ ਅੰਦਰ ਆਉਂਦਾ ਹੈ, ਇਸ ਲਈ ਤੁਹਾਡੇ ਆਪਣੇ ਸਟਾਈਲ !important ਜਾਂ ਸਪੈਸੀਫ਼ਿਸਿਟੀ ਦੀ ਖਿੱਚੋਤਾਣ ਤੋਂ ਬਿਨਾਂ ਇਸ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰ ਦਿੰਦੇ ਹਨ।

  • ਬਣਤਰ ਤੋਂ ਹੀ ਪਹੁੰਚਯੋਗ

    ਪੈਲੇਟ ਬਣਾਉਣ ਵੇਲੇ ਹਰ ਰੰਗ-ਜੋੜੀ ਨੂੰ WCAG 2.2 AA ਮੁਤਾਬਕ ਜਾਂਚਿਆ ਜਾਂਦਾ ਹੈ। ਫ਼ੋਕਸ, ਫ਼ੋਰਸਡ ਕਲਰਜ਼ ਅਤੇ ਰਿਡਿਊਸਡ ਮੋਸ਼ਨ ਦਾ ਧਿਆਨ ਆਪਣੇ-ਆਪ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ।

  • ਬੇਲੋੜੀ ਹੱਦ ਤੱਕ ਕਸਟਮਾਈਜ਼ੇਬਲ

    ਸਪ੍ਰਿੰਗਾਂ, ਦਬਾਉਣ ਦੇ ਇਫ਼ੈਕਟ, ਐਂਟਰੀ ਐਨੀਮੇਸ਼ਨ, ਕੋਨਿਆਂ ਦੀ ਸ਼ਕਲ, ਰੇਡੀਅਸ ਅਤੇ ਡੈਨਸਿਟੀ: ਪੂਰੀ ਐਪ ਲਈ ਇੱਕ ਐਟਰੀਬਿਊਟ, ਜਾਂ ਹਰ ਕੰਪੋਨੈਂਟ ਲਈ ਇੱਕ ਇਨਪੁੱਟ, ਮਿਆਰੀ W3C ਡਿਜ਼ਾਈਨ ਟੋਕਨਾਂ ’ਤੇ ਅਧਾਰਤ।

  • ਆਧੁਨਿਕ Angular

    ਸਿਗਨਲ ਇਨਪੁੱਟ, ਜ਼ੋਨਲੈੱਸ, ਸਰਵਰ ਰੈਂਡਰਿੰਗ ਅਤੇ ਹਰ ਕੰਪੋਨੈਂਟ ਦਾ ਆਪਣਾ ਐਂਟਰੀ ਪੁਆਇੰਟ, ਤਾਂ ਜੋ ਐਪ ਵਿੱਚ ਸਿਰਫ਼ ਇੰਪੋਰਟ ਕੀਤਾ ਕੋਡ ਹੀ ਜਾਵੇ।

ਦੋ ਇੰਪੋਰਟ, ਤੇ ਕੰਮ ਖ਼ਤਮ

ਪੈਕੇਜ ਜੋੜੋ, ਸਟਾਈਲਸ਼ੀਟ ਇੱਕ ਵਾਰ ਇੰਪੋਰਟ ਕਰੋ, ਫਿਰ ਕਿਸੇ ਵੀ ਸਟੈਂਡਅਲੋਨ ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਕੰਪੋਨੈਂਟ ਵਰਤੋ।

install.sh
pnpm add @needless-ui/angular @angular/aria @angular/cdk
usage.ts
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() {}
}