कस्टमायझेशन

प्रत्येक कंपोनंटचा एक स्वभाव असतो, जो आपण बदलू शकता: तो कोणत्या स्प्रिंगने हालचाल करतो, आपल्या बोटाखाली बटण काय करते, डायलॉग आणि मेनू कसे अवतरतात, त्यांच्या कोपऱ्यांची आकृती आणि आकार, आणि ते किती जागा व्यापतात. यातील प्रत्येक सेटिंग म्हणजे एकतर एखाद्या एलिमेंटमधील सर्व गोष्टींना लागू होणारा एक ॲट्रिब्यूट, किंवा फक्त एका कंपोनंटला लागू होणारा एक इनपुट.

एक ॲट्रिब्यूट, संपूर्ण सबट्री

संपूर्ण ॲपसाठी 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 सपोर्ट न करणारे ब्राउझर प्रत्येक कोपरा गोल काढतात.