نوار کناری قابل گسترش و جمع شونده زاویه ای با نمادها: راهنمای گام به گام

ایجاد یک نوار کناری قابل گسترش و جمع شدنی در Angular می تواند تجربه کاربری برنامه شما را به میزان قابل توجهی افزایش دهد. این آموزش راهنمای گام به گام ساختن چنین نوار کناری را همراه با آیکون ها و انتقال های صاف ارائه می دهد. ما همه چیز را از تنظیم ساختار مؤلفه گرفته تا اعمال سبک ها و منطق برای جابجایی نوار کناری پوشش خواهیم داد.

---

یک نوار کناری جمع شونده، قابلیت استفاده یک برنامه را با موارد زیر بهبود می بخشد:

1. پروژه Angular خود را راه اندازی کنید

ابتدا مطمئن شوید که Angular CLI را نصب کرده اید. اگر نه، اجرا کنید:

npm install -g @angular/cli

ایجاد یک پروژه Angular جدید:

ng new angular-sidebar
cd angular-sidebar

اجزای لازم را تولید کنید:

ng generate component sidebar

---

app.component.html

این به عنوان ظرف اصلی برای برنامه عمل می کند. نوار کناری و یک دکمه برای تغییر وضعیت آن اضافه کنید:

app.component.ts

منطق را برای مدیریت وضعیت نوار کناری اضافه کنید:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  isSidebarCollapsed = false;

  onSidebarToggle() {
    this.isSidebarCollapsed = !this.isSidebarCollapsed;
  }
}

---

ساختار HTML نوار کناری، از جمله منوی با موارد تودرتو را تعریف کنید:

رسیدگی به …