தனிப்பயனாக்கம்

ஒவ்வொரு கம்போனென்ட்டுக்கும் நீங்கள் மாற்றக்கூடிய ஓர் ஆளுமை உண்டு: அது அசையப் பயன்படும் ஸ்பிரிங், உங்கள் விரலின் கீழ் பொத்தான் செய்வது, டயலாக்குகளும் மெனுக்களும் வரும் விதம், அவற்றின் மூலைகளின் வடிவமும் அளவும், அவை எடுத்துக்கொள்ளும் இடம். இவை ஒவ்வொன்றும், ஓர் எலிமென்ட்டுக்குள் உள்ள அனைத்துக்கும் ஓர் ஆட்ரிபியூட், அல்லது ஒரு தனிக் கம்போனென்ட்டுக்கு ஓர் இன்புட்.

ஓர் ஆட்ரிபியூட், முழுத் துணைமரத்துக்கும்

முழுச் செயலிக்கும் 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-ஆக கம்பைல் ஆகும் ஸ்பிரிங்குகள்

இயக்கம் என்பது ஸ்பிரிங் இயற்பியல்: கால அளவுக்கும் வளைவுக்கும் பதிலாக விறைப்பு, தணிப்பு, நிறை. டோக்கன் கம்பைலர் ஒவ்வொரு ஸ்பிரிங் சமன்பாட்டையும் தீர்த்து, அது நிலைபெற ஆகும் நேரமாகவும் ஒரு linear() ஈஸிங்காகவும் CSS-இல் எழுதுகிறது; அதனால் அது JavaScript இல்லாமல் கம்போசிட்டரிலேயே இயங்குகிறது. --nui-spring-snappy முதல் --nui-spring-mechanical வரை ஆறு ஸ்பிரிங்குகள் டோக்கன்களாக வருகின்றன; பயன்பாட்டில் உள்ளதை --nui-motion வைத்திருக்கிறது.

வேறு எந்த ஸ்பிரிங்கும் ஓர் இன்புட் தொலைவில்தான் உள்ளது. Angular அதே சால்வரைக் கொண்டு அதை இயக்க நேரத்தில் கம்பைல் செய்கிறது; உங்கள் சொந்த எலிமென்ட்களுக்கான CSS-ஐ springTransition() தருகிறது.

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 ஆதரவு இல்லாத உலாவிகள் எல்லா மூலைகளையும் வட்டமாக வரைகின்றன.