角度2：ホバーコンテキストメニューの機能

Question

を実装するためにどのようにコンテキストメニューを置くGoogleの受信トレイのように振る舞うコンポーネントを実装したいと思います：

それができる方法でそれを実装する方法を疑問に思います私の主な心配は：

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; 
} 

を