ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ

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

ਇੱਕ ਐਟਰੀਬਿਊਟ, ਪੂਰਾ ਸਬ-ਟ੍ਰੀ

ਪੂਰੀ ਐਪ ਲਈ data-nui-* ਐਟਰੀਬਿਊਟ <body> ’ਤੇ ਲਗਾਓ, ਜਾਂ ਉਸ ਦੇ ਕਿਸੇ ਇੱਕ ਹਿੱਸੇ ਲਈ ਕਿਸੇ ਵੀ ਐਲੀਮੈਂਟ ’ਤੇ। ਸਭ ਤੋਂ ਨੇੜਲਾ ਐਟਰੀਬਿਊਟ ਲਾਗੂ ਹੁੰਦਾ ਹੈ, ਇਸ ਲਈ ਇਨ੍ਹਾਂ ਨੂੰ ਨੈਸਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਇਹ ਸਿਰਫ਼ CSS ਕਸਟਮ ਪ੍ਰਾਪਰਟੀਆਂ ਸੈੱਟ ਕਰਦੇ ਹਨ, ਇਸ ਲਈ ਕਿਸੇ ਵੀ ਫ਼ਰੇਮਵਰਕ ਨਾਲ, ਜਾਂ ਫ਼ਰੇਮਵਰਕ ਤੋਂ ਬਿਨਾਂ ਵੀ, ਇੱਕੋ ਜਿਹਾ ਕੰਮ ਕਰਦੇ ਹਨ।

customize.html

<body data-nui-motion="bouncy" data-nui-corners="squircle">
  <!-- Everything here bounces and has squircle corners… -->
  <main data-nui-press="squish" data-nui-density="compact">
    <!-- …buttons in here squish, and controls are compact… -->
  </main>
  <aside data-nui-motion="none" data-nui-radius="none">
    <!-- …and nothing in here moves or has rounded corners. -->
  </aside>
</body>

ਸਿਰਫ਼ ਇੱਕ ਕੰਪੋਨੈਂਟ

Angular ਵਿੱਚ nuiButton, nuiDialog ਅਤੇ nuiMenu ਇਹੀ ਵੈਲਿਊ ਇਨਪੁੱਟਾਂ ਵਜੋਂ ਲੈਂਦੇ ਹਨ। ਜੋ ਇਨਪੁੱਟ ਤੁਸੀਂ ਸੈੱਟ ਨਹੀਂ ਕਰਦੇ, ਉਹ ਆਲੇ-ਦੁਆਲੇ ਦੇ ਐਟਰੀਬਿਊਟਾਂ ਤੋਂ ਵੈਲਿਊ ਲੈਂਦੇ ਹਨ।

customize-inputs.html

<button nuiButton press="rubber" motion="elastic">Boing</button>

<dialog nuiDialog [(open)]="editing" enter="flip" corners="squircle">…</dialog>

<button nuiButton [nuiMenuTrigger]="actions">Actions</button>
<div nuiMenu #actions="ngMenu" enter="unfold" motion="mechanical">…</div>

CSS ਵਿੱਚ ਕੰਪਾਈਲ ਹੁੰਦੀਆਂ ਸਪ੍ਰਿੰਗਾਂ

ਹਿਲਜੁਲ ਸਪ੍ਰਿੰਗ ਫ਼ਿਜ਼ਿਕਸ ਨਾਲ ਤੈਅ ਹੁੰਦੀ ਹੈ: ਮਿਆਦ ਅਤੇ ਕਰਵ ਦੀ ਥਾਂ ਕਠੋਰਤਾ, ਅਵਮੰਦਨ ਅਤੇ ਪੁੰਜ। ਟੋਕਨ ਕੰਪਾਈਲਰ ਹਰ ਸਪ੍ਰਿੰਗ ਨੂੰ ਹੱਲ ਕਰਕੇ CSS ਵਿੱਚ ਲਿਖਦਾ ਹੈ: ਟਿਕਣ ਵਿੱਚ ਲੱਗਣ ਵਾਲਾ ਸਮਾਂ ਅਤੇ ਇੱਕ linear() ਈਜ਼ਿੰਗ। ਇਸ ਲਈ ਇਹ JavaScript ਤੋਂ ਬਿਨਾਂ ਕੰਪੋਜ਼ਿਟਰ ’ਤੇ ਚੱਲਦੀ ਹੈ। ਛੇ ਸਪ੍ਰਿੰਗਾਂ ਟੋਕਨਾਂ ਵਜੋਂ ਨਾਲ ਆਉਂਦੀਆਂ ਹਨ, --nui-spring-snappy ਤੋਂ --nui-spring-mechanical ਤੱਕ, ਅਤੇ ਵਰਤੋਂ ਵਿੱਚ ਆ ਰਹੀ ਸਪ੍ਰਿੰਗ --nui-motion ਵਿੱਚ ਰਹਿੰਦੀ ਹੈ।

