المواقع سريعة الاستجابة (fxFlex) - Responsive

 مكتبة FxLayout

هنا أمثلة

الأوامر:

الأمر	الإجراء
fxLayoutAlign="center center"	التوسيط
fxLayoutAlign="space-between center"	تباعد مكونات الـ Tag
fxFlex 50
fxFlex.lg 16.6
fxFlex.md 33.3
fxFlex.sm 33.3
fxLayoutAlign="start center" fxLayout="row" fxLayoutAlign="space-around" fxLayout="row wrap"

 

fxFlex="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.gt-md="50"

------------------------------------------------------------------------------------------------------------------------

إمكانية قراءة عرض الشاشة عن طريق أمر window

    if (window.innerWidth <= 960) {

      this.isHandset = true;

    } else {

      this.isHandset = false;

    }

  @HostListener('window:resize') onWindowResize(): void {

    if (window.innerWidth <= 960) {

      this.isHandset = true;

    } else {

      this.isHandset = false;

    }

  }

الطريقة المتزامنة من ناحية النتائج

  isHandset: boolean = false;

  @HostListener('window:resize', ['$event'])

  async onWindowResize(event: Event): Promise<void> {

    await this.checkWindowSizeAsync();

  }

  private async checkWindowSizeAsync(): Promise<void> {

    const width = window.innerWidth;

    // Simulate an asynchronous operation

    await new Promise(resolve => setTimeout(resolve, 1000));

    this.isHandset = width <= 960;

    console.log(`Window resized to ${width}, isHandset: ${this.isHandset}`);

  }

  private checkWindowSize(): void {

    const width = window.innerWidth;

    this.isHandset = width <= 960;

    console.log(`Initial window size ${width}, isHandset: ${this.isHandset}`);

  }

  //---------------------------------------------

  constructor(private localStorageService: LocalStorageService,

    @Inject(MAT_DIALOG_DATA) public privilege: Privilege,

    public dialog: MatDialog,

  ) {

    this.lang = this.localStorageService.getLanguageCode();

    this.checkWindowSize();

  }

<div mat-dialog-content [dir]="lang === 'ar'? 'rtl': 'ltr'"

[style]="(!isHandset)? 'width: 1000px !important;':''">

    <div fxLayout="column" fxLayout.gt-sm="row wrap" class="p-2">

all options for fxLayoutAlign="space-between space-around"

The fxLayoutAlign directive in Angular Flex Layout is used to control the alignment of child elements within a container along the main and cross axes. The fxLayoutAlign="space-between space-around" value you provided isn't valid since it doesn't follow the proper syntax.

The proper format for fxLayoutAlign is:

html
fxLayoutAlign="<main-axis> <cross-axis>"

Where:

• main-axis aligns children along the primary axis (typically horizontal).
• cross-axis aligns children along the secondary axis (typically vertical).

Here are the available options for both main-axis and cross-axis:

Main Axis Options:

• start: Align items to the start of the container.
• center: Center items in the container.
• end: Align items to the end of the container.
• space-between: Distribute items evenly with the first item at the start and the last item at the end.
• space-around: Distribute items evenly with equal space around them.
• space-evenly: Distribute items evenly with equal space between them.

Cross Axis Options:

• start: Align items to the start of the container's cross-axis.
• center: Center items along the cross-axis.
• end: Align items to the end of the container's cross-axis.
• stretch: Stretch items to fill the container's cross-axis.
• baseline: Align items along their baselines.

Combining Main and Cross Axis:

You can combine any of the main-axis options with any of the cross-axis options. Here are some valid combinations:

1. fxLayoutAlign="start start"
2. fxLayoutAlign="start center"
3. fxLayoutAlign="start end"
4. fxLayoutAlign="start stretch"
5. fxLayoutAlign="start baseline"
6. fxLayoutAlign="center start"
7. fxLayoutAlign="center center"
8. fxLayoutAlign="center end"
9. fxLayoutAlign="center stretch"
10. fxLayoutAlign="center baseline"
11. fxLayoutAlign="end start"
12. fxLayoutAlign="end center"
13. fxLayoutAlign="end end"
14. fxLayoutAlign="end stretch"
15. fxLayoutAlign="end baseline"
16. fxLayoutAlign="space-between start"
17. fxLayoutAlign="space-between center"
18. fxLayoutAlign="space-between end"
19. fxLayoutAlign="space-between stretch"
20. fxLayoutAlign="space-between baseline"
21. fxLayoutAlign="space-around start"
22. fxLayoutAlign="space-around center"
23. fxLayoutAlign="space-around end"
24. fxLayoutAlign="space-around stretch"
25. fxLayoutAlign="space-around baseline"
26. fxLayoutAlign="space-evenly start"
27. fxLayoutAlign="space-evenly center"
28. fxLayoutAlign="space-evenly end"
29. fxLayoutAlign="space-evenly stretch"
30. fxLayoutAlign="space-evenly baseline"

To achieve your layout requirements, you might be looking for something like:

• fxLayoutAlign="space-between center"
• fxLayoutAlign="space-around center"

Ensure you use the correct combination according to your layout needs.