कस्टमाइज़ेशन

हर कंपोनेंट का एक मिज़ाज होता है, जिसे आप बदल सकते हैं: वह किस स्प्रिंग से हरकत करता है, आपकी उँगली के नीचे बटन क्या करता है, डायलॉग और मेन्यू कैसे सामने आते हैं, उनके कोनों की आकृति और साइज़ क्या है, और वे कितनी जगह घेरते हैं। हर सेटिंग या तो एक एट्रिब्यूट है, जो किसी एलिमेंट के अंदर की हर चीज़ पर लागू होता है, या एक इनपुट, जो सिर्फ़ एक कंपोनेंट पर लागू होता है।

एक एट्रिब्यूट, पूरा सबट्री

पूरी ऐप के लिए 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 सपोर्ट नहीं करते, वे हर कोना गोल बनाते हैं।