ਕੋਈ ਵੀ ਹੋਰ ਸਪ੍ਰਿੰਗ ਬੱਸ ਇੱਕ ਇਨਪੁੱਟ ਦੀ ਦੂਰੀ ’ਤੇ ਹੈ। Angular ਉਸ ਨੂੰ ਰਨਟਾਈਮ ’ਤੇ ਉਸੇ ਸੌਲਵਰ ਨਾਲ ਕੰਪਾਈਲ ਕਰਦਾ ਹੈ, ਅਤੇ springTransition() ਤੁਹਾਡੇ ਆਪਣੇ ਐਲੀਮੈਂਟਾਂ ਲਈ CSS ਦਿੰਦਾ ਹੈ।

customize-spring.ts

import { springTransition } from '@needless-ui/angular';

// In a template, any spring is an input:
// <button nuiButton [spring]="{ stiffness: 900, damping: 12 }">Save</button>

// Anywhere else, compile it yourself:
const wobbly = springTransition({ stiffness: 120, damping: 4, mass: 1.2 });
// '4152ms linear(0, 0.014 0.41%, …, 1)'

const card = document.querySelector<HTMLElement>('.card')!;
card.style.transition = `transform ${wobbly}`;

ਵਿਚਕਾਰ ਦੀ ਕੋਈ ਵੀ ਵੈਲਿਊ

ਪ੍ਰੀਸੈੱਟ ਸਿਰਫ਼ ਸ਼ਾਰਟਕੱਟ ਹਨ। ਬਾਕੀ ਕਿਸੇ ਵੀ ਚੀਜ਼ ਲਈ ਕਸਟਮ ਪ੍ਰਾਪਰਟੀਆਂ ਖ਼ੁਦ ਸੈੱਟ ਕਰੋ: --nui-press ਅਤੇ --nui-enter ਲਈ ਕੋਈ ਵੀ ਟ੍ਰਾਂਸਫ਼ਾਰਮ, --nui-radius-scale ਅਤੇ --nui-density ਲਈ ਕੋਈ ਵੀ ਸੰਖਿਆ।

customize.css

.checkout {
  --nui-motion: var(--nui-spring-jelly);
  --nui-press: scale(0.92) rotate(-2deg);
  --nui-enter: translateY(100%);
  --nui-radius-scale: 1.5;
  --nui-density: 1.1;
}

ਪਹੁੰਚਯੋਗਤਾ

ਜਦੋਂ ਸਿਸਟਮ ਘੱਟ ਹਿਲਜੁਲ ਮੰਗਦਾ ਹੈ, ਤਾਂ ਸਪ੍ਰਿੰਗਾਂ ਪਲ ਵਿੱਚ ਪੂਰੀਆਂ ਹੋ ਜਾਂਦੀਆਂ ਹਨ, ਅਤੇ ਦਬਾਉਣ ਤੇ ਐਂਟਰੀ ਦੇ ਇਫ਼ੈਕਟ ਹਿੱਲਣਾ ਬੰਦ ਕਰ ਦਿੰਦੇ ਹਨ। ਡੈਨਸਿਟੀ ਕਿਸੇ ਵੀ ਕੰਟਰੋਲ ਨੂੰ WCAG 2.2 ਦੇ 24px ਟਾਰਗੈੱਟ ਸਾਈਜ਼ ਤੋਂ ਕਦੇ ਛੋਟਾ ਨਹੀਂ ਹੋਣ ਦਿੰਦੀ, ਅਤੇ ਕੋਈ ਵੀ ਪ੍ਰੀਸੈੱਟ ਰੰਗਾਂ ਨੂੰ ਨਹੀਂ ਛੂੰਹਦਾ, ਇਸ ਲਈ ਕੰਟ੍ਰਾਸਟ ਦੀ ਹਰ ਜਾਂਚ ਪਹਿਲਾਂ ਵਾਂਗ ਖਰੀ ਉਤਰਦੀ ਹੈ। ਜੋ ਬ੍ਰਾਊਜ਼ਰ corner-shape ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ, ਉਹ ਹਰ ਕੋਨਾ ਗੋਲ ਬਣਾਉਂਦੇ ਹਨ।