কাস্টমাইজেশন

প্রতিটি কম্পোনেন্টের একটা মেজাজ আছে, যা আপনি বদলাতে পারেন: কোন স্প্রিং অনুযায়ী সেটি নড়ে, আপনার আঙুলের নিচে বাটন কী করে, ডায়ালগ ও মেনু কীভাবে হাজির হয়, তাদের কোণের আকৃতি ও সাইজ, আর তারা কতটা জায়গা নেয়। প্রতিটি সেটিং হয় একটি অ্যাট্রিবিউট, যা কোনো এলিমেন্টের ভেতরের সবকিছুতে খাটে, নয়তো একটি ইনপুট, যা শুধু একটি কম্পোনেন্টে খাটে।

একটি অ্যাট্রিবিউট, পুরো সাবট্রি

পুরো অ্যাপের জন্য data-nui-* অ্যাট্রিবিউটগুলো <body>-এ দিন, অথবা কোনো একটি অংশের জন্য যেকোনো এলিমেন্টে। সবচেয়ে কাছেরটিই কার্যকর হয়, তাই এগুলো নেস্ট করা যায়। এগুলো শুধু CSS কাস্টম প্রপার্টি সেট করে, তাই যেকোনো ফ্রেমওয়ার্কে, এমনকি ফ্রেমওয়ার্ক ছাড়াও, একইভাবে কাজ করে।

customize.html

<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>

শুধু একটি কম্পোনেন্ট

Angular-এ nuiButton, nuiDialog ও nuiMenu একই ভ্যালুগুলো ইনপুট হিসেবে নেয়। যে ইনপুট আপনি সেট করেন না, সেগুলো চারপাশের অ্যাট্রিবিউট থেকে ভ্যালু নেয়।

customize-inputs.html

<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-এ কম্পাইল করা স্প্রিং

গতি মানে স্প্রিং ফিজিক্স: সময়কাল আর কার্ভের বদলে দৃঢ়তা, অবমন্দন ও ভর। টোকেন কম্পাইলার প্রতিটি স্প্রিং সমাধান করে সেটিকে CSS-এ লেখে: থিতু হতে যত সময় লাগে, আর একটি linear() ইজিং। তাই এটি JavaScript ছাড়াই কম্পোজিটরে চলে। ছয়টি স্প্রিং টোকেন হিসেবে আসে, --nui-spring-snappy থেকে --nui-spring-mechanical পর্যন্ত, আর যেটি ব্যবহার হচ্ছে সেটি থাকে --nui-motion-এ।

অন্য যেকোনো স্প্রিং মাত্র একটি ইনপুট দূরে। Angular একই সলভার দিয়ে রানটাইমে সেটি কম্পাইল করে, আর springTransition() আপনার নিজের এলিমেন্টের জন্য CSS দেয়।

customize-spring.ts

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}`;

মাঝামাঝি যেকোনো কিছু

প্রিসেটগুলো শুধু শর্টকাট। অন্য যেকোনো কিছুর জন্য কাস্টম প্রপার্টি নিজেই সেট করুন: --nui-press ও --nui-enter-এর জন্য যেকোনো ট্রান্সফর্ম, --nui-radius-scale ও --nui-density-এর জন্য যেকোনো সংখ্যা।

customize.css

.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;
}

অ্যাক্সেসিবিলিটি

সিস্টেম কম অ্যানিমেশন চাইলে স্প্রিং মুহূর্তেই শেষ হয়ে যায়, আর চাপ ও প্রবেশের ইফেক্ট নড়াচড়া থামিয়ে দেয়। ডেনসিটি কোনো কন্ট্রোলকে কখনো WCAG 2.2-এর 24px টার্গেট সাইজের চেয়ে ছোট করে না, আর কোনো প্রিসেট রঙে হাত দেয় না, তাই কনট্রাস্টের প্রতিটি যাচাই আগের মতোই খাটে। যেসব ব্রাউজার corner-shape সাপোর্ট করে না, সেগুলো সব কোণ গোল করে আঁকে।