طریقه تغییر تصویر دکمه در حالت‌های فعال و غیرفعال، و تغییر استایل نوار پایین در Angular

مقدمه‌ای کوتاه بر Angular و تغییرات استایلی

Angular یکی از محبوب‌ترین فریم‌ورک‌ها برای توسعه برنامه‌های وب است. از ویژگی‌های جذاب آن، توانایی مدیریت داده‌ها و دیدن نتایج به صورت لحظه‌ای است. یکی از نیازهای معمول در توسعه وب، تغییر ظاهر اجزا به ‌هنگام تعامل کاربر با آن‌هاست. به‌ عنوان مثال، شما ممکن است بخواهید تصویر یک دکمه را هنگام کلیک یا فوکوس تغییر دهید تا به کاربر نشان دهید که دکمه فعال است و یا وضعیت خاصی دارد.

در این بخش، ما نحوه استفاده از Angular را برای مدیریت حالت‌های فعال و غیرفعال یک دکمه و همچنین تغییر استایل نوار پایینی صفحه یاد می‌گیریم. این مثال بر اساس تغییر رویدادهای کاربر و مدیریت کلاس‌های CSS به وسیله Angular ساخته شده است.

راه اندازی پروژه

قبل از شروع، مطمئن شوید که شما Node.js و Angular CLI را نصب کرده‌اید. پس از آن، یک پروژه جدید ساخته و به دایرکتوری آن بروید.

  ng new buttonToggle
  cd buttonToggle
  

کد نمونه

  <!-- app.component.html -->
  <button (click)="toggleButton()" [ngClass]="{'active': isActive}">
    <img [src]="isActive ? 'active-image.png' : 'inactive-image.png'" alt="Toggle Button">
  </button>
  <footer [ngStyle]="{'background-color': isActive ? '#333' : '#666'}">
    Footer Content
  </footer>
  

  // app.component.ts
  export class AppComponent {
    isActive = false;
    toggleButton() {
      this.isActive = !this.isActive;
    }
  }
  

توضیح خط به خط کد

<button (click)="toggleButton()" [ngClass]="{'active': isActive}">
این دکمه با کلیک فعال یا غیرفعال می‌شود و کلاس CSS به نام 'active' را بر اساس وضعیت isActive به دست می‌آورد.

<img [src]="isActive ? 'active-image.png' : 'inactive-image.png'" alt="Toggle Button">
تصویر دکمه بر اساس وضعیت isActive تغییر می‌کند: اگر true باشد، تصویر فعال را نشان می‌دهد و اگر false باشد، تصویر غیرفعال.

<footer [ngStyle]="{'background-color': isActive ? '#333' : '#666'}">
استایل پس‌زمینه نوار پایین بر اساس وضعیت isActive تغییر می‌کند. اگر فعال باشد، رنگ تیره‌تر و اگر غیرفعال باشد، روشن‌تر خواهد بود.

export class AppComponent {...
در اینجا کلاسی داریم که وضعیت فعال/غیرفعال دکمه را مدیریت می‌کند.

toggleButton() {...
این تابع وضعیت isActive را تغییر می‌دهد. هر بار که دکمه کلیک می‌شود، مقدار isActive برعکس می‌شود.