ప్రతి కాంపోనెంట్‌కు మీరు మార్చుకోగల ఒక వ్యక్తిత్వం ఉంటుంది: అది కదిలే స్ప్రింగ్, మీ వేలి కింద బటన్ ఏం చేస్తుందనేది, డైలాగ్‌లు, మెనూలు ఎలా వస్తాయనేది, వాటి మూలల ఆకారం, పరిమాణం, అవి ఎంత స్థలం తీసుకుంటాయనేది. వీటిలో ప్రతిదాన్నీ ఒక ఎలిమెంట్ లోపలి అన్నిటికీ ఒక అట్రిబ్యూట్‌తో, లేదా ఒక్క కాంపోనెంట్‌కు ఒక ఇన్‌పుట్‌తో మార్చవచ్చు.
ఒక అట్రిబ్యూట్, మొత్తం సబ్‌ట్రీకి
మొత్తం యాప్ కోసం data-nui-* అట్రిబ్యూట్‌లను <body> పై, లేదా ఒక భాగం కోసం ఏ ఎలిమెంట్‌పైనైనా ఉంచండి. అత్యంత సమీపంలోనిదే గెలుస్తుంది, కాబట్టి వాటిని నెస్ట్ చేయవచ్చు. అవి CSS కస్టమ్ ప్రాపర్టీలను మాత్రమే సెట్ చేస్తాయి, కాబట్టి ఏ ఫ్రేమ్‌వర్క్‌తోనైనా, లేదా ఫ్రేమ్‌వర్క్ లేకుండానైనా ఒకేలా పనిచేస్తాయి.
<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 ఇవే విలువలను ఇన్‌పుట్‌లుగా తీసుకుంటాయి. మీరు సెట్ చేయని ఇన్‌పుట్‌లు వాటి చుట్టూ ఉన్న అట్రిబ్యూట్‌లను అనుసరిస్తాయి.
<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 గా కంపైల్ అయ్యే స్ప్రింగ్‌లు
కదలిక అంటే స్ప్రింగ్ భౌతికశాస్త్రం: వ్యవధి, కర్వ్‌లకు బదులుగా దృఢత్వం, అవమందనం, ద్రవ్యరాశి. టోకెన్ కంపైలర్ ప్రతి స్ప్రింగ్ సమీకరణాన్ని పరిష్కరించి, దాన్ని స్థిరపడటానికి పట్టే సమయంగా, ఒక linear() ఈజింగ్‌గా CSS లో రాస్తుంది; కాబట్టి అది JavaScript లేకుండానే కంపోజిటర్‌పై నడుస్తుంది. --nui-spring-snappy నుంచి --nui-spring-mechanical వరకు ఆరు స్ప్రింగ్‌లు టోకెన్‌లుగా వస్తాయి; వాడుకలో ఉన్నదాన్ని --nui-motion కలిగి ఉంటుంది.
మరే స్ప్రింగ్ అయినా ఒక్క ఇన్‌పుట్ దూరంలోనే ఉంది. Angular అదే సాల్వర్‌తో దాన్ని రన్‌టైమ్‌లో కంపైల్ చేస్తుంది, మీ సొంత ఎలిమెంట్‌ల కోసం CSS ను springTransition() అందిస్తుంది.
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 లకు ఏ సంఖ్య అయినా.
.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 సపోర్ట్ లేని బ్రౌజర్‌లు ప్రతి మూలనూ గుండ్రంగా గీస్తాయి.