Angular Material এর সাহায্যে একটি রেসপন্সিভ সাইডন্যাভ (Sidenav) তৈরি করা খুবই সহজ এবং এটি একটি জনপ্রিয় উপাদান (component) যা মোবাইল, ট্যাবলেট, এবং ডেস্কটপ ডিভাইসে একটি উন্নত এবং ব্যবহারকারী-বান্ধব লেআউট প্রদান করে। সাইডন্যাভ সাধারণত নেভিগেশন বার হিসেবে ব্যবহৃত হয়, যেখানে ইউজাররা বিভিন্ন পেজ বা সেকশনে সহজে নেভিগেট করতে পারেন।
Angular Material এর MatSidenav কম্পোনেন্ট ব্যবহার করে আপনি খুব সহজেই একটি রেসপন্সিভ সাইডন্যাভ তৈরি করতে পারেন।
MatSidenavModule এবং MatButtonModule সহ কিছু অন্যান্য Angular Material মডিউল ইনপোর্ট করতে হবে।
import { NgModule } from '@angular/core';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule,
MatSidenavModule,
MatButtonModule,
MatIconModule
],
...
})
export class AppModule {}
এখন, আপনি MatSidenav কম্পোনেন্ট ব্যবহার করে সাইডন্যাভ তৈরি করতে পারবেন। একটি সাইডন্যাভ সাধারণত দুটি অংশে বিভক্ত থাকে: main content এবং sidenav (নেভিগেশন)। সাইডন্যাভ মোবাইল এবং ডেস্কটপ ডিভাইসে বিভিন্ন আকারে প্রদর্শিত হতে পারে।
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="side" opened>
<mat-nav-list>
<a mat-list-item href="#">Home</a>
<a mat-list-item href="#">About</a>
<a mat-list-item href="#">Contact</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<button mat-button (click)="sidenav.toggle()">Toggle Sidenav</button>
<h1>Welcome to My Website</h1>
</mat-sidenav-content>
</mat-sidenav-container>
এখানে:
mode="side": সাইডন্যাভের স্টাইল নির্ধারণ করে। এটি side বা over হিসেবে হতে পারে। side মানে সাইডন্যাভ ডিফল্টভাবে দৃশ্যমান থাকবে, এবং over মানে এটি বাম বা ডান দিক থেকে স্লাইড হয়ে আসবে।opened: সাইডন্যাভ শুরুতে খোলা থাকবে।মোবাইল এবং ট্যাবলেট ডিভাইসে সাইডন্যাভের আচরণ পরিবর্তন করার জন্য, MatSidenav এর mode এবং opened প্রপার্টি কনফিগার করা যায়। আপনি চাইলে angular flex layout বা CSS media queries ব্যবহার করে এটি রেসপন্সিভ করতে পারেন।
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav [mode]="isHandset ? 'over' : 'side'" [opened]="!isHandset">
<mat-nav-list>
<a mat-list-item href="#">Home</a>
<a mat-list-item href="#">About</a>
<a mat-list-item href="#">Contact</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<button mat-button (click)="sidenav.toggle()">Toggle Sidenav</button>
<h1>Welcome to My Website</h1>
</mat-sidenav-content>
</mat-sidenav-container>
এখানে আমরা isHandset ব্যবহার করেছি, যা Breakpoints চেক করে মোবাইল বা ট্যাবলেট ডিভাইসে অ্যাপ্লিকেশনটি রেসপন্সিভ করে।
import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isHandset: boolean = false;
constructor(private breakpointObserver: BreakpointObserver) {
this.breakpointObserver.observe([Breakpoints.Handset])
.subscribe(result => {
this.isHandset = result.matches;
});
}
}
এখানে:
Handset (মোবাইল) ডিভাইস চেক করতে। যখন মোবাইল ডিভাইসে থাকবে, তখন সাইডন্যাভের মোড over হবে, এবং ডেস্কটপে side হবে।CSS বা SCSS ব্যবহার করে সাইডন্যাভের আউটলুক কাস্টমাইজ করা যায়। উদাহরণস্বরূপ, সাইডন্যাভের ব্যাকগ্রাউন্ড, সাইডন্যাভের প্রস্থ এবং অন্যান্য উপাদান কাস্টমাইজ করা যেতে পারে।
.example-container {
height: 100%;
}
mat-sidenav {
width: 250px;
background: #3f51b5;
}
mat-sidenav-content {
padding: 20px;
}
এখানে, সাইডন্যাভের প্রস্থ 250px এবং ব্যাকগ্রাউন্ড কালার #3f51b5 (নীল) দেওয়া হয়েছে।
মোবাইল ভিউতে আপনি সাইডন্যাভের জন্য একটি toggle button তৈরি করতে পারেন যা সাইডন্যাভকে খোলার এবং বন্ধ করার কাজ করবে।
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav [mode]="isHandset ? 'over' : 'side'" [opened]="!isHandset">
<mat-nav-list>
<a mat-list-item href="#">Home</a>
<a mat-list-item href="#">About</a>
<a mat-list-item href="#">Contact</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<h1>Welcome to My Website</h1>
</mat-sidenav-content>
</mat-sidenav-container>
এখানে, mat-icon-button এবং mat-icon ব্যবহার করে সাইডন্যাভের জন্য একটি মেনু আইকন তৈরি করা হয়েছে যা সাইডন্যাভ টগল করবে।
Angular Material এর মাধ্যমে একটি রেসপন্সিভ সাইডন্যাভ তৈরি করা সহজ এবং কার্যকর। Angular Material এর MatSidenav এবং BreakpointObserver ব্যবহার করে আপনি মোবাইল এবং ডেস্কটপ ডিভাইসের জন্য উপযুক্ত সাইডন্যাভ তৈরি করতে পারেন। এটি স্বয়ংক্রিয়ভাবে সাইডন্যাভের আউটলুক কাস্টমাইজ করে এবং ব্যবহারকারীর জন্য আরও সুবিধাজনক নেভিগেশন ব্যবস্থা প্রদান করে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
