CSS / Angular: расширение div

Question

Сценарий моего проекта:

когда пользователь нажимает на плитку "Животные", она должна расширяться, а другие плитки должны заменяться. Аналогично, при нажатии на плитку «Растения» она должна развернуться, а остальные плитки должны изменить порядок.

=========== 1-й просмотр: ============

=========== 2-й вид ==============

1-я страница показывает, вид плитки

2-я страница показывает, расширенный div при нажатии на плитку.

Пожалуйста, помогите мне достичь этого.

Мой код, как показано ниже. Я могу показать скрыть развернутую плитку, но не могу скрыть плитку, на которой щелкнул пользователь, и изменить ее порядок. Любые намеки для достижения этого? Я не хочу расширять и сокращать анимацию.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  showDiv:boolean = false;
  showDetails():void{
    this.showDiv = !this.showDiv;
  }
}

<div *ngIf="showDiv" style="width:450px;height:150px;border:2px solid black">
  Expanded div
</div>
<br/>
<div (click)="showDetails()" style="width:100px;height:100px;border:2px solid black;clear:both;float:left">
  tile 1
</div>
<div style="width:100px;height:100px;border:2px solid black;float:left;margin-left:10px">
  tile 2
</div>
<div style="width:100px;height:100px;border:2px solid black;float:left;margin-left:10px">
  tile 3
</div>

Answer 1

Я бы порекомендовал использовать классы начальной загрузки, такие как col-lg-12 с ngClass, и переменную, значение которой изменяется по щелчку на основании этой переменной, изменить классы начальной загрузки с col-lg-3 на col-lg-12

Answer 2

Эту проблему можно решить с помощью декоратора ViewChild, но я не думаю, что такое сложное решение необходимо для этой проблемы. Вместо этого мы можем упростить логику отображения плиток.

Прежде всего мы можем переместить определения плиток в компонент и сохранить их в массиве tiles;

tiles = [
  { name: 'Animals' },
  { name: 'Plants'},
  { name: 'Organisms'},
];

Затем мы создаем переменную, представляющую развернутую плитку и массив со всеми нераскрытыми плитками.

expandedTile = null;  
notExpandedTiles = this.tiles;  // at the beginning all tiles are not expanded

Имея все эти данные, шаблон может быть реорганизован с использованием директивы *ngFor. Дополнительные встроенные стили были перемещены в отдельный файл CSS.

<div *ngIf="expandedTile" class="expanded-tile">
  {{expandedTile.name}}
</div>
<br/>
<div class="tiles">
  <div *ngFor="let tile of notExpandedTiles;" (click)="showDetails(tile)" class="tile">
    {{tile.name}}
  </div>
</div>

Когда пользователь щелкает мышью по не развернутой плитке, она передается в качестве аргумента функции showDetails, которая будет изменять соответствующие данные.

showDetails(clickedTile) {
  // assign clickedTile to expandedTile
  this.expandedTile = clickedTile;
  // Assign array of all tiles except clickedTile to notExpandedTiles
  this.notExpandedTiles = this.tiles.filter(tile => tile !== clickedTile);
}

CSS:

.tile, .expanded-tile {
  border: 2px solid black;
}

.tile {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.expanded-tile {
  width: 450px;
  height: 150px;
}

демо: https://stackblitz.com/edit/angular-8wekfm

Answer 3

Я бы предложил вам использовать для этого flexbox (css). При нажатии на эти плитки просто измените свойства flexbox.