Оптимізація дизайну на всю висоту в Angular: потужність директив - javascript.org.ua

У попередній статті я обговорював, чому використання vh для встановлення макетів на всю висоту може призвести до проблем, а також чому краще обирати макети з flex з висотою 100%. Такий підхід спрощує обробку різних крайніх випадків і забезпечує більш передбачувані макети. Зараз давайте розглянемо, як зробити цю логіку багаторазовою через створення власної директиви в Angular.

Проблема

Під час розробки сучасних веб-додатків досягнення постійних макетів на всю висоту часто вимагає повторюваних налаштувань CSS. Хоча використання display: flex та height: 100% вирішує багато проблем, дублювання цієї логіки в кожному компоненті є неефективним і схильним до помилок.

Рішення: Власна директива Angular

Упаковуючи цю логіку в багаторазову директиву, ми можемо застосовувати однакову поведінку стилів у різних частинах додатку з мінімальними зусиллями.

Створення директиви

Динамічно встановлює flexDirection (row або column) на основі вхідних даних.
Переконується, що елемент хоста має height: 100% та display: flex.
Охоплює дочірні елементи з певним атрибутом (flexChild), щоб застосувати flex: 1.

import { Directive, ElementRef, Renderer2, Input, OnChanges, SimpleChanges } from '@angular/core';  

@Directive({  
 selector: '[appFlexColumnStyle]'  
})  
export class FlexColumnStyleDirective implements OnChanges {  
 @Input() flexDirection: 'row' | 'column' = 'column';   

 constructor(private el: ElementRef, private renderer: Renderer2) {}  

 ngOnChanges(changes: SimpleChanges) {  
 if (changes['flexDirection']) {  
 this.applyStyles();  
 }  
 }  

 private applyStyles() {  
 // Apply styles to the host element  
 this.renderer.setStyle(this.el.nativeElement, 'display', 'flex');  
 this.renderer.setStyle(this.el.nativeElement, 'flexDirection', this.flexDirection);  
 this.renderer.setStyle(this.el.nativeElement, 'height', '100%');  

 // Apply styles to child elements with the "flexChild" attribute  
 const childFlexElements = this.el.nativeElement.querySelectorAll('[flexChild]');  
 childFlexElements.forEach((flexElement: HTMLElement) => {  
 this.renderer.setStyle(flexElement, 'flex', '1');  
 });  
 }  
}

Як використовувати

Після того як директива створена, ви можете легко застосувати її в шаблонах:


    ....

Директива fullHeight забезпечує, щоб контейнер поводився як гнучкий контейнер з display: flex та height: 100%.
Вхідний параметр flexDirection динамічно встановлює напрямок на row або column.
Дочірні елементи з атрибутом flexChild автоматично отримують flex: 1, забезпечуючи їх розширення, щоб зайняти доступний простір.

Чому варто використовувати директиву?

Багаторазове використання: Директиву можна застосувати до будь-якого компонента або елемента, що зменшує дублювання коду.
Послідовність: Забезпечує однакову поведінку макетів у всіх компонентах.
Гнучкість: Вхідний параметр flexDirection дозволяє динамічно налаштовувати напрямок в залежності від ситуації.
Масштабованість: Коли ваш додаток зростає, керування поведінкою макетів стає простішим, оскільки логіка знаходиться в одному місці.

Висновок

Перетворення логіки макетів на багаторазову директиву — це маленький, але потужний крок до створення масштабованих і підтримуваних додатків. Якщо ви вже стикалися з проблемами непослідовних макетів або дублюванням CSS-правил, розгляньте можливість використання цього підходу для спрощення вашого процесу розробки.

Зверніться до наступного коміту, щоб дізнатися більше про застосування цієї директиви.

Перекладено з: Streamlining Full-Height Design in Angular: The Power of Directives