ಪ್ರತಿಯೊಂದು ಕಾಂಪೊನೆಂಟ್‌ಗೂ ನೀವು ಬದಲಿಸಬಹುದಾದ ಒಂದು ವ್ಯಕ್ತಿತ್ವವಿದೆ: ಅದು ಚಲಿಸುವ ಸ್ಪ್ರಿಂಗ್, ನಿಮ್ಮ ಬೆರಳಿನಡಿಯಲ್ಲಿ ಬಟನ್ ಏನು ಮಾಡುತ್ತದೆ, ಡೈಲಾಗ್‌ಗಳು ಮತ್ತು ಮೆನುಗಳು ಹೇಗೆ ಬರುತ್ತವೆ, ಅವುಗಳ ಮೂಲೆಗಳ ಆಕಾರ ಮತ್ತು ಗಾತ್ರ, ಹಾಗೂ ಅವು ಎಷ್ಟು ಜಾಗ ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ. ಇವುಗಳಲ್ಲಿ ಪ್ರತಿಯೊಂದೂ ಒಂದು ಎಲಿಮೆಂಟ್‌ನೊಳಗಿನ ಎಲ್ಲದಕ್ಕೂ ಒಂದು ಆಟ್ರಿಬ್ಯೂಟ್, ಅಥವಾ ಒಂದೇ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಒಂದು ಇನ್‌ಪುಟ್.
ಒಂದು ಆಟ್ರಿಬ್ಯೂಟ್, ಇಡೀ ಸಬ್‌ಟ್ರೀಗೆ
ಇಡೀ ಆ್ಯಪ್‌ಗಾಗಿ data-nui-* ಆಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು <body> ಮೇಲೆ, ಅಥವಾ ಅದರ ಒಂದು ಭಾಗಕ್ಕಾಗಿ ಯಾವುದೇ ಎಲಿಮೆಂಟ್ ಮೇಲೆ ಇರಿಸಿ. ಅತ್ಯಂತ ಸಮೀಪದ್ದೇ ಗೆಲ್ಲುತ್ತದೆ, ಹಾಗಾಗಿ ಅವುಗಳನ್ನು ನೆಸ್ಟ್ ಮಾಡಬಹುದು. ಅವು CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಮಾತ್ರ ಹೊಂದಿಸುತ್ತವೆ, ಹಾಗಾಗಿ ಯಾವುದೇ ಫ್ರೇಮ್‌ವರ್ಕ್‌ನೊಂದಿಗೆ ಅಥವಾ ಫ್ರೇಮ್‌ವರ್ಕ್ ಇಲ್ಲದೆಯೂ ಒಂದೇ ರೀತಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ.
<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 ಇದೇ ಮೌಲ್ಯಗಳನ್ನು ಇನ್‌ಪುಟ್‌ಗಳಾಗಿ ಸ್ವೀಕರಿಸುತ್ತವೆ. ನೀವು ಹೊಂದಿಸದೆ ಬಿಟ್ಟ ಇನ್‌ಪುಟ್‌ಗಳು ಅವುಗಳ ಸುತ್ತಲಿನ ಆಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು ಅನುಸರಿಸುತ್ತವೆ.
<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() ನೀಡುತ್ತದೆ.
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 ಗೆ ಯಾವುದೇ ಸಂಖ್ಯೆ.
.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 ಬೆಂಬಲವಿಲ್ಲದ ಬ್ರೌಸರ್‌ಗಳು ಪ್ರತಿಯೊಂದು ಮೂಲೆಯನ್ನೂ ದುಂಡಗೆ ಬಿಡಿಸುತ್ತವೆ.