Setiap komponen punya kepribadian yang bisa Anda ubah: pegas yang menggerakkannya, apa yang dilakukan tombol di bawah jari Anda, cara dialog dan menu muncul, bentuk dan ukuran sudutnya, serta seberapa banyak ruang yang digunakannya. Masing-masing cukup diatur dengan satu atribut untuk semua yang ada di dalam sebuah elemen, atau satu input untuk satu komponen saja.
Satu atribut untuk seluruh subpohon
Pasang atribut data-nui-* di <body> untuk seluruh aplikasi, atau di elemen mana pun untuk sebagian saja. Atribut terdekat yang berlaku, jadi atribut ini bisa disarangkan. Karena hanya menetapkan variabel CSS, atribut ini bekerja dengan cara yang sama di framework apa pun, bahkan tanpa 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>Satu komponen
Di Angular, nuiButton, nuiDialog, dan nuiMenu menerima nilai yang sama sebagai input. Input yang tidak Anda atur akan mengikuti atribut pada elemen induknya.
<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>Pegas yang dikompilasi menjadi CSS
Gerakan memakai fisika pegas: kekakuan, redaman, dan massa, bukan durasi dan kurva. Kompiler token menghitung setiap pegas dan menuliskannya ke CSS sebagai waktu yang dibutuhkan pegas untuk diam dan sebuah easing linear(), sehingga animasinya berjalan di compositor tanpa JavaScript. Enam pegas tersedia sebagai token, dari --nui-spring-snappy hingga --nui-spring-mechanical, dan --nui-motion menyimpan pegas yang sedang dipakai.
Pegas lain cukup diatur lewat satu input. Angular mengompilasinya saat runtime dengan solver yang sama, dan springTransition() memberi Anda CSS untuk elemen Anda sendiri.
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}`;Apa pun di antaranya
Preset hanyalah jalan pintas. Untuk hal lainnya, atur sendiri variabel CSS-nya: transform apa pun untuk --nui-press dan --nui-enter, angka apa pun untuk --nui-radius-scale dan --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;
}Aksesibilitas
Saat sistem meminta gerakan dikurangi, pegas selesai seketika, sedangkan efek tekan dan animasi masuk berhenti bergerak. Kepadatan tidak pernah membuat kontrol lebih kecil dari ukuran target 24px WCAG 2.2, dan tidak ada preset yang mengubah warna, sehingga semua pemeriksaan kontras tetap terpenuhi. Browser tanpa dukungan corner-shape menggambar semua sudut membulat.