May personalidad ang bawat component na puwede mong baguhin: ang spring na nagpapagalaw dito, ang ginagawa ng button sa ilalim ng daliri mo, kung paano lumilitaw ang mga dialog at menu, ang hugis at laki ng kanilang mga sulok, at kung gaano kalaking espasyo ang kinukuha nila. Bawat isa ay isang attribute para sa lahat ng nasa loob ng isang element, o isang input para sa iisang component.
Isang attribute, buong subtree
Ilagay ang mga data-nui-* attribute sa <body> para sa buong app, o sa kahit anong element para sa isang bahagi lang nito. Ang pinakamalapit ang nasusunod, kaya puwede silang i-nest. CSS custom property lang ang sine-set nila, kaya pareho ang paggana nila sa kahit anong framework, o kahit walang framework.
<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>Iisang component
Sa Angular, tumatanggap ang nuiButton, nuiDialog at nuiMenu ng parehong mga value bilang input. Sinusunod ng mga input na hindi mo sine-set ang mga attribute na nakapaligid sa kanila.
<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>Mga spring na kino-compile sa CSS
Spring physics ang galaw: tigas, damping at masa sa halip na duration at curve. Kinakalkula ng token compiler ang bawat spring at isinusulat ito sa CSS bilang tagal bago ito tumigil at isang linear() easing, kaya tumatakbo ito sa compositor nang walang JavaScript. Anim na spring ang kasama bilang mga token, mula --nui-spring-snappy hanggang --nui-spring-mechanical, at hawak ng --nui-motion ang kasalukuyang ginagamit.
Isang input lang ang kailangan para sa kahit anong ibang spring. Kino-compile ito ng Angular sa runtime gamit ang parehong solver, at ibinibigay sa iyo ng springTransition() ang CSS para sa sarili mong mga element.
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}`;Lahat ng nasa pagitan
Mga shortcut lang ang mga preset. Para sa iba pa, ikaw na mismo ang mag-set ng mga CSS custom property: kahit anong transform para sa --nui-press at --nui-enter, kahit anong numero para sa --nui-radius-scale at --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;
}Accessibility
Kapag humiling ang system ng reduced motion, agad na natatapos ang mga spring, at hindi na gumagalaw ang mga press effect at paglitaw. Hindi kailanman pinapaliit ng density ang isang control nang lampas sa 24px na target size ng WCAG 2.2, at walang preset na nagbabago ng kulay, kaya pasado pa rin ang bawat contrast check. Ginagawang bilog ng mga browser na walang corner-shape ang bawat sulok.