કસ્ટમાઇઝેશન

દરેક કમ્પોનન્ટનો એક મિજાજ હોય છે, જે તમે બદલી શકો છો: તે કઈ સ્પ્રિંગથી હલે છે, તમારી આંગળી નીચે બટન શું કરે છે, ડાયલૉગ અને મેનૂ કેવી રીતે પ્રગટ થાય છે, તેમના ખૂણાનો આકાર અને કદ, અને તેઓ કેટલી જગ્યા રોકે છે. દરેક સેટિંગ કાં તો એક એટ્રિબ્યુટ છે, જે કોઈ એલિમેન્ટની અંદરની દરેક વસ્તુને લાગુ પડે છે, અથવા એક ઇનપુટ, જે ફક્ત એક કમ્પોનન્ટને લાગુ પડે છે.

એક એટ્રિબ્યુટ, આખું સબટ્રી

આખી ઍપ માટે 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 ને સપોર્ટ ન કરતાં બ્રાઉઝર દરેક ખૂણો ગોળ દોરે છે.