Chaque composant a une personnalité que vous pouvez changer : le ressort qui l’anime, ce que fait un bouton sous votre doigt, la façon dont les boîtes de dialogue et les menus entrent en scène, la forme et la taille de leurs coins, et la place qu’ils occupent. Chaque trait se règle avec un attribut pour tout ce que contient un élément, ou avec un input pour un seul composant.
Un attribut, tout un sous-arbre
Placez les attributs data-nui-* sur <body> pour toute l’application, ou sur n’importe quel élément pour une partie seulement. Le plus proche l’emporte, ils peuvent donc s’imbriquer. Comme ils ne font que définir des propriétés personnalisées CSS, ils fonctionnent de la même façon avec n’importe quel framework, et même sans.
<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 seul composant
En Angular, nuiButton, nuiDialog et nuiMenu acceptent les mêmes valeurs sous forme d’inputs. Les inputs que vous ne définissez pas suivent les attributs qui entourent le composant.
<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>Des ressorts compilés en CSS
Le mouvement repose sur la physique des ressorts : raideur, amortissement et masse, au lieu d’une durée et d’une courbe. Le compilateur de tokens résout chaque ressort et l’écrit en CSS sous la forme d’un temps de stabilisation et d’une fonction d’easing linear() : l’animation tourne ainsi sur le compositeur, sans JavaScript. Six ressorts sont fournis sous forme de tokens, de --nui-spring-snappy à --nui-spring-mechanical, et --nui-motion contient celui qui est actif.
Tout autre ressort n’est qu’à un input de distance. Angular le compile à l’exécution avec le même solveur, et springTransition() vous fournit le CSS pour vos propres éléments.
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}`;Tout ce qu’il y a entre les deux
Les préréglages sont des raccourcis. Pour tout le reste, définissez vous-même les propriétés personnalisées : n’importe quelle transformation pour --nui-press et --nui-enter, n’importe quel nombre pour --nui-radius-scale et --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;
}Accessibilité
Quand le système demande moins d’animations, les ressorts deviennent instantanés, et les effets d’appui et les animations d’entrée ne bougent plus. La densité ne fait jamais passer un élément interactif sous la taille de cible minimale de 24 px des WCAG 2.2, et aucun préréglage ne touche aux couleurs : toutes les vérifications de contraste restent valables. Les navigateurs qui ne prennent pas en charge corner-shape dessinent tous les coins arrondis.