August 16, 2022 06:11 pm GMT
Original Link: https://dev.to/urstrulyvishwak/angular-design-pop-over-150d
Angular: Design Pop Over
In almost every SPA, popover is very much used component in Angular.
Here, I am going to design simple pop over. Someone, who are going to make use of this can improve further based on your requirements.
Here is the code:
<!--component.html--><p (mouseover)="showPopOver = true" (mouseleave)="showPopOver = false"> Show Pop Over!</p><div *ngIf="showPopOver" class="pop-over"> <p>It's a pop-over</p></div>
//component.tsimport { Component, VERSION } from '@angular/core';@Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'],})export class AppComponent { showPopOver = false;}
//component.scssp { cursor: pointer;}.pop-over { position: absolute; align-items: center; justify-content: center; border: 1px solid black; border-radius: 10px; width: 16rem; padding: 8rem; z-index: 1; box-shadow: 5px 10px grey;}.pop-over::before { border-width: 10px; border-style: solid; border-color: transparent transparent grey transparent; top: -20px; left: 4px; content: ''; position: absolute;}
Here you can see the same in live:
Hover over Show Pop over!
and observe pop over being shown.
You can follow me here: https://twitter.com/urstrulyvishwak
Thanks.
Original Link: https://dev.to/urstrulyvishwak/angular-design-pop-over-150d
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To