পূর্বনির্ধারিত Material থিম

Web Development - অ্যাঙ্গুলার ম্যাটেরিয়াল (Angular Material) - Angular Material এর থিমিং |

Angular Material এর মধ্যে কিছু পূর্বনির্ধারিত (pre-built) থিম রয়েছে, যা ডেভেলপারদের দ্রুত এবং সহজে ম্যাটেরিয়াল ডিজাইন প্রিন্সিপল অনুসারে অ্যাপ্লিকেশন ডিজাইন করতে সাহায্য করে। এই থিমগুলো মূলত বিভিন্ন রঙের প্যালেট এবং স্টাইল শিটের সংমিশ্রণ, যা অ্যাপ্লিকেশনের জন্য সুন্দর এবং সঙ্গতিপূর্ণ ডিজাইন তৈরি করে।

পূর্বনির্ধারিত Material থিমের তালিকা

Angular Material-এ নিম্নলিখিত পূর্বনির্ধারিত থিমগুলোর মধ্যে নির্বাচন করতে পারেন:

Indigo/Pink (ডিফল্ট থিম)
- এটি হল Angular Material এর ডিফল্ট থিম, যা নীল (Indigo) এবং গোলাপি (Pink) রঙের প্যালেট ব্যবহার করে। এটি বেশিরভাগ অ্যাপ্লিকেশনের জন্য উপযুক্ত এবং আধুনিক ডিজাইন প্রদান করে।
- থিম ফাইল: node_modules/@angular/material/prebuilt-themes/indigo-pink.css
Deep Purple/Amber
- এই থিমটি গভীর বেগুনি (Deep Purple) এবং অ্যাম্বার (Amber) রঙের প্যালেট ব্যবহার করে। এটি কিছুটা গা dark ় এবং উজ্জ্বল রঙের সংমিশ্রণ, যা একটি প্রাণবন্ত এবং আধুনিক ফিল দেয়।
- থিম ফাইল: node_modules/@angular/material/prebuilt-themes/deep-purple-amber.css
Pink/Blue Grey
- এই থিমটি গোলাপি (Pink) এবং নীল ধূসর (Blue Grey) রঙের প্যালেট ব্যবহার করে। এটি কিছুটা শান্ত এবং নরম রঙের সংমিশ্রণ, যা নিরপেক্ষ এবং স্টাইলিশ অ্যাপ্লিকেশন ডিজাইনের জন্য আদর্শ।
- থিম ফাইল: node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css
Purple/Green
- এই থিমটি বেগুনি (Purple) এবং সবুজ (Green) রঙের প্যালেট ব্যবহার করে, যা একটি দৃষ্টিনন্দন এবং প্রাকৃতিক লুক তৈরি করে। এটি পরিবেশবান্ধব বা স্বাস্থ্য সম্পর্কিত অ্যাপ্লিকেশনের জন্য আদর্শ হতে পারে।
- থিম ফাইল: node_modules/@angular/material/prebuilt-themes/purple-green.css

পূর্বনির্ধারিত থিম ব্যবহার করা

পূর্বনির্ধারিত থিম ব্যবহার করতে, আপনাকে angular.json ফাইলে থিমের CSS ফাইলটি যোগ করতে হবে। নিচে এর উদাহরণ দেওয়া হলো:

angular.json ফাইলে থিম যোগ করা:

"styles": [
  "src/styles.css",
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]

এখানে আপনি যেকোনো পূর্বনির্ধারিত থিম নির্বাচন করতে পারেন, যেমন:

"node_modules/@angular/material/prebuilt-themes/deep-purple-amber.css"
"node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css"
"node_modules/@angular/material/prebuilt-themes/purple-green.css"

পূর্বনির্ধারিত থিমের সুবিধা

দ্রুত অ্যাপ্লিকেশন ডেভেলপমেন্ট: আপনি যদি একটি নির্দিষ্ট ডিজাইন বা থিম চান, তবে পূর্বনির্ধারিত থিম ব্যবহার করা খুবই সহজ এবং দ্রুত। এতে সময় বাঁচে এবং ডিজাইন প্রক্রিয়া ত্বরান্বিত হয়।
একক ডিজাইন প্যাটার্ন: প্রতিটি থিমই ম্যাটেরিয়াল ডিজাইনের গাইডলাইন অনুসরণ করে, ফলে একটি সঙ্গতিপূর্ণ এবং প্রফেশনাল ডিজাইন পাওয়া যায়।
কাস্টম থিমের জন্য বেস: পূর্বনির্ধারিত থিমের রঙ এবং স্টাইল কাস্টমাইজ করা সহজ, যাতে আপনার নিজস্ব ব্র্যান্ডিং এবং ডিজাইনের সাথে মিলিয়ে পরিবর্তন করা যায়।

Angular Material এর পূর্বনির্ধারিত থিমগুলো ডেভেলপারদের জন্য একটি শক্তিশালী এবং সুবিধাজনক টুল, যা দ্রুত এবং সুন্দর ডিজাইন তৈরি করতে সাহায্য করে। আপনি আপনার অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় থিমটি বেছে নিতে পারেন এবং সেটি সহজেই অ্যাপ্লিকেশনে প্রয়োগ করতে পারেন।

Content added By

Md Azizur Rahman

পূর্বনির্ধারিত Material থিম

পূর্বনির্ধারিত Material থিম