nuiButton ಡೈರೆಕ್ಟಿವ್ ನೇಟಿವ್ <button> ಅಥವಾ <a> ಗೆ ಸ್ಟೈಲ್ ನೀಡುತ್ತದೆ. ಎಲಿಮೆಂಟ್ ತನ್ನ ಸೆಮ್ಯಾಂಟಿಕ್ಸ್, ಕೀಬೋರ್ಡ್ ನಡವಳಿಕೆ ಮತ್ತು ಫಾರ್ಮ್‌ನಲ್ಲಿ ಭಾಗವಹಿಸುವಿಕೆಯನ್ನು ಉಳಿಸಿಕೊಳ್ಳುತ್ತದೆ; ಡೈರೆಕ್ಟಿವ್ ತನ್ನ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಸ್ಟೈಲ್‌ಶೀಟ್ ಗುರಿಯಾಗಿಸುವ data ಆಟ್ರಿಬ್ಯೂಟ್‌ಗಳಲ್ಲಿ ಪ್ರತಿಬಿಂಬಿಸುವುದನ್ನು ಮಾತ್ರ ಮಾಡುತ್ತದೆ.
ಕ್ರಿಯೆಗಳಿಗೆ <button> ಮತ್ತು ನ್ಯಾವಿಗೇಷನ್‌ಗೆ <a> ಬಳಸಿ. ಎರಡೂ ಒಂದೇ ರೀತಿ ಕಾಣುತ್ತವೆ, ಮತ್ತು ಎರಡೂ disabled ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ.
ವೇರಿಯಂಟ್‌ಗಳು
ಅತ್ಯಂತ ಎದ್ದುಕಾಣುವುದರಿಂದ ಅತ್ಯಂತ ಸೌಮ್ಯವಾದವರೆಗೆ ನಾಲ್ಕು ಫಿಲ್ ಸ್ಟೈಲ್‌ಗಳು. ಮುಖ್ಯ ಕ್ರಿಯೆಗಾಗಿ ಪ್ರತಿ ವೀಕ್ಷಣೆಯಲ್ಲಿ ಒಂದೇ solid ಬಟನ್ ಬಳಸಿ.
ಟೋನ್‌ಗಳು
ಟೋನ್‌ಗಳು ಪ್ಯಾಲೆಟ್ ಅನ್ನು ಬದಲಿಸುತ್ತವೆ: ಮುಖ್ಯ ಹಾದಿಗೆ accent, ದ್ವಿತೀಯ ಕ್ರಿಯೆಗಳಿಗೆ neutral, ಅಳಿಸುವಿಕೆಯಂತಹ ಅಪಾಯಕಾರಿ ಕ್ರಿಯೆಗಳಿಗೆ danger.
ಗಾತ್ರಗಳು
ಮೂರು ಎತ್ತರಗಳು: 28, 36 ಮತ್ತು 44 ಪಿಕ್ಸೆಲ್‌ಗಳು. ಅತ್ಯಂತ ಚಿಕ್ಕದೂ WCAG 2.2 ರ ಕನಿಷ್ಠ ಟಾರ್ಗೆಟ್ ಗಾತ್ರವನ್ನು ಮೀರುತ್ತದೆ.
ಲಿಂಕ್‌ಗಳು ಮತ್ತು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಬಟನ್‌ಗಳು
anchor ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ನೇಟಿವ್ ಆಗಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ, ಹಾಗಾಗಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಲಿಂಕ್‌ಗೆ aria-disabled="true" ಸೇರುತ್ತದೆ ಮತ್ತು routerLink ಇದ್ದರೂ ಅದರ ಕ್ಲಿಕ್‌ಗಳನ್ನು ತಡೆಯಲಾಗುತ್ತದೆ.
ಒತ್ತಿದಾಗಿನ ಪರಿಣಾಮಗಳು
ಪ್ರತಿಯೊಂದು ಬಟನ್ ಅನ್ನು ಒತ್ತಿ ಹಿಡಿದು ನೋಡಿ. ಒತ್ತಿ ಹಿಡಿದಾಗ ಬಟನ್ ಏನು ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು press ನಿರ್ಧರಿಸುತ್ತದೆ, ಮತ್ತು ಅದು ಯಾವ ಸ್ಪ್ರಿಂಗ್‌ನೊಂದಿಗೆ ಮರಳುತ್ತದೆ ಎಂಬುದನ್ನು motion ನಿರ್ಧರಿಸುತ್ತದೆ. ಯಾವುದೇ ಎಲಿಮೆಂಟ್ ಮೇಲೆ ಇರಿಸಿದ data-nui-press ಅದರೊಳಗಿನ ಎಲ್ಲದಕ್ಕೂ ಅನ್ವಯಿಸುತ್ತದೆ.
ಮೂಲೆಗಳು, ತ್ರಿಜ್ಯ ಮತ್ತು ಸಾಂದ್ರತೆ
corners ಮೂಲೆಗಳ ಆಕಾರವನ್ನು, radius ಅವುಗಳ ಗಾತ್ರವನ್ನು ಮತ್ತು density ಬಟನ್ ತೆಗೆದುಕೊಳ್ಳುವ ಜಾಗವನ್ನು ಬದಲಿಸುತ್ತವೆ; ಆದರೆ ಆ ಜಾಗ 24px ಟಾರ್ಗೆಟ್ ಗಾತ್ರಕ್ಕಿಂತ ಎಂದಿಗೂ ಕಡಿಮೆಯಾಗುವುದಿಲ್ಲ. corner-shape ಬೆಂಬಲವಿಲ್ಲದ ಬ್ರೌಸರ್‌ಗಳು ಮೂಲೆಗಳನ್ನು ದುಂಡಗೆ ಬಿಡಿಸುತ್ತವೆ.