html - 如何制作 flex 弹出窗口？

Question

我下面的元素看起来与具有 popover(ng-bootstrap) 的元素相似。如您所知，所有这些工具提示、popover 等都不灵活，这意味着当您更改页面大小时它不会变小。要做我决定将 mat-grid(完全按照我想要的方式工作)放在 popover 中，我希望它能完全按照我的意愿工作。当您更改浏览器的宽度时，Mat-grid 变得越来越小，并且行在最小值之后不会被分隔像 bootstrap 一样限制宽度。Mat-grid 在 popover 中不起作用。我怎样才能让它工作？它可以与 mat-grid 或其他东西一起使用，使 popover 灵活。

下面你可以看到两个 mat-grid 布局。我缩小了页面的大小，如果你与实际页面大小比较，popover 看起来很大它应该更小，因为 google 布局越来越小。

这是我在 stackblitz 上的演示。 https://stackblitz.com/edit/angular-nsqsbi-8xn4rg?file=app/main/GridList/grid-list-overview-example.html

我在 popover 体内使用了引导行和列类。并在 stackblitz 上评论了 mat-grid 部分，因为它不起作用

<mat-grid-list cols="1" rowHeight="5:1">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
</mat-grid-list>

Answer 1

它不会调整弹出窗口的大小，因为浏览器不知道何时应该调整弹出窗口的大小。您可以告诉浏览器应该调整弹出窗口的大小 using @media rules .

因此您需要设置@media 规则并在这些规则中覆盖ngb-popover-window 的样式。所以需要把这段代码放到grid-list-overview-example.css

:host ::ng-deep .popover
{    
    background: orange;
    border: 10px solid red;
    max-width: 350px;
    max-height: 50px;
}

@media screen and (max-width: 300px) {
  :host ::ng-deep .popover
  {
    background: lightpink;
    border: 5px solid lightgreen;
    max-width: 50px;
    max-height: 50px;
  }
}

@media screen and (max-width: 205px) {
  :host ::ng-deep .popover
  {
    background: lightgrey;
    border: 5px solid red;
    max-width: 50px;
    max-height: 50px;
  }
}

@media screen and (max-width: 100px) {
  :host ::ng-deep .popover
  {
    background: yellow;
    border: 5px solid lightyellow;
    max-width: 50px;
    max-height: 50px;
  }
}

哪里:

• @media 是一个规则，可以检查视口(viewport)的宽度和高度
• :host::ng-deep 是一种在 Angular 中覆盖样式的方法