Блог

Главная - Вопросы по программированию - Идеи для создания грид-системы в Angular, позволяющие компонентам охватывать более одного деления

Идеи для создания грид-системы в Angular, позволяющие компонентам охватывать более одного деления

#javascript #html #angular

#javascript #HTML #angular

Вопрос:

Я собираюсь разработать компонент в Angular, который будет служить шаблоном для будущих проектов. Идея заключается в том, что этот компонент состоит из матрицы строк и столбцов размером N на M (легко выполняемой с помощью HTML), в которой пробелы предназначены для других компонентов.

Проблема в том, что я хочу, чтобы некоторые компоненты могли использовать более одного пробела в этой сетке N на M. Например, диаграмма может иметь размер 2 x 2 в сетке N на M, в то время как карточка для числа вполне может быть 1 x 1.

Проблема в том, что я не хочу переписывать весь HTML каждый раз, когда я хочу, например, переместить компонент 2×2 вдоль сетки.

В этом примере черная сетка заполнена некоторыми компонентами (цветными), которые могут использовать в ней более одного пробела

До сих пор решения, которые я изучал, следующие:

  • Использование стандартной грид-системы bootstrap (мне пришлось бы переписать HTML для компонентов, которые используют более одного пробела)
  • Использование холста (не найдено способа «нарисовать» компонент в холсте)
  • Опишите размер грида и распределение компонентов в коде, генерируя HTML и используя библиотеку ngx-dynamic-hooks для его отображения (не допускает ngIf и ngFor в сгенерированном HTML)

Есть ли более простой способ сделать это? Я что-то упускаю? Я приветствую все идеи: D

Комментарии:

1. material.angular.io/components/grid-list/overview Вы пробовали ? Вы оборачиваете все в <mat-grid-list [cols]="nCols" > или cols="4" , если вы придерживаетесь 4 столбцов. Затем каждый ваш компонент должен быть заключен в <mat-grid-title> a с правильными параметрами.

Ответ №1:

Используйте https://material.angular.io/components/grid-list/examples

Я заменил .ts переменную примера на ту, которая соответствует вашим ожиданиям. Я бы добавил переменную «opacity» в [style.opacity], чтобы вставить пустой заполнитель в первую строку вашего примера.

  tiles: Tile[] = [

    {text: 'ZERO', cols: 2, rows: 2, color: "none",  opacity: 0},
    {text: 'One',  cols: 2, rows: 2, color: 'green'            },
    {text: 'Two',  cols: 2, rows: 2, color: 'red'              },
    {text: 'Three',cols: 1, rows: 3, color: 'orange'           },
    {text: 'Four', cols: 3, rows: 3, color: 'red'              },

];
Метки: ,