Angular میں UI / UX اجزاء ، کے نام سے جانا جاتا ہے کونییاتی مواد۔ وہکونیی ایپلی کیشنز کو انجام دینے میں مدد کریں موثر طریقے سے . تاہم ، اگر آپ ابھی تک ان کے بارے میں نہیں جانتے ہیں تو ، یہاں ایک مضمون یہ ہے کہ آپ کونییاتی مواد کو تفصیل سے سیکھنے میں مدد کریں۔ نیز ، ٹیo کونیولر کی گہرائی سے جانکاری حاصل کریں ، داخلہ لینے پر غور کریں ' ایڈورکا سے
اس مضمون میں ، میں مندرجہ ذیل عنوانات پر غور کروں گا۔
کونییاتی مادوں کا تعارف
مواد ایک ڈیزائن کی زبان کے طور پر متعارف کرایا گیا تھا جسے گوگل نے 2014 میں تیار کیا تھا۔ مادی ڈیزائن ایک آلہ ہےفرنٹ اینڈ فریم ورک کے ل. ، جو آپ کی مدد کرتا ہے بصری ، تحریک ، اور بات چیت ڈیزائن. یہ آپ کو مختلف آلات اور اسکرین کے مختلف سائز میں ڈھالنے میں بھی مدد کرتا ہے۔ پہلے ، ان ایپس کو مزید بنانے کے ل Ang اسے AngularJS پر ٹیگ کیا گیا تھا پر کشش اور انجام دیں تیز . تب ، گوگل نے شروع سے کوڈ کو مکمل طور پر دوبارہ لکھا اور جے ایس کو ہٹا دیا۔ ، اور اس کا نام لیا ستمبر 2016 میں۔ بعد میں ، گوگل نے میٹریل ڈیزائن کو انگولر میں ٹیگ کیا ، جو استعمال کرتا ہے ، اور اس کا نام انگولر میٹریلز رکھا۔
کونییاتی مواد یا یوزر انٹرفیس (UI) کے اجزاء آپ کو اپنی ایپلی کیشن کو اے میں ڈیزائن کرنے میں مدد کرتے ہیں ڈھانچہ انداز. وہ صارفین کو راغب کرتے ہیں اور بناتے ہیں رسائی آسان ہے آپ کی درخواست میں موجود عناصر یا اجزاء۔ وہ آپ کی ایپلی کیشنز کو پرکشش انداز میں ڈیزائن کرنے میں بھی مددگار ثابت ہوتے ہیں شیلیوں اور شکلیں . یہ اجزاء آپ کی درخواست کو مزید بنانے میں مدد کرتے ہیں متواتر ، تیز ، بہمھی اور یہاں تک کہ ڈیزائن ذمہ دار ویب سائٹس
کونیی مواد کی تنصیب
اب ، ہم ایک تیز ٹیوٹوریل کے ساتھ شروع کرتے ہیں کہ کونییاتی مادوں کو کیسے انسٹال کریں۔ سب سے پہلے چیزیں ، اس بات کو یقینی بنائیں کہ آپ نے اپنے سسٹم میں کونیی لگادیا ہے۔ اگر آپ انگولر سے واقف نہیں ہیں تو ، لنک کو دیکھیں . ایک بار جب آپ سب کچھ ترتیب دے دیتے ہیں تو ، آپ درج ذیل کمانڈ کا استعمال کرکے اپنے پروجیکٹ میں کونییاتی مادsہ شامل کرسکتے ہیں:
شامل کریں @ کونیی / مواد
پہلے ، یہ آپ کو پری بلٹ تھیم کا نام یا کسٹم تھیم منتخب کرنے کے لئے کہے گا۔
آپ کو 'انڈگو / گلابی' پری بلٹ تھیم منتخب کرنے کی ضرورت ہے جو آپ کی درخواست کو اسٹائل کرنے کے لئے پہلے سے طے شدہ تھیم ہے۔ آپ 'کسٹم' تھیم کا بھی انتخاب کرسکتے ہیں تاکہ آپ اپنی تھیم فائلوں کو حسب ضرورت بناسکیں جس میں تمام عام طرزیں شامل ہیں۔
اگلا ، یہ آپ کو ترتیب دینے کے لئے کہے گا ہتھوڑا جے ایس . ہتھوڑا جے ایس ایک مشہور لائبریری ہے ، جس میں بڑی حد تک کونییی اطلاق میں استعمال ہوتا ہے۔ اس میں رابطوں کے اشاروں جیسے سوائپ ، پین ، چوٹکی ، گھماؤ اور بہت سارے ، خصوصا applications موبائل ایپلی کیشنز میں مدد شامل کی گئی ہے۔
آپ یا تو 'ہاں' یا 'نہیں' کا انتخاب کرسکتے ہیں۔ جب آپ موبائل پر اپنی درخواست استعمال کرتے ہیں تو ہتھوڑا جے ایس مفید ثابت ہوسکتا ہے۔ چونکہ موبائل ٹچ ڈسپلے پیش کرتے ہیں ، یہ اشارے زیادہ کارآمد ثابت ہوتے ہیں اور آپ کے موبائل ایپلی کیشن میں رجحان نظر آسکتے ہیں۔
اپنی پسند کا انتخاب کرنے کے بعد ، اگلا یہ آپ کو ترتیب دینے کے لئے کہے گا براؤزر متحرک تصاویر کونیی مواد کے لئے.
آپ کو 'ہاں' منتخب کرنے کی ضرورت ہے تاکہ آپ اپنی درخواست پر متحرک تصاویر استعمال کرسکیں۔ کونیی متحرک تصاویر آپ کی درخواست کو زیادہ تفریح اور استعمال میں آسان بنا دیتے ہیں۔ یہ آپ کے ایپ اور صارف کے تجربے کو بہتر بنا سکتا ہے جو صارفین کی توجہ اپنی طرف راغب کرتا ہے۔
اس کے نتیجے میں ، یہ آپ کی درخواست میں کونییاتی مواد کو انسٹال کرے گا۔
کونیی مادی اجزاء
جیسا کہ پہلے ذکر کیا گیا ہے ، کونیی ماد .ی اجزاء کچھ نہیں ہیں UI / UX ڈیزائن اجزاء۔ ان میں مختلف قسم کے اجزاء شامل ہوتے ہیں جیسے فارم کنٹرولز ، نیویگیشن ، بٹن اور اشارے ، پاپ اپ اور بہت کچھ۔ یہ اجزاء آپ کو میٹریل ڈیزائن کی تفصیلات کے مطابق نمونوں پر عمل درآمد میں مدد کرتے ہیں۔
آگے بڑھتے ہوئے ، آئیے کچھ مثال ملاحظہ کریں کہ آپ اپنے کونیی اطلاق میں ان اجزاء کو کس طرح نافذ کریں۔
سمت شناسی
پہلے ، میں نیویگیشن کے اجزاء پر گفتگو کروں گا۔
- ٹول بار
آپ کو مندرجہ ذیل کوڈ کو ٹائپ کرنے کی ضرورت ہے app.comp ભાગ.html اپنی درخواست میں ٹول بار کا جز استعمال کرنے کیلئے فائل۔
کونیی مادی سبق کونییئر مواد کا ایک کنٹینر ہے جو ہیڈر اور عنوان کے لئے استعمال ہوتا ہے۔ کا رنگ کنٹینر کو استعمال کرکے تبدیل کیا جاسکتا ہے رنگ پراپرٹیطے شدہ طور پر ، ٹول بار موجودہ تھیم یعنی روشنی یا سیاہ کی بنیاد پر غیر جانبدار پس منظر کا رنگ استعمال کرتے ہیں۔آپ تین طے شدہ تھیمز منتخب کرسکتے ہیں جو ہیں: ’پرائمری‘ ، ‘لہجہ’ ، یا ‘انتباہ’ .اس ٹول بار کو استعمال کرنے کے ل you ، آپ کو پہلے اس میں درآمد کرنا ہوگا app.module.ts درج ذیل کمانڈ کا استعمال کرتے ہوئے کونیی مواد سے فائل کریں۔
'@ کونیی / مواد' سے {میٹ ٹول بار موڈول import درآمد کریںبعد میں ، آپ کو ماڈیول میں بھی شامل کرنے کی ضرورت ہے درآمدات: [] میں واقع سیکشن app.module.ts فائل
درآمدات: [براؤزرموڈول ، ایپراؤٹنگ موڈول ، براؤزر انیمیشنس موڈول ، میٹ ٹولبارموڈول] ،
چٹائی کے ٹول بار کے ل you ، آپ کو شامل کرنے کی ضرورت ہے “ میٹ ٹول بار ”۔
اب ، مندرجہ ذیل کمانڈ کا استعمال کرکے اپنے پروجیکٹ کی خدمت کریں:
کی خدمت کی
یہ آپ کے پروجیکٹ کو آپ کے سسٹم کے پہلے سے طے شدہ براؤزر پر کھولے گا جیسا کہ ذیل میں دکھایا گیا ہے:
اگر آپ اپنی پسند کے مطابق ٹول بار کا رنگ تبدیل کرنا چاہتے ہیں تو ، آپ اسے سی ایس ایس اسٹائل شیٹ کی مدد سے کرسکتے ہیں۔ میں آپ کو ایک مثال دکھاتا ہوں۔
پہلے ، آپ کو مٹانے کی ضرورت ہے رنگ سے پراپرٹی کنٹینر اور پھر ، درج ذیل ٹائپ کریں سی ایس ایس میں کوڈ app.comp ભાગ.css فائل
چٹائی-ٹول بار {پس منظر کا رنگ: / * اپنی پسند کا رنگ * / رنگ: / * متن کا رنگ * /اب ، نتیجہ دیکھنے کے لئے اپنے منصوبے کی خدمت کریں۔
- مینو
اگلا ، میں مینو اجزاء پر تبادلہ خیال کروں گا۔ آپ کو اپنے میں درج ذیل کوڈ ٹائپ کرنے کی ضرورت ہے app.comp ભાગ.html فائل
کونیی مادی سبق مینو کی ترتیبات میں مددآئیے پر کچھ اسٹائل شامل کریں مینو بٹن آپ کو اپنے میں درج ذیل کوڈ ٹائپ کرنے کی ضرورت ہے app.comp ભાગ.css فائل
. اسپیس {فلیکس: 1 1 آٹو} .btns {چوڑائی: 100px اونچائی: 40px فونٹ سائز: بڑی حد کا رداس: 10px بارڈر: 3px ٹھوس # 113c89 پس منظر کا رنگ: لائٹ کورل}کلاس = 'جگہ' 'ٹول بار کا نام' اور 'مینو آپشن' کے درمیان وقفہ کاری شامل کرنے کے لئے استعمال ہوتا ہے۔
اگر آپ سی ایس ایس اسٹائل شیٹ سے واقف نہیں ہیں تو ، آپ ہمارے بلاگ کا حوالہ دے سکتے ہیں گہرائی حاصل کرنے کے لئے.
ٹول بار کی طرح ، استعمال کرنے کے لئے اور کنٹینرز ، آپ کو درآمد کے ل above ، اوپر کی طرح کے طریقہ کار پر عمل کرنے کی ضرورت ہے MatMenuModule اور میٹ بٹنموڈول سے کونیی مواد اور ان میں شامل کریں درآمدات: [] میں واقع سیکشن app.module.ts فائل
آؤٹ پٹ کو ظاہر کرنے کے لئے اب اپنے پروجیکٹ کی خدمت کریں۔
فارم کنٹرولز
اب ، میں فارم کنٹرول کے اجزاء پر تبادلہ خیال کروں گا۔
- فارم فیلڈ
جیسا کہ نام سے پتہ چلتا ہے ، فارم - فیلڈ صارف کے ذریعہ دیئے گئے ان پٹ کے لئے استعمال ہوتا ہے۔ یہ سب سے زیادہ کسی صارف کی رجسٹریشن کے لئے ، کسی درخواست یا کسی ویب سائٹ میں استعمال ہوتا ہے۔
آپ کو مندرجہ ذیل کوڈ کو ٹائپ کرنے کی ضرورت ہے app.comp ભાગ.html اپنی درخواست میں فارم فیلڈ جزو استعمال کرنے کیلئے فائل۔
فارم کنٹرولز
نام
ہمیشہ کی طرح ، آپ کو درآمد کرنے کی ضرورت ہے میٹفارم فیلڈ موڈول اور میٹ ان پٹ موڈول اور ان میں شامل کریں درآمدات: [] میں واقع سیکشن app.module.ts فائل مذکورہ کوڈ کو عام طور پر 'پہلا نام' ، 'آخری نام' ، وغیرہ جیسے نام داخل کرنے کے لئے استعمال کیا جاتا ہے۔ یہاں تک کہ آپ توثیق کاروں کو بھی استعمال کرسکتے ہیں اور کسی فیلڈ کو لازمی قرار دے سکتے ہیں۔ مثال کے طور پر ، آپ اسے ای میل فیلڈ کے لئے استعمال کرسکتے ہیں۔ آپ پاس ورڈز کے متن کو چھپا یا چھپا سکتے ہیں۔ اپنے حوالہ کے لئے ، ذیل میں کوڈ ملاحظہ کریں:
اپنا ای میل {{getErrorMessage ()} your اپنا پاس ورڈ درج کریں {{چھپائیں؟ 'visibility_off': 'مرئیت'}آپ میں app.comp ભાગ.css فائل ، آپ کو درج ذیل کوڈ کو شامل کرنے کی ضرورت ہے۔
. مثال کے کنٹینر {بھرتی-بائیں: 50px}اب ، آپ میں app.comp ભાગ.ts فائل ، آپ کو درآمد کرنے کی ضرورت ہے فارمکنٹرول اور تصدیق کرنے والے سے @ کونیی / فارم ڈائریکٹری
'@ کونیی / فارم' سے import فارمکنٹرول ، تصدیق کنندہ import درآمد کریں
مندرجہ ذیل کلاس میں غلطی ظاہر کرنے کے ل You آپ کو متن بھی شامل کرنے کی ضرورت ہے۔
برآمد کلاس AppComp اجزاء {ای میل = نیا formControl (''، [Validators.required، Validators.email]) getErrrMessage () {this.email.hasError ('مطلوب') کو واپس کریں؟ 'آپ کو ایک قیمت درج کرنی ہوگی': this.email.hasError ('ای میل')؟ 'درست ای میل نہیں ہے': ''} پوشیدہ = سچ}مندرجہ بالا طریقہ کار کا حوالہ دیتے ہوئے ، آپ کو اپنے میں درج ذیل کوڈ ٹائپ کرنے کی ضرورت ہے app.module.ts ضروری ماڈیول درآمد کرنے کے لئے فائل.
درآمد کریں @ '@ زاویہ / فارم' درآمد {میٹ آئکن موڈول} سے '@ کونیی / مادی' سے '@ Angular / form' درآمد کریںبعد میں ، آپ کو ان ماڈیولز کو شامل کرنے کی ضرورت ہے درآمدات: [] سیکشن
- ریڈیو بٹن
عام طور پر ریڈیو بٹن مختلف اختیارات میں سے کسی ایک کا انتخاب کرنے کے لئے استعمال ہوتے ہیں۔ آپ حوالہ کے لئے درج ذیل کوڈ کو چیک کرسکتے ہیں۔
کے لئے app.comp ભાગ.html فائل ،
صنف
مرد خواتین
کے لئے app.comp ભાગ.css فائل ،
چٹائی ریڈیو بٹن {بھرتی بائیں - 50px}اب ، آپ کو درآمد کرنے کی ضرورت ہے MatRadioModule اور اس میں شامل کریں درآمدات: [] میں واقع سیکشن app.module.ts فائل
بعد میں ، آؤٹ پٹ کو ظاہر کرنے کے ل you آپ کو اپنے منصوبے کی خدمت کرنے کی ضرورت ہے۔
آگے بڑھتے ہوئے ، میں کونیی ماد Materialی CDK پر گفتگو کروں گا۔
کونیی ماد .ی CDK
سی ڈی کے ، کے نام سے بھی جانا جاتا ہے اجزاء دیو کٹ کی لائبریری ہے پیش وضاحتی طرز عمل کونیی مواد میں ، جو ٹولز کا ایک سیٹ ہے جو عام کو نافذ کرتا ہے باہمی روابط اور درخواست کی خصوصیات . اس میں مادی ڈیزائن سے متعلق کوئی اسٹائل نہیں ہے۔ آئیے سی ڈی کے کی مثال دیکھتے ہیں۔
- لکھنے کی جگہ
ٹیکسٹ فیلڈ جزو ٹیکسٹ ان پٹ فیلڈز کے ساتھ کام کرنے کی افادیت فراہم کرتا ہے۔ آپ آدانوں کا سائز تبدیل کرنے کیلئے ٹیکسٹ فیلڈ پر سی ڈی کے اجزاء استعمال کرسکتے ہیں۔ آئیے اس کی تطبیق کرنے کی ایک مثال دیکھتے ہیں۔
کے لئے app.comp ભાગ.html فائل ،
کونیی ماد .ی CDK
فونٹ سائز 10px 12px 14px 16px 18px 20px خودکار ٹیکسٹیریا
کے لئے app.comp ભાગ.ts فائل ، آپ کو پہلے ضروری اجزا درآمد کرنے کی ضرورت ہے۔
درآمد کریں @ CdkTextareaAutosize} from '@ Angular / cdk / Text-Field' درآمد {این جی زون ، ویو چائلڈ} سے '@ کونیی / بنیادی' درآمد {لے} 'rxjs / آپریٹرز' سےاب ، آپ کو کلاس کے اندر درج ذیل کوڈ ٹائپ کرنے کی ضرورت ہے۔
جاوا ایڈیکٹیجینٹینر (یہ)
ایکسپورٹ کلاس ایپکمپینٹ {کنسٹرکٹر (نجی _ زنگ زون: این جی زون) {}ViewChild ('خودکار'،، جامد: جھوٹی}) خودکار: CdkTextareaAutosize ٹرگر ریسائز (). this._ngZone.onStable.pip (لے (1))۔ ) = & ampampampgt this.autosize.resizeToFitContent (true))}اگلا ، آپ کو درآمد کرنے کی ضرورت ہے میٹ سلیکٹ موڈول اور اس میں شامل کریں درآمدات: [] میں واقع سیکشن app.module.ts فائل
آخر میں ، آؤٹ پٹ کو ظاہر کرنے کے ل your آپ کو اپنے پروجیکٹ کی خدمت کرنے کی ضرورت ہے۔
یہ نتیجہ نہیں ہے اور کونییاتی مادے میں کئی دوسرے اجزاء موجود ہیں۔ آپ ان سے رجوع کرسکتے ہیں سرکاری ویب سائٹ کونیی مواد کی.
اس کے ساتھ ، میں اپنے بلاگ کو ختم کرنا چاہتا ہوں۔ مجھے امید ہے کہ آپ کونیی مٹیریل کے بنیادی اصولوں کے بارے میں واضح ہیں۔اگر آپ کو اس مضمون کے حوالے سے کوئی شکوک و شبہات ہیں تو ، ذیل میں تبصرے کے سیکشن میں ان کو پوسٹ کرنے میں ہچکچاہٹ نہ کریں۔
اگر آپ وہ سب کچھ سیکھنا چاہتے ہیں جو آپ نے ابھی صرف اس بلاگ سے سیکھا ہے ، اور مزید کے بارے میں کونیی ، اور ایک ماہر انگولر ڈویلپر کی طرف اپنے کیریئر کو گیئر کریں ، پھر ہمارے لئے اندراج پر غور کریں ' .
ہمارے لئے ایک سوال ہے؟ براہ کرم اس 'کونیی مواد' بلاگ کے تبصرے سیکشن میں اس کا تذکرہ کریں اور ہم جلد از جلد آپ کے پاس مل جائیں گے۔