Angular: 디자인 팝 오버

거의 모든 SPA에서 팝오버는 Angular에서 매우 많이 사용되는 구성 요소입니다.

여기서는 심플한 팝오버 디자인을 해보겠습니다. 이것을 사용하려는 사람은 귀하의 요구 사항에 따라 더욱 향상될 수 있습니다.

코드는 다음과 같습니다.

<!--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.ts
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  showPopOver = false;
}



//component.scss
p {
  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;
}

라이브에서도 동일한 내용을 볼 수 있습니다.
Show Pop over! 위로 마우스를 가져가면 팝오버가 표시되는지 확인합니다.

angular-ivy-hnuxva.stackblitz.io


여기에서 나를 팔로우할 수 있습니다.

감사.

좋은 웹페이지 즐겨찾기