Needless UI

컴포넌트

팝오버

버튼 옆에 뜨는 패널과, 마우스를 올리면 나타나는 리치 툴팁입니다.

가져오기

import-popover.ts
import {
  NuiHovercard,
  NuiHovercardTrigger,
  NuiPopover,
  NuiPopoverTrigger,
} from '@needless-ui/angular/popover';

NuiPopover

자신을 연 요소 옆에 배치되는 네이티브 팝오버입니다.

셀렉터
[nuiPopover]
내보내기 이름
nuiPopover
이름타입기본값설명
side입력'top' | 'bottom' | 'start' | 'end''bottom'트리거의 어느 쪽에 열리는지. 공간이 없으면 뒤집힙니다.
align입력'start' | 'center' | 'end''start'그 쪽을 따라 트리거와 어떻게 정렬할지.
offset입력number8트리거와 패널 사이의 간격(픽셀 단위).
arrow입력booleanfalse트리거를 가리키는 화살표를 표시합니다.
enter입력NuiEnter등장하는 방식: zoom, fade, drop, rise, unfold, flip, swing, slide, none 중 하나.
motion입력NuiMotion움직일 때 사용하는 스프링: snappy, bouncy, jelly, elastic, lazy, mechanical, none 중 하나.
spring입력NuiSpring임의의 스프링을 { stiffness, damping, mass } 형식으로 지정하며, 런타임에 CSS로 컴파일됩니다. motion보다 우선합니다.
corners입력NuiCorners모서리 모양: round, squircle, bevel, scoop, notch, square 중 하나.
radius입력NuiRadius모서리 크기: none, small, medium, large, full 중 하나.
density입력NuiDensity차지하는 공간: compact, regular, roomy 중 하나.
openChange출력boolean열리거나 닫힐 때 내보냅니다.
show메서드(anchor: HTMLElement) => void원하는 요소 옆에 엽니다.
hide메서드() => void닫습니다.

설정하지 않은 커스터마이징 입력은 가장 가까운 data-nui-* 속성을 따릅니다. 자세한 내용은 커스터마이징 가이드를 참고하시기 바랍니다.

NuiPopoverTrigger

네이티브 popovertarget으로 팝오버를 열고 닫는 버튼입니다.

셀렉터
button[nuiPopoverTrigger]
이름타입기본값설명
nuiPopoverTrigger입력NuiPopover열 팝오버.

NuiHovercard

트리거를 설명하는 리치 툴팁입니다.

셀렉터
[nuiHovercard]
내보내기 이름
nuiHovercard
이름타입기본값설명
side입력'top' | 'bottom' | 'start' | 'end''bottom'트리거의 어느 쪽에 열리는지. 공간이 없으면 뒤집힙니다.
align입력'start' | 'center' | 'end''start'그 쪽을 따라 트리거와 어떻게 정렬할지.
offset입력number8트리거와 카드 사이의 간격(픽셀 단위).
arrow입력booleanfalse트리거를 가리키는 화살표를 표시합니다.
openDelay입력number500열리기 전까지 마우스를 올려 두어야 하는 시간(밀리초). 키보드 포커스로는 바로 열립니다.
closeDelay입력number300포인터가 벗어난 뒤 닫히기까지의 시간(밀리초).
enter입력NuiEnter등장하는 방식: zoom, fade, drop, rise, unfold, flip, swing, slide, none 중 하나.
motion입력NuiMotion움직일 때 사용하는 스프링: snappy, bouncy, jelly, elastic, lazy, mechanical, none 중 하나.
spring입력NuiSpring임의의 스프링을 { stiffness, damping, mass } 형식으로 지정하며, 런타임에 CSS로 컴파일됩니다. motion보다 우선합니다.
corners입력NuiCorners모서리 모양: round, squircle, bevel, scoop, notch, square 중 하나.
radius입력NuiRadius모서리 크기: none, small, medium, large, full 중 하나.
density입력NuiDensity차지하는 공간: compact, regular, roomy 중 하나.
openChange출력boolean열리거나 닫힐 때 내보냅니다.
show메서드(anchor: HTMLElement) => void원하는 요소 옆에 엽니다.
hide메서드() => void닫습니다.

설정하지 않은 커스터마이징 입력은 가장 가까운 data-nui-* 속성을 따릅니다. 자세한 내용은 커스터마이징 가이드를 참고하시기 바랍니다.

NuiHovercardTrigger

마우스를 올리거나 키보드로 포커스하면 호버 카드를 표시하고, 호버 카드를 이 요소의 설명으로 지정합니다.

셀렉터
[nuiHovercardTrigger]
이름타입기본값설명
nuiHovercardTrigger입력NuiHovercard표시할 호버 카드.