کسٹمائزیشن · Needless UI

ہر کمپوننٹ کی ایک شخصیت ہے جسے آپ بدل سکتے ہیں: وہ اسپرنگ جس کے ساتھ وہ حرکت کرتا ہے، آپ کی انگلی کے نیچے بٹن کیا کرتا ہے، ڈائیلاگ اور مینو کیسے نمودار ہوتے ہیں، ان کے کونوں کی شکل اور سائز، اور وہ کتنی جگہ لیتے ہیں۔ ان میں سے ہر ایک یا تو کسی ایلیمنٹ کے اندر موجود ہر چیز کے لیے ایک ایٹریبیوٹ ہے، یا کسی ایک کمپوننٹ کے لیے ایک ان پٹ۔

ایک ایٹریبیوٹ، پورا سب ٹری

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 کے لیے کوئی بھی transform، اور --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 کے 24 پکسل ٹارگٹ سائز سے کبھی چھوٹا نہیں کرتی، اور کوئی پری سیٹ رنگوں کو نہیں چھیڑتا، اس لیے کنٹراسٹ کی ہر جانچ برقرار رہتی ہے۔ جو براؤزرز corner-shape سپورٹ نہیں کرتے، وہ ہر کونا گول بناتے ہیں۔