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