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 ইন্টিগ্রেশন

কোলাপসিবল প্যানেল তৈরি করা

Web Development - অ্যাঙ্গুলার ম্যাটেরিয়াল (Angular Material) - Angular Material এক্সপ্যানশন প্যানেল |

Angular Material এর Accordion কম্পোনেন্ট ব্যবহার করে আপনি কোলাপসিবল প্যানেল তৈরি করতে পারেন, যা ব্যবহারকারীদের জন্য একাধিক প্যানেল একসাথে দেখানোর এবং তাদের চাহিদা অনুযায়ী কোলাপস বা এক্সপ্যান্ড (Collapse/Expand) করার সুযোগ প্রদান করে। এটি সাধারণত FAQ সেকশন বা অন্যান্য জায়গায় ব্যবহার করা হয়, যেখানে একাধিক কন্টেন্টকে একসাথে সুশৃঙ্খলভাবে প্রদর্শন করা হয়।

Angular Material এর MatAccordion এবং MatExpansionPanel কম্পোনেন্টের মাধ্যমে কোলাপসিবল প্যানেল তৈরি করা যায়।

১. প্রাথমিক প্রস্তুতি

প্রথমে, MatExpansionModule মডিউলটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।

মডিউল ইমপোর্ট করা

আপনার app.module.ts ফাইলে MatExpansionModule ইমপোর্ট করুন:

import { MatExpansionModule } from '@angular/material/expansion';

@NgModule({
  imports: [
    MatExpansionModule
  ]
})
export class AppModule { }

২. কোলাপসিবল প্যানেল তৈরি করা

এখন MatAccordion এবং MatExpansionPanel ব্যবহার করে একটি কোলাপসিবল প্যানেল তৈরি করবো।

HTML কোড:

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 1
      </mat-panel-title>
      <mat-panel-description>
        This is the first panel
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the content of panel 1.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 2
      </mat-panel-title>
      <mat-panel-description>
        This is the second panel
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the content of panel 2.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 3
      </mat-panel-title>
      <mat-panel-description>
        This is the third panel
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the content of panel 3.</p>
  </mat-expansion-panel>
</mat-accordion>

এখানে:

  • mat-accordion: এটি কোলাপসিবল প্যানেলের মূল কন্টেইনার।
  • mat-expansion-panel: প্রতিটি কোলাপসিবল প্যানেল।
  • mat-expansion-panel-header: প্যানেলের শিরোনাম অংশ যেখানে mat-panel-title এবং mat-panel-description যুক্ত করা হয়।

৩. কোলাপসিবল প্যানেলের আচরণ নিয়ন্ত্রণ করা

আপনি expanded প্রপার্টি ব্যবহার করে প্যানেলের এক্সপ্যান্ড/কোলাপস নিয়ন্ত্রণ করতে পারেন।

HTML কোড:

<mat-accordion>
  <mat-expansion-panel [expanded]="panel1Expanded">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 1
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>This is the content of panel 1.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 2
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>This is the content of panel 2.</p>
  </mat-expansion-panel>
</mat-accordion>

TypeScript কোড:

export class AppComponent {
  panel1Expanded = true; // প্রথম প্যানেল ডিফল্টভাবে এক্সপ্যান্ড থাকবে
}

এখানে, panel1Expanded ভেরিয়েবলটি ব্যবহার করা হয়েছে, যার মাধ্যমে আপনি প্যানেল ১ এর এক্সপ্যান্ড বা কোলাপস করার আচরণ নিয়ন্ত্রণ করতে পারবেন।

৪. একাধিক প্যানেল একসাথে এক্সপ্যান্ড করা

ডিফল্টভাবে, Angular Material Accordion শুধুমাত্র একটি প্যানেল একসাথে এক্সপ্যান্ড হতে দেয়। তবে আপনি চাইলে সব প্যানেল একসাথে এক্সপ্যান্ড বা কোলাপস করতে পারবেন।

HTML কোড:

<mat-accordion multi="true">
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 1
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>This is the content of panel 1.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 2
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>This is the content of panel 2.</p>
  </mat-expansion-panel>
</mat-accordion>

এখানে multi="true" অ্যাট্রিবিউট ব্যবহার করা হয়েছে, যার মাধ্যমে একাধিক প্যানেল একসাথে এক্সপ্যান্ড হতে পারে।

৫. কাস্টম স্টাইলিং (CSS)

Angular Material ডিফল্ট স্টাইলিং প্রদান করে, তবে আপনি চাইলে কাস্টম স্টাইলও করতে পারেন। উদাহরণস্বরূপ, আপনি প্যানেলের শিরোনাম বা কন্টেন্টের ফন্ট, রং ইত্যাদি পরিবর্তন করতে পারেন।

CSS:

mat-expansion-panel {
  margin-bottom: 10px;
}

mat-expansion-panel-header {
  background-color: #f1f1f1;
}

mat-panel-title {
  font-weight: bold;
}

এখানে, আমরা প্যানেলের মাঝে স্পেস (margin) যোগ করেছি এবং শিরোনামের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করেছি।

Angular Material Accordion কম্পোনেন্ট ব্যবহার করে কোলাপসিবল প্যানেল তৈরি করা খুবই সহজ এবং কার্যকরী। এটি বিশেষত FAQ সেকশন, ডাইনামিক কনটেন্ট লোডিং, এবং যেকোনো জায়গায় যেখানে একাধিক অপশন বা কন্টেন্ট সুশৃঙ্খলভাবে উপস্থাপন করা দরকার, সেখানে ব্যবহার করা যায়। Angular Material এর সাহায্যে আপনি কাস্টম স্টাইলিং, এক্সপ্যান্ড/কোলাপস নিয়ন্ত্রণ এবং একাধিক প্যানেল একসাথে এক্সপ্যান্ড করার সুবিধা পেতে পারেন।

Content added By
Md Azizur Rahman

Read more

কোলাপসিবল প্যানেল তৈরি করা

or

Don't have an account? Register

Promotion