角2：如何實現懸停上下文菜單功能

Question

我想實現，其行爲像谷歌收件箱組件懸停上下文菜單：

想知道如何實現它的方式也可以是我的主要擔心是：

1. 我應該如何設法正確顯示/隱藏它？
2. 如何正確安排它的位置？

任何幫助，歡迎。

Answer 1

我可能會在菜單項組件中添加一些代碼，這會在懸停時觸發display: block和display: none。如果您使用*ngFor來顯示菜單項，它看起來就像完成您想要的最簡單的方法。

猜測代碼如下：

<ul class="menu-list"> 
    <li *ngFor="let item of menu.items" class="menu-item"> 
     <span class="content"> <!-- content --> </span> 
     <span class="date-and-check"> <!-- date and check mark --> </span> 
     <span class="submenu"></span> 
    </li> 
</ul> 

然後CSS將類似於此：

.menu-list .menu-item { 
    width: calc(100% - 80px); 
    height: 40px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

.menu-list .menu-item date-and-time { 
    width: 80px; 
    height: 40px; 
} 

.menu-list .menu-item .submenu { 
    width: 100px; 
    height: 40px; 
    display: none; 
} 

.menu-list .menu-item:hover { 
    width: calc(100% - 100px); 
} 

.menu-list .menu-item:hover .date-and-time { 
    display: none; 
} 

.menu-list .menu-item:hover .submenu { 
    display: inline-block; 
}