Her bileşenin değiştirebileceğiniz bir kişiliği vardır: hareketini belirleyen yay, bir düğmenin parmağınızın altında ne yaptığı, diyalogların ve menülerin ekranda nasıl belirdiği, köşelerinin şekli ve boyutu, bir de ne kadar yer kapladıkları. Her biri, bir öğenin içindeki her şey için tek bir nitelikle ya da tek bir bileşen için tek bir girdiyle ayarlanır.
Tek nitelik, bütün bir alt ağaç
Tüm uygulama için data-nui-* niteliklerini <body> öğesine, uygulamanın bir bölümü içinse herhangi bir öğeye ekleyin. En yakındaki nitelik geçerli olur, bu yüzden nitelikler iç içe kullanılabilir. Yalnızca CSS değişkenlerini ayarladıkları için her framework’le, hatta hiç framework olmadan da aynı şekilde çalışırlar.
<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>Tek bir bileşen
Angular’da nuiButton, nuiDialog ve nuiMenu aynı değerleri girdi olarak alır. Ayarlamadığınız girdiler, üst öğelerdeki niteliklere uyar.
<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’e derlenen yaylar
Hareket, yay fiziğine dayanır: süre ve eğri yerine sertlik, sönümleme ve kütle. Token derleyicisi her yayı hesaplar ve CSS’e, yayın durulması için gereken süre ile bir linear() easing fonksiyonu olarak yazar; böylece animasyon JavaScript olmadan compositor üzerinde çalışır. Altı hazır yay token olarak gelir; liste --nui-spring-snappy ile başlayıp --nui-spring-mechanical ile biter. Kullanımdaki yayı --nui-motion tutar.
Başka herhangi bir yay için tek bir girdi yeterlidir. Angular onu çalışma zamanında aynı çözücüyle derler; springTransition() ise kendi öğeleriniz için gereken CSS’i verir.
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}`;Aradaki her şey
Hazır ayarlar yalnızca birer kısayoldur. Geri kalan her şey için CSS değişkenlerini kendiniz ayarlayın: --nui-press ve --nui-enter için herhangi bir transform, --nui-radius-scale ve --nui-density için herhangi bir sayı.
.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;
}Erişilebilirlik
Sistem azaltılmış hareket istediğinde yaylar anında tamamlanır; basma ve giriş efektleri de hareketsiz kalır. Yoğunluk hiçbir kontrolü WCAG 2.2’nin 24px hedef boyutunun altına indirmez ve hiçbir hazır ayar renklere dokunmaz; bu sayede tüm kontrast denetimleri geçerliliğini korur. corner-shape desteği olmayan tarayıcılar tüm köşeleri yuvarlak çizer.