Как увеличить ячейку сетки по направлению к центру страницы в Angular - PullRequest
Новая
       23

Как увеличить ячейку сетки по направлению к центру страницы в Angular

0 голосов
/ 13 октября 2019

Я использую в Angular8 больше компонентов, чтобы отобразить сетку 3 x 3, и я пытаюсь увеличивать ячейки по щелчку и центрировать их в середине страницы. Я попытался сделать это, изменив компонент o-card (o-card = коробки / ячейки = дочерние элементы компонента grid), это означает добавление функции: 

expand(): void {
this.isActive = ! this.isActive;
}

К сожалению, у этого подхода есть две проблемы:

  1. Карта / поле / ячейка не будут центрироваться
  2. с помощью «transform: scale (1.5)» увеличивает размер текста (чего я не хочу достигать)

У вас есть идеи, как решить любую из этих проблем?

Спасибо!

Grid.html: 

<main>
<div class="grid-container">
<t-card  class="grid-item" [data]="topic">  </t-card>
<ng-container  *ngFor="let o of op;">
    <o-card
      class="grid-item"
      [data]="o">
    </o-card>
</ng-container>
</div>
</main>

grid.css 

.grid-container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
height: 80vh;
margin-top: 5%;
grid-template-rows: 1fr 1fr 1fr;
:host{
  position: fixed;
}
grid-item {min-height: 1000px;}
.grid-item{
  height: 25vh;
}

o-card.css 

:host {
position: relative;

&.isActive {
transform: scale(1.5);
font-size: 1em;
position: relative;
z-index: 100;
}
}
...