当它弹出时移动小吃栏下方的标签，当它在javascript中消失时将它们移回

Posted 2023-02-23

【中文标题】当它弹出时移动小吃栏下方的标签，当它在javascript中消失时将它们移回

【英文标题】：move tabs underneath snackbar when it pops up and move them back when it is gone in javascript

【发布时间】：2020-04-10 05:24:43

【问题描述】：

我想知道当快餐栏弹出页面顶部时，是否有办法重新调整其下方的标签？就像假设标签位于页面的最顶部一样，高度为 10px 的小吃栏会在页面顶部弹出，然后我希望小吃栏成为顶部元素，并且标签在没有它们的情况下移动到其下方互相重叠？

【问题讨论】：

你想用小吃店做什么？例如。当用户按下按钮“A”时，我想让用户知道进程“b”已经启动。一般来说，snackbar 应该位于页面底部，当snackbar 进入视图时，您不应该为其他组件设置动画。

我了解快餐栏位于页面底部，但对于此特定任务，快餐栏应位于页面顶部。话虽这么说，在这个任务中我想听特定的事件，如果是真的，我希望小吃栏弹出并移动它们下面的选项卡。我准备好了活动部分，只需要知道如何移动小吃栏下方的标签

【参考方案1】：

这是一个堆栈闪电战，可能会做你想做的事

https://stackblitz.com/edit/angular-f9k7ev

基本上，我正在做的是触发一些代码（按钮、事件等）来设置我的快餐栏打开顶部，并向我们的容器（这里是一个 div，为你，你的标签）添加一个类来移动使用 CSS 将它们降低任意值（这里我们使用 10em）。我们还听我们的 afterDismissed() 订阅返回然后删除该类。

 constructor(private _snackBar: MatSnackBar) 

 openSnackBar() 
      const ourSnackbar = this._snackBar.openFromComponent(PizzaPartyComponent, 
           duration: this.durationInSeconds * 1000,
           verticalPosition: 'top'
      );

      ourSnackbar.afterDismissed().subscribe(() => this.removeOurClass());

      let elements = document.getElementsByTagName("div");
      Array.from(elements).forEach(element => 
           element.classList.add('moved');
      );
 

 removeOurClass() 
      let elements = document.getElementsByTagName("div");

      Array.from(elements).forEach(element => 
           element.classList.remove('moved');
      );
 

和我们的 CSS

.moved 
    margin-top: 10em;

以及我们要移动的 html（不是小吃栏），我们要查找的 div。

<div class="mat-app-background basic-container">
    <snack-bar-component-example>loading</snack-bar-component-example>
</div>