Mỗi component đều có một cá tính mà bạn có thể thay đổi: lò xo quyết định chuyển động của nó, phản ứng của nút dưới ngón tay bạn, cách hộp thoại và menu xuất hiện, hình dạng và kích thước các góc, cũng như lượng không gian chúng chiếm. Mỗi yếu tố được đặt bằng một thuộc tính cho mọi thứ bên trong một phần tử, hoặc một input cho riêng một component.
Một thuộc tính, cả một cây con
Đặt các thuộc tính data-nui-* trên <body> cho toàn bộ ứng dụng, hoặc trên bất kỳ phần tử nào cho riêng một phần. Thuộc tính gần nhất sẽ được áp dụng, nên bạn có thể lồng chúng vào nhau. Chúng chỉ đặt biến CSS, nên hoạt động như nhau với mọi framework, hoặc khi không dùng framework nào.
<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>Một component
Trong Angular, nuiButton, nuiDialog và nuiMenu nhận cùng các giá trị đó dưới dạng input. Những input bạn không đặt sẽ theo các thuộc tính ở phần tử bao ngoài.
<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>Lò xo, biên dịch sang CSS
Chuyển động dựa trên vật lý lò xo: độ cứng, độ giảm chấn và khối lượng thay cho thời lượng và đường cong. Trình biên dịch token tính toán từng lò xo rồi ghi vào CSS dưới dạng thời gian cần để ổn định và một hàm easing linear(), nên chuyển động chạy trên compositor mà không cần JavaScript. Sáu lò xo có sẵn dưới dạng token, từ --nui-spring-snappy đến --nui-spring-mechanical, và --nui-motion giữ lò xo đang được dùng.
Mọi lò xo khác chỉ cần một input. Angular biên dịch nó lúc runtime bằng cùng bộ giải đó, còn springTransition() cho bạn CSS để dùng với các phần tử của riêng bạn.
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}`;Mọi giá trị ở giữa
Preset chỉ là lối tắt. Với mọi thứ khác, hãy tự đặt các biến CSS: bất kỳ transform nào cho --nui-press và --nui-enter, bất kỳ số nào cho --nui-radius-scale và --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;
}Khả năng tiếp cận
Khi hệ thống yêu cầu giảm chuyển động, lò xo hoàn tất ngay lập tức, còn hiệu ứng nhấn và hiệu ứng xuất hiện ngừng chuyển động. Mật độ không bao giờ khiến một phần tử điều khiển nhỏ hơn vùng nhấn 24px của WCAG 2.2, và không preset nào thay đổi màu sắc, nên mọi kiểm tra độ tương phản vẫn đạt. Trình duyệt không hỗ trợ corner-shape sẽ vẽ mọi góc bo tròn.