কৌণিক অঞ্চলে ইউআই / ইউএক্স উপাদানগুলি হিসাবে পরিচিত কৌণিক পদার্থ। তারাকৌণিক অ্যাপ্লিকেশনগুলি সম্পাদনে সহায়তা করুন দক্ষতার সাথে । তবে, আপনি যদি এখনও সেগুলি সম্পর্কে অবগত না হন তবে এখানে কৌনিক উপাদানগুলি বিস্তারিতভাবে শিখতে আপনাকে সহায়তা করার জন্য একটি নিবন্ধ এখানে দেওয়া হয়েছে। এছাড়াও, টিo কৌনিক সম্পর্কে গভীর জ্ঞান পান, তালিকাভুক্তি বিবেচনা করুন ' এডুরেকা থেকে।
এই নিবন্ধে, আমি নিম্নলিখিত বিষয়গুলি নিয়ে যাব:
কৌণিক পদার্থের ভূমিকা
উপকরণ গুগল ২০১৪ সালে বিকাশ করেছে এমন একটি ডিজাইন ভাষা হিসাবে চালু হয়েছিল। উপাদান নকশা একটি সরঞ্জামফ্রন্ট-এন্ড ফ্রেমওয়ার্কগুলির জন্য, যা আপনাকে সহায়তা করে ভিজ্যুয়াল , গতি , এবং মিথষ্ক্রিয়া নকশা। এটি আপনাকে বিভিন্ন ডিভাইস এবং বিভিন্ন স্ক্রিন আকারে অভিযোজিত করতে সহায়তা করে। এই অ্যাপ্লিকেশনগুলিকে আরও বেশি করে তৈরি করতে প্রথমে এটি AngularJS এ ট্যাগ হয়েছিল আকর্ষণীয় এবং সঞ্চালন দ্রুত । তারপরে গুগল স্ক্র্যাচ থেকে পুরোপুরি কোডটি আবার লিখেছিল এবং জেএসকে সরিয়ে দিয়েছে। , এবং নামকরণ ২০১ September সালের সেপ্টেম্বরে Later , এবং এর নামকরণ করেছেন কৌণিক পদার্থ।
কৌণিক পদার্থ বা ইউজার-ইন্টারফেস (ইউআই) উপাদানগুলি আপনাকে একটিতে আপনার অ্যাপ্লিকেশনটি ডিজাইন করতে সহায়তা করে কাঠামোগত পদ্ধতি। তারা ব্যবহারকারীদের আকর্ষণ করে এবং এটি তৈরি করে অ্যাক্সেস করা সহজ উপাদান বা উপাদান আপনার উপাদান উপস্থিত। তারা অনন্য সহ আপনার অ্যাপ্লিকেশনগুলি আকর্ষণীয় উপায়ে ডিজাইনে সহায়তা করে শৈলী এবং আকার । এই উপাদানগুলি আপনার অ্যাপ্লিকেশনটিকে আরও বেশি তৈরি করতে সহায়তা করে সামঞ্জস্যপূর্ণ , দ্রুত , বহুমুখী এমনকি ডিজাইন প্রতিক্রিয়াশীল ওয়েবসাইট।
কৌণিক উপাদান ইনস্টলেশন
এখন, কীভাবে কৌণিক উপকরণগুলি ইনস্টল করতে হয় তার একটি দ্রুত টিউটোরিয়াল দিয়ে শুরু করি। প্রথম জিনিসগুলি, আপনার সিস্টেমে কৌনিক ইনস্টল করা আছে তা নিশ্চিত করুন। আপনি যদি কৌণিকর সাথে পরিচিত না হন তবে লিঙ্কটি দেখুন । আপনার সমস্ত কিছু সেট আপ হয়ে গেলে, আপনি নিম্নলিখিত কমান্ডটি ব্যবহার করে আপনার প্রকল্পে কৌণিক পদার্থ যুক্ত করতে পারেন:
@ কৌনিক / উপাদান যোগ করুন
প্রথমত, এটি আপনাকে প্রাক-বিল্ট থিমের নাম বা একটি কাস্টম থিম চয়ন করতে বলবে।
আপনার অ্যাপ্লিকেশন স্টাইল করার জন্য আপনাকে 'নীল / গোলাপী' প্রাক-বিল্ট থিম বেছে নিতে হবে যা পূর্বনির্ধারিত থিম। আপনি 'কাস্টম' থিমটিও চয়ন করতে পারেন যাতে আপনি আপনার থিম ফাইলগুলি কাস্টমাইজ করতে পারেন যাতে সমস্ত সাধারণ শৈলী অন্তর্ভুক্ত থাকে।
পরবর্তী, এটি আপনাকে সেট আপ করতে বলবে হামারজেএস । হামারজেএস একটি জনপ্রিয় লাইব্রেরি, মূলত কৌণিক প্রয়োগে ব্যবহৃত হয়। এটি সোয়াইপ, প্যান, চিম্টি, ঘোরানো এবং আরও অনেক কিছু যেমন স্পর্শ অঙ্গভঙ্গির জন্য সমর্থন যোগ করে, বিশেষত মোবাইল অ্যাপ্লিকেশনগুলিতে।
আপনি 'হ্যাঁ' বা 'না' বেছে নিতে পারেন। আপনি যখন মোবাইলে আপনার অ্যাপ্লিকেশনটি ব্যবহার করেন তখন হ্যামারজেএস কার্যকর হতে পারে। মোবাইলগুলি যেমন টাচ ডিসপ্লে অফার করে, এই অঙ্গভঙ্গিগুলি আরও কার্যকর এবং আপনার মোবাইল অ্যাপ্লিকেশনটিতে ট্রেন্ডি দেখাতে পারে।
আপনি আপনার পছন্দটি চয়ন করার পরে, এটি আপনাকে সেট আপ করতে বলবে ব্রাউজার অ্যানিমেশন কৌণিক উপাদান জন্য।
আপনাকে 'হ্যাঁ' চয়ন করতে হবে যাতে আপনি নিজের অ্যাপ্লিকেশনটিতে অ্যানিমেশন ব্যবহার করতে পারেন। কৌণিক অ্যানিমেশনগুলি আপনার অ্যাপ্লিকেশনটিকে আরও মজাদার এবং ব্যবহার করা সহজ করে তোলে। এটি আপনার অ্যাপ্লিকেশন এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারে যা ব্যবহারকারীদের দৃষ্টি আকর্ষণ করে।
পরবর্তীকালে, এটি আপনার আবেদনে কৌণিক পদার্থ ইনস্টল করবে will
কৌণিক উপাদান উপাদান
আগেই উল্লেখ করা হয়েছে, কৌণিক উপাদানগুলির উপাদানগুলি কিছুই নয় but ইউআই / ইউএক্স ডিজাইন উপাদান। এগুলিতে বিভিন্ন ধরণের উপাদান রয়েছে যেমন ফর্ম নিয়ন্ত্রণ, নেভিগেশন, বোতাম এবং সূচক, পপআপস এবং আরও অনেক কিছু। এই উপাদানগুলি আপনাকে মেটেরিয়াল ডিজাইনের স্পেসিফিকেশন অনুযায়ী নিদর্শনগুলি প্রয়োগ করতে সহায়তা করে।
এগিয়ে চলুন, আসুন আপনার কৌণিক প্রয়োগে এই উপাদানগুলি কীভাবে প্রয়োগ করা যায় তার কয়েকটি উদাহরণ দেখুন।
নেভিগেশন
প্রথমে আমি নেভিগেশনের উপাদানগুলি নিয়ে আলোচনা করব।
- সরঞ্জামদণ্ড
আপনাকে নিম্নলিখিত কোডটি টাইপ করতে হবে app.componal.html আপনার অ্যাপ্লিকেশনটিতে টুলবার উপাদানটি ব্যবহার করতে ফাইল
কৌণিক পদার্থ টিউটোরিয়াল কৌণিক পদার্থের একটি ধারক যা শিরোনাম এবং শিরোনামগুলির জন্য ব্যবহৃত হয়। রঙ ধারক ব্যবহার করে পরিবর্তন করা যেতে পারে রঙ সম্পত্তিডিফল্টরূপে, সরঞ্জামদণ্ডগুলি বর্তমান থিমের উপর ভিত্তি করে একটি নিরপেক্ষ ব্যাকগ্রাউন্ড রঙ ব্যবহার করে অর্থ হালকা বা গা or়।আপনি তিনটি ডিফল্ট থিম চয়ন করতে পারেন যা: ‘প্রাথমিক’ , ‘উচ্চারণ’ , বা ‘সতর্ক’ ।এই সরঞ্জামদণ্ডটি ব্যবহার করতে, আপনাকে প্রথমে এটি আমদানি করতে হবে app.module.ts নিম্নলিখিত কমান্ডটি ব্যবহার করে কৌণিক পদার্থ থেকে ফাইল:
'@ কৌণিক / উপাদান' থেকে {MatToolbarModule import আমদানি করুনপরে, আপনাকে এই মডিউলটি যুক্ত করতে হবে আমদানি: [] বিভাগে অবস্থিত app.module.ts ফাইল।
আমদানিগুলি: [ব্রাউজারমডিউল, অ্যাপআর্টিংমোডিয়াল, ব্রাউজারঅ্যানিমেশনস মোডুল, ম্যাটটুলবারমডিউল],
মাদুর-সরঞ্জামদণ্ডের জন্য, আপনাকে ' ম্যাটটুলমোডুল ”।
এখন, নিম্নলিখিত কমান্ডটি ব্যবহার করে আপনার প্রকল্পটি পরিবেশন করা যাক:
পরিবেশন -ও
এটি নীচে দেখানো হিসাবে আপনার সিস্টেমের ডিফল্ট ব্রাউজারে আপনার প্রকল্পটি খুলবে:
আপনি যদি নিজের পছন্দ অনুযায়ী সরঞ্জামদণ্ডের রঙ পরিবর্তন করতে চান তবে আপনি এটি সিএসএস স্টাইলশিটের সাহায্যে করতে পারেন। আমি আপনাকে একটি উদাহরণ দেখাতে দিন।
প্রথমত, আপনাকে মুছতে হবে রঙ সম্পত্তি থেকে ধারক এবং তারপরে, নিম্নলিখিত টাইপ করুন সিএসএস কোডটি app.componal.css ফাইল।
মাদুর-সরঞ্জামদণ্ড {পটভূমি-রঙ: / * আপনার পছন্দের রঙ / রঙ: / * পাঠ্য-রঙ * /এখন, ফলাফলটি দেখতে আপনার প্রকল্পটি পরিবেশন করুন।
- তালিকা
এরপরে, আমি মেনু উপাদানটি নিয়ে আলোচনা করব। আপনার নিজের মধ্যে নিম্নলিখিত কোডটি টাইপ করতে হবে app.componal.html ফাইল।
কৌণিক পদার্থ টিউটোরিয়াল মেনু সেটিংস সহায়তাএর উপর কিছু স্টাইলিং যুক্ত করা যাক তালিকা বোতাম আপনার নিজের মধ্যে নিম্নলিখিত কোডটি টাইপ করতে হবে app.componal.css ফাইল।
.স্পেস {ফ্লেক্স: 1 1 অটো} .btns {প্রস্থ: 100px উচ্চতা: 40px হরফ আকার: বড় সীমানা ব্যাসার্ধ: 10px সীমানা: 3px শক্ত # 113c89 ব্যাকগ্রাউন্ড-রঙ: হালকা কোরাল ralশ্রেণি = 'স্থান' 'সরঞ্জামদণ্ডের নাম' এবং 'মেনু বিকল্প' এর মধ্যে ব্যবধান যোগ করতে ব্যবহৃত হয়।
যদি আপনি সিএসএস স্টাইলশিটের সাথে পরিচিত না হন তবে আপনি আমাদের ব্লগটি উল্লেখ করতে পারেন গভীরতা পেতে।
যেমন সরঞ্জামদণ্ড ব্যবহার করুন এবং পাত্রে, আমদানি করার জন্য আপনাকে উপরের মতো একই পদ্ধতি অনুসরণ করতে হবে ম্যাটমেনুমডুল এবং ম্যাটবটনমডুল থেকে কৌণিক উপাদান এবং এগুলিতে যুক্ত করুন আমদানি: [] বিভাগে অবস্থিত app.module.ts ফাইল।
আউটপুট প্রদর্শন করতে এখনই আপনার প্রকল্প পরিবেশন করুন।
ফর্ম নিয়ন্ত্রণসমূহ
এখন, আমি ফর্ম নিয়ন্ত্রণের উপাদানগুলি নিয়ে আলোচনা করব।
- ফর্ম ফিল্ড
নাম অনুসারে, ফর্ম-ফিল্ড ব্যবহারকারীর দেওয়া ইনপুটগুলির জন্য ব্যবহৃত হয়। এটি কোনও ব্যবহারকারীর নিবন্ধনের জন্য, কোনও অ্যাপ্লিকেশন বা কোনও ওয়েবসাইটে সাধারণত ব্যবহৃত হয়।
আপনাকে নিম্নলিখিত কোডটি টাইপ করতে হবে app.componal.html আপনার অ্যাপ্লিকেশনটিতে ফর্ম-ফিল্ড উপাদান ব্যবহার করতে ফাইল।
ফর্ম নিয়ন্ত্রণসমূহ
নাম
যথারীতি আপনার আমদানি করা দরকার ম্যাটফর্মফিল্ডমডিউল এবং MatInputModule এবং এগুলিতে যুক্ত করুন আমদানি: [] বিভাগে অবস্থিত app.module.ts ফাইল। উপরের কোডটি সাধারণত 'প্রথম নাম', 'শেষ নাম', ইত্যাদির মতো নামগুলি ইনপুট করতে ব্যবহৃত হয় আপনি এমনকি ভ্যালিডেটর ব্যবহার করতে পারেন এবং একটি ক্ষেত্রকে বাধ্যতামূলক করতে পারেন। উদাহরণস্বরূপ, আপনি এটি ইমেল ক্ষেত্রে ব্যবহার করতে পারেন। আপনি পাসওয়ার্ডের জন্য পাঠ্যটি আড়াল বা লুকিয়ে রাখতে পারেন। আপনার রেফারেন্সের জন্য, নীচের কোডটি দেখুন:
আপনার ইমেল প্রবেশ করান {{getErrorMessage ()} your আপনার পাসওয়ার্ড লিখুন {{লুকান? 'দৃশ্যমানতা_অফ': 'দৃশ্যমানতা'}আপনার app.componal.css ফাইল, আপনার নিম্নলিখিত কোড যুক্ত করতে হবে:
। উদাহরণ-ধারক {প্যাডিং-বাম: 50px}এখন, আপনার মধ্যে app.componal.ts ফাইল, আপনি আমদানি করা প্রয়োজন ফর্মকন্ট্রোল এবং বৈধকরণকারী থেকে @ কৌনিক / ফর্ম ডিরেক্টরি
'@ কৌনিক / ফর্ম' থেকে {ফর্মকন্ট্রোল, ভ্যালিডেটর import আমদানি করুননিম্নলিখিত শ্রেণীর ভিতরে একটি ত্রুটি প্রদর্শনের জন্য আপনাকে এমনকি পাঠ্য যুক্ত করতে হবে।
ক্লাস অ্যাপকোম্পোনেন্ট রফতানি করুন {ইমেল = নতুন ফর্মকন্ট্রোল ('', [Validators.required, Validators.email]) getErrorMessage () {this.email.hasError ('প্রয়োজনীয়') ফিরিয়ে দিন? 'আপনার অবশ্যই একটি মান লিখতে হবে': this.email.hasError ('ইমেল')? 'বৈধ ইমেল নয়': ''} আড়াল করুন = সত্য}উপরের পদ্ধতিটি উল্লেখ করে আপনার নিজের মধ্যে নিম্নলিখিত কোডটি টাইপ করতে হবে app.module.ts প্রয়োজনীয় মডিউলগুলি আমদানি করার জন্য ফাইল।
'@ কৌনিক / ফর্ম' থেকে '@ কৌনিক / উপাদান' থেকে আমদানি করুন {MatIconModule importপরে, আপনাকে এই মডিউলগুলি যুক্ত করতে হবে আমদানি: [] অধ্যায়.
- রেডিও বোতাম
রেডিও বোতামগুলি সাধারণত বিভিন্ন বিকল্পের মধ্যে পছন্দ চয়ন করার জন্য ব্যবহৃত হয়। আপনি রেফারেন্সের জন্য নিম্নলিখিত কোডটি চেক করতে পারেন।
জন্য app.componal.html ফাইল,
লিঙ্গ
পুরুষ মহিলা
জন্য app.componal.css ফাইল,
মাদুর-রেডিও-বোতাম {প্যাডিং-বাম: 50px}এখন, আপনার আমদানি করা দরকার ম্যাট্র্যাডিওমোডুল এবং এটি যোগ করুন আমদানি: [] বিভাগে অবস্থিত app.module.ts ফাইল।
পরে, আউটপুট প্রদর্শনের জন্য আপনাকে আপনার প্রকল্পটি পরিবেশন করতে হবে।
এগিয়ে চলতে, আমি কৌণিক উপাদান সিডিকে নিয়ে আলোচনা করব।
কৌণিক উপাদান সিডিকে
সিডিকে, হিসাবেও পরিচিত কম্পোনেন্ট দেব কিট , একটি গ্রন্থাগার পূর্বনির্ধারিত আচরণ কৌণিক পদার্থে, এটি এমন সরঞ্জামগুলির একটি সেট যা সাধারণ প্রয়োগ করে মিথস্ক্রিয়া নিদর্শন এবং অ্যাপ্লিকেশন বৈশিষ্ট্য । এটিতে মেটেরিয়াল ডিজাইনের সাথে সম্পর্কিত কোনও স্টাইলিং নেই। আসুন সিডিকে-র একটি উদাহরণ দেখি।
- টেক্সট ক্ষেত্রের
পাঠ্য ক্ষেত্র উপাদান পাঠ্য ইনপুট ক্ষেত্রগুলির সাথে কাজ করার জন্য ইউটিলিটিগুলি সরবরাহ করে। ইনপুটগুলির আকার পরিবর্তন করতে আপনি টেক্সট ফিল্ডে সিডিকে উপাদানগুলি ব্যবহার করতে পারেন। কীভাবে এটি প্রয়োগ করা যায় তার উদাহরণ দেখুন see
জন্য app.componal.html ফাইল,
কৌণিক উপাদান সিডিকে
হরফ আকার 10px 12px 14px 16px 18px 20px স্বয়ংক্রিয় পাঠ্য
জন্য app.componal.ts ফাইল, আপনাকে প্রথমে প্রয়োজনীয় উপাদানগুলি আমদানি করতে হবে।
'@ কৌণিক / সিডি কে / পাঠ্য ক্ষেত্র' আমদানি থেকে d সিডিকেটেক্সটারিআউটসাইজ} '@ কৌণিক / কোর' আমদানি থেকে এনজিওন, ভিউচিল্ড '' আরএক্সজেএস / অপারেটর 'থেকে নেওয়া {নিন importএখন, আপনাকে ক্লাসের মধ্যে নিম্নলিখিত কোডগুলি টাইপ করতে হবে।
বর্গক্ষেত্রে ফাংশনগুলি কী
ক্লাস অ্যাপকোম্পোনেন্ট onent কনস্ট্রাক্টর (প্রাইভেট _ngZone: NgZone) {} @ ভিউচিল্ড ('অটোসাইজ', {স্ট্যাটিক: ভুয়া os) অটোসাইজ: সিডিকেটেক্সাটারআউটসাইজ ট্রিগার রিসাইজ ()। this._ngZone.onStable.pipe (নিন (1)) সাবস্ক্রাইব (1 ) = & এম্প্যাম্প্যাম্প্ট এই.আউটোসাইজ.স্রিজোটোফিট কনটেন্ট (সত্য))}}পরবর্তী, আপনার আমদানি করা দরকার ম্যাটসিলেটমোডুল এবং এটি যোগ করুন আমদানি: [] বিভাগে অবস্থিত app.module.ts ফাইল।
অবশেষে, আউটপুট প্রদর্শন করতে আপনাকে আপনার প্রকল্পটি পরিবেশন করতে হবে।
এটি উপসংহার নয় এবং কৌণিক পদার্থে আরও কয়েকটি উপাদান রয়েছে। আপনি তাদের থেকে উল্লেখ করতে পারেন সরকারী ওয়েবসাইট কৌণিক উপাদান।
এটি দিয়ে আমি আমার ব্লগটি শেষ করতে চাই। আমি আশা করি আপনি কৌণিক পদার্থের মৌলিক বিষয়গুলি সম্পর্কে পরিষ্কার।এই নিবন্ধটি সম্পর্কে আপনার যদি কোনও সন্দেহ বা প্রশ্ন থাকে তবে নীচের মন্তব্যগুলিতে সেগুলি পোস্ট করতে দ্বিধা করবেন না।
আপনি যদি এই ব্লগ থেকে সবে যা কিছু শিখতে চান এবং আরও কিছু জানতে চান কৌণিক , এবং একজন দক্ষ কৌণিক বিকাশকারী এর দিকে আপনার ক্যারিয়ার গিয়ার করুন, তারপরে আমাদের জন্য তালিকাভুক্তি বিবেচনা করুন ' ।
আমাদের জন্য একটি প্রশ্ন আছে? দয়া করে এই 'কৌণিক উপাদান' ব্লগের মন্তব্য বিভাগে উল্লেখ করুন এবং আমরা যত তাড়াতাড়ি সম্ভব আপনার কাছে ফিরে আসব।