Angular Material এর <mat-expansion-panel> কম্পোনেন্টটি ব্যবহারকারীদের জন্য একটি খুব কার্যকরী UI উপাদান, যা ট্যাবের মতো কাজ করে। এটি সাধারণত কনটেন্ট বা ফর্মের বিভিন্ন অংশ একসাথে আড়াল করতে বা প্রদর্শন করতে ব্যবহৃত হয়। এটি এক্সপ্যান্ডেবল এবং কোল্লাপসেবল কনটেন্ট ব্লক তৈরি করতে সাহায্য করে, যা বিশেষভাবে যখন অনেক কনটেন্ট একসাথে দেখানো হয়, তখন খুব কার্যকরী।

এখানে আমরা দেখবো কিভাবে Angular Material Expansion Panel ব্যবহার করে ফর্মের বিভিন্ন অংশ বা ইনপুট ফিল্ডগুলো প্রদর্শন এবং আড়াল করতে পারি।

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, আপনাকে MatExpansionModule এবং ReactiveFormsModule ইমপোর্ট করতে হবে।

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

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

২. এক্সপ্যানশন প্যানেল ফর্মের সাথে ব্যবহার

এখন, আমরা mat-expansion-panel কম্পোনেন্ট ব্যবহার করে ফর্মের ইনপুট ফিল্ডগুলো একটি এক্সপ্যানশন প্যানেলে রাখব। যখন ব্যবহারকারী প্যানেল এক্সপ্যান্ড করবেন, তখন ফর্মের ফিল্ডগুলো দেখা যাবে এবং যখন কোলাপ্স হবে, তখন ফিল্ডগুলো আড়াল হয়ে যাবে।

HTML টেমপ্লেট

<mat-accordion>
  <mat-expansion-panel [expanded]="isExpanded" (expandedChange)="onExpansionChange($event)">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal Information
      </mat-panel-title>
    </mat-expansion-panel-header>

    <form [formGroup]="form">
      <mat-form-field>
        <mat-label>Name</mat-label>
        <input matInput formControlName="name" required>
      </mat-form-field>

      <mat-form-field>
        <mat-label>Email</mat-label>
        <input matInput formControlName="email" required>
      </mat-form-field>

      <mat-form-field>
        <mat-label>Phone</mat-label>
        <input matInput formControlName="phone">
      </mat-form-field>
    </form>
  </mat-expansion-panel>
</mat-accordion>

এখানে:

• mat-accordion: এটি মূল প্যানেলগুলোকে একত্রে গ্রুপ করে রাখে।
• mat-expansion-panel: এক্সপ্যানশন প্যানেলটি তৈরি করে, যা ফর্ম বা কনটেন্ট প্রদর্শন এবং আড়াল করার জন্য ব্যবহৃত হয়।
• [expanded]: এটি প্যানেল এক্সপ্যান্ডেড বা কোলাপ্সড রয়েছে কিনা তা নিয়ন্ত্রণ করে।
• (expandedChange): এই ইভেন্টের মাধ্যমে প্যানেল এক্সপ্যান্ড হওয়া বা কোলাপ্স হওয়ার পরিবর্তন সনাক্ত করা যায়।

৩. টাইপস্ক্রিপ্ট কোড

এখন, টাইপস্ক্রিপ্ট ফাইলে ফর্মের জন্য একটি FormGroup তৈরি করতে হবে এবং expanded প্রপার্টি ব্যবহার করে এক্সপ্যানশন প্যানেলের অবস্থান নিয়ন্ত্রণ করতে হবে।

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  form: FormGroup;
  isExpanded: boolean = true;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      phone: ['']
    });
  }

  onExpansionChange(event: boolean) {
    console.log("Panel expanded:", event);
  }
}

এখানে:

• FormGroup: এটি ফর্মের বিভিন্ন ইনপুট ফিল্ডের একটি গ্রুপ তৈরি করে।
• Validators.required: ফর্মের ইনপুট ফিল্ডগুলোকে আবশ্যিক হিসেবে নির্ধারণ করে।
• isExpanded: এটি এক্সপ্যানশন প্যানেলের বর্তমান অবস্থা নির্ধারণ করে (কোলাপ্সড বা এক্সপ্যান্ডেড)।

৪. কাস্টম স্টাইলিং

mat-expansion-panel এর কিছু সাধারণ স্টাইল কাস্টমাইজেশন করা যায়। যেমন, আপনি প্যানেলের ব্যাকগ্রাউন্ড রঙ, প্যাডিং, অথবা শ্যাডো পরিবর্তন করতে পারেন।

mat-expansion-panel {
  margin-bottom: 15px;
  background-color: #f1f1f1;
}

mat-expansion-panel-header {
  background-color: #007bff;
  color: white;
}

mat-form-field {
  width: 100%;
}

এখানে:

• mat-expansion-panel: প্যানেলটির নিচে কিছু মার্জিন যোগ করা হয়েছে এবং ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে।
• mat-expansion-panel-header: প্যানেলের হেডারের ব্যাকগ্রাউন্ড রঙ এবং লেখার রঙ পরিবর্তন করা হয়েছে।

৫. একাধিক এক্সপ্যানশন প্যানেল

একাধিক এক্সপ্যানশন প্যানেল তৈরি করার জন্য, আপনি mat-accordion ব্যবহার করতে পারেন, যা সব প্যানেল একসাথে গ্রুপ করে রাখবে।

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Section 1
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>Content for Section 1</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Section 2
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>Content for Section 2</p>
  </mat-expansion-panel>
</mat-accordion>

এখানে, mat-accordion ব্যবহার করে একাধিক এক্সপ্যানশন প্যানেল তৈরি করা হয়েছে। একবারে একটি প্যানেল এক্সপ্যান্ড হবে এবং অন্যটি কোলাপ্স হবে।

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