Angular: 디자인 팝 오버
5119 단어 csstypescriptangularjavascript
여기서는 심플한 팝오버 디자인을 해보겠습니다. 이것을 사용하려는 사람은 귀하의 요구 사항에 따라 더욱 향상될 수 있습니다.
코드는 다음과 같습니다.
<!--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
여기에서 나를 팔로우할 수 있습니다.
감사.
Reference
이 문제에 관하여(Angular: 디자인 팝 오버), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/urstrulyvishwak/angular-design-pop-over-150d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)