nuiButton ڈائریکٹو کسی نیٹو <button> یا <a> کو اسٹائل کرتا ہے۔ ایلیمنٹ اپنی معنوی ساخت، کی بورڈ پر برتاؤ اور فارم میں شمولیت برقرار رکھتا ہے؛ ڈائریکٹو صرف اپنے ان پٹس کو ان data ایٹریبیوٹس میں منعکس کرتا ہے جنہیں اسٹائل شیٹ ٹارگٹ کرتی ہے۔
ایکشنز کے لیے <button> اور نیویگیشن کے لیے <a> استعمال کریں۔ دونوں ایک جیسے دکھتے ہیں، اور دونوں disabled کو سپورٹ کرتے ہیں۔
انداز
فِل کے چار انداز، سب سے نمایاں سے لے کر سب سے ہلکے تک۔ ہر اسکرین پر مرکزی ایکشن کے لیے صرف ایک solid بٹن استعمال کریں۔
رنگ
tone ان پٹ رنگوں کا پیلیٹ بدلتا ہے: مرکزی راستے کے لیے accent، ثانوی ایکشنز کے لیے neutral، اور خطرناک ایکشنز کے لیے danger۔
سائز
تین اونچائیاں: 28، 36 اور 44 پکسل۔ سب سے چھوٹا سائز بھی WCAG 2.2 کے کم از کم ٹارگٹ سائز سے بڑا ہے۔
لنکس اور غیر فعال بٹن
لنکس کو نیٹو طور پر غیر فعال نہیں کیا جا سکتا، اس لیے غیر فعال لنک کو aria-disabled="true" ملتا ہے اور اس پر کلکس روک دیے جاتے ہیں، routerLink کے ساتھ بھی۔
دبانے کے اثرات
ہر بٹن کو باری باری دبا کر رکھیں۔ press طے کرتا ہے کہ دبائے رکھنے کے دوران بٹن کیا کرتا ہے، اور motion وہ اسپرنگ طے کرتا ہے جس کے ساتھ بٹن واپس آتا ہے۔ کسی بھی ایلیمنٹ پر data-nui-press لگانے سے یہ اس کے اندر موجود ہر چیز پر لاگو ہو جاتا ہے۔
کونے، ریڈیس اور ڈینسٹی
corners کونوں کی شکل بدلتا ہے، radius ان کا سائز، اور density وہ جگہ جو بٹن لیتا ہے، مگر بٹن کبھی 24 پکسل کے ٹارگٹ سائز سے چھوٹا نہیں ہوتا۔ جو براؤزرز corner-shape سپورٹ نہیں کرتے، وہ کونے گول بناتے ہیں۔