Needless UI

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

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

ਪਹੁੰਚਯੋਗ Angular ਕੰਪੋਨੈਂਟ, ਜੋ ਨੇਟਿਵ ਐਲੀਮੈਂਟਾਂ ’ਤੇ ਬਣੇ ਹਨ ਅਤੇ ਇੱਕ ਫ਼ਰੇਮਵਰਕ-ਮੁਕਤ ਸਟਾਈਲਸ਼ੀਟ ਨਾਲ ਸਟਾਈਲ ਕੀਤੇ ਗਏ ਹਨ। ਸਭ ਕੁਝ MIT ਲਾਇਸੰਸ ਅਧੀਨ ਹੈ, ਉਹ ਵੀ ਜੋ ਹੋਰ ਲਾਇਬ੍ਰੇਰੀਆਂ ਵੱਖਰਾ ਵੇਚਦੀਆਂ ਹਨ: ਰਿਸੋਰਸ ਟਾਈਮਲਾਈਨਾਂ ਵਾਲਾ ਸ਼ਡਿਊਲਰ, ਅਤੇ ਸਮੂਹਬੰਦੀ ਤੇ Excel ਐਕਸਪੋਰਟ ਵਾਲਾ ਡਾਟਾ ਗ੍ਰਿਡ।

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

ਇਹ ਕਿਉਂ ਬਣਿਆ

  • ਕੋਈ ਪ੍ਰੀਮੀਅਮ ਪਲਾਨ ਨਹੀਂ

    ਸ਼ਡਿਊਲਰ ਦੀ ਰਿਸੋਰਸ ਟਾਈਮਲਾਈਨ ਅਤੇ ਵਾਰ-ਵਾਰ ਹੋਣ ਵਾਲੇ ਇਵੈਂਟ, ਅਤੇ ਡਾਟਾ ਗ੍ਰਿਡ ਦੀ ਸਮੂਹਬੰਦੀ, ਟ੍ਰੀ ਡਾਟਾ ਅਤੇ Excel ਐਕਸਪੋਰਟ ਵੀ ਬਾਕੀ ਸਭ ਵਾਂਗ MIT ਲਾਇਸੰਸ ਅਧੀਨ ਹਨ: ਨਾ ਕੋਈ ਲਾਇਸੰਸ ਕੁੰਜੀ, ਨਾ ਕੋਈ ਵਾਟਰਮਾਰਕ। ਪੈਸੇ ਲੈਣ ਵਾਲੀ ਕਿਸੇ ਲਾਇਬ੍ਰੇਰੀ ਤੋਂ ਆ ਰਹੇ ਹੋ? FullCalendar ਅਤੇ AG Grid ਤੋਂ ਆਉਣ ਲਈ ਗਾਈਡਾਂ ਪੜ੍ਹੋ।

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

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

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

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

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

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

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

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

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

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

  • ਆਧੁਨਿਕ Angular

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

ਇੱਕ ਕਮਾਂਡ, ਫਿਰ ਇੱਕ ਇੰਪੋਰਟ

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

ng-add.sh
ng add @needless-ui/angular
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() {}
}