Cada componente tiene una personalidad que puedes cambiar: el resorte con el que se mueve, lo que hace un botón bajo tu dedo, cómo entran en escena los diálogos y los menús, la forma y el tamaño de sus esquinas, y cuánto espacio ocupa. Cada rasgo es un atributo para todo lo que hay dentro de un elemento, o un input para un solo componente.
Un atributo, todo un subárbol
Pon los atributos data-nui-* en <body> para toda la aplicación, o en cualquier elemento para una parte de ella. Gana el más cercano, por lo que se pueden anidar. Solo definen propiedades personalizadas de CSS, así que funcionan igual con cualquier framework, o sin ninguno.
<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>Un solo componente
En Angular, nuiButton, nuiDialog y nuiMenu aceptan los mismos valores como inputs. Los inputs que no definas toman el valor de los atributos que rodean al componente.
<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>Resortes compilados a CSS
El movimiento es física de resortes: rigidez, amortiguamiento y masa en lugar de una duración y una curva. El compilador de tokens resuelve cada resorte y lo escribe en CSS como el tiempo que tarda en estabilizarse y una función de easing linear(), así que se ejecuta en el compositor sin JavaScript. Seis resortes vienen incluidos como tokens, de --nui-spring-snappy a --nui-spring-mechanical, y --nui-motion contiene el que está en uso.
Cualquier otro resorte está a un input de distancia. Angular lo compila en tiempo de ejecución con el mismo solucionador, y springTransition() te da el CSS para tus propios elementos.
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}`;Cualquier punto intermedio
Los valores predefinidos son atajos. Para todo lo demás, define tú mismo las propiedades personalizadas: cualquier transformación para --nui-press y --nui-enter, cualquier número para --nui-radius-scale y --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;
}Accesibilidad
Cuando el sistema pide reducir el movimiento, los resortes se vuelven instantáneos, y ni los efectos al pulsar ni las animaciones de entrada se mueven. La densidad nunca deja un control por debajo del tamaño mínimo de objetivo de 24 px de las WCAG 2.2, y ningún valor predefinido toca los colores, así que todas las comprobaciones de contraste se siguen cumpliendo. Los navegadores sin corner-shape dibujan todas las esquinas redondeadas.