light mode
night mode
অ্যাঙ্গুলার ম্যাটেরিয়াল (Angular Material)
Angular Material এর পরিচিতি Angular Material কী? ওয়েব ডেভেলপমেন্টে Angular Material এর গুরুত্ব Angular Material ইন্সটল করা Angular Material কনফিগার করা Angular Material এর থিমিং Material Theming এর পরিচিতি পূর্বনির্ধারিত Material থিম কাস্টম থিম তৈরি করা ডার্ক থিম ব্যবহার থিম প্যালেট ব্যবহার করা Angular Material লেআউট Material Grid List Flex Layout দিয়ে রেসপন্সিভ লেআউট Breakpoints এবং Responsiveness Spacing, Gutter এবং Columns Angular Material কম্পোনেন্টস (বেসিক) বাটন বিভিন্ন প্রকারের বাটন (Basic, Raised, Icon, FAB) বাটন স্টাইল এবং অবস্থা চেকবক্স বেসিক চেকবক্স ব্যবহার চেকবক্স গ্রুপিং রেডিও বাটন রেডিও বাটন ব্যবহার রেডিও বাটন গ্রুপ করা সিলেক্ট Material Select ব্যবহার করা মাল্টিপল সিলেকশন ইনপুট Material ইনপুট ফিল্ড ইনপুটের সাথে ফর্ম ভ্যালিডেশন Angular Material ফর্ম কন্ট্রোল Material Form Field অটোকমপ্লিট Reactive Forms এর সাথে অটোকমপ্লিট ব্যবহার ডেটপিকার ডেটপিকার কনফিগার করা ডেট ফরম্যাট কাস্টমাইজ করা স্লাইডার রেঞ্জ স্লাইডার তৈরি করা স্লাইড টগল অপশন সুইচ করতে স্লাইড টগল ব্যবহার Angular Material ন্যাভিগেশন টুলবার সাইডন্যাভ রেসপন্সিভ সাইডন্যাভ তৈরি করা টুলবারের সাথে সাইডন্যাভ কম্বাইন করা মেনু বেসিক Material মেনু নেস্টেড মেনু ট্যাবস ট্যাবড ন্যাভিগেশন তৈরি করা ডাইনামিক ট্যাব Angular Material ডায়ালগ এবং পপআপ Material Dialog ডায়ালগ তৈরি এবং কনফিগার করা ডায়ালগে ডাটা পাস করা টুলটিপ বেসিক টুলটিপ ব্যবহার টুলটিপের পজিশন এবং কাস্টমাইজেশন Snackbar নোটিফিকেশন এর জন্য Snackbar ব্যবহার Snackbar এর স্থায়ীত্ব এবং পজিশন কাস্টমাইজ করা Angular Material ডেটা টেবিল বেসিক Material টেবিল টেবিলের ডাটা সাজানো (Sorting) টেবিলের ডাটা পেজিনেশন টেবিলের ডাটা ফিল্টারিং টেবিলের সারির কাস্টম ডাটা টেমপ্লেট Angular Material ট্রি (Tree) Material Tree এর পরিচিতি ফ্ল্যাট ট্রি বনাম নেস্টেড ট্রি ডাইনামিক ট্রি তৈরি করা লেজি লোডিং ট্রি নোড Angular Material স্টেপার লিনিয়ার এবং নন-লিনিয়ার স্টেপার ব্যবহার টেমপ্লেটের সাথে স্টেপার কাস্টমাইজ করা স্টেপ ভ্যালিডেশন এবং ন্যাভিগেশন Angular Material এক্সপ্যানশন প্যানেল কোলাপসিবল প্যানেল তৈরি করা এক্সপ্যানশন প্যানেল গ্রুপ করা ফর্মের সাথে এক্সপ্যানশন প্যানেল ব্যবহার Angular Material অ্যাডভান্সড টপিকস Material Overlay ওভারলে তৈরি এবং কাস্টমাইজ করা ভার্চুয়াল স্ক্রলিং Material লিস্টে ভার্চুয়াল স্ক্রল প্রয়োগ ড্র্যাগ এবং ড্রপ Material কম্পোনেন্টে ড্র্যাগ এবং ড্রপ প্রয়োগ ড্র্যাগ এবং ড্রপের মাধ্যমে রিসোর্টিং Angular Material এর বেস্ট প্র্যাকটিস Angular Material এ এক্সেসিবিলিটি Material কম্পোনেন্ট কাস্টমাইজ করা মোবাইল ডিভাইসের জন্য Material অপটিমাইজ করা Angular Material কম্পোনেন্টের ইউনিট টেস্টিং Angular Material এর মাধ্যমে একটি পূর্ণাঙ্গ অ্যাপ তৈরি Angular Material দিয়ে রেসপন্সিভ ড্যাশবোর্ড তৈরি Angular Forms এবং Services এর সাথে Material ইন্টিগ্রেশন

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

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

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

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

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

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

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

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

  1. 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 এর পূর্বনির্ধারিত থিমগুলো ডেভেলপারদের জন্য একটি শক্তিশালী এবং সুবিধাজনক টুল, যা দ্রুত এবং সুন্দর ডিজাইন তৈরি করতে সাহায্য করে। আপনি আপনার অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় থিমটি বেছে নিতে পারেন এবং সেটি সহজেই অ্যাপ্লিকেশনে প্রয়োগ করতে পারেন।

common.content_added_by
Md Azizur Rahman

common.read_more

Material Theming এর পরিচিতি কাস্টম থিম তৈরি করা ডার্ক থিম ব্যবহার থিম প্যালেট ব্যবহার করা
টপ রেটেড অ্যাপ

স্যাট অ্যাকাডেমী অ্যাপ

আমাদের অল-ইন-ওয়ান মোবাইল অ্যাপের মাধ্যমে সীমাহীন শেখার সুযোগ উপভোগ করুন।

ভিডিও
লাইভ ক্লাস
এক্সাম
ডাউনলোড করুন

common.or

auth.dont_have_account auth.register

Promotion