Needless UI

Mga component

Dialog

Isang modal window sa native na dialog element, at ang browser ang humahawak sa focus.

Import

import-dialog.ts
import {
  NuiDialog,
  NuiDialogActions,
  NuiDialogClose,
  NuiDialogDescription,
  NuiDialogTitle,
} from '@needless-ui/angular/dialog';

NuiDialog

Ginagawang Needless UI dialog ang isang native na <dialog>.

Selector
dialog[nuiDialog]
Naka-export bilang
nuiDialog
PangalanUriDefaultPaglalarawan
openTwo-waybooleanfalseKung bukas ang dialog. I-bind ito gamit ang [(open)].
modalInputbooleantrueBumubukas bilang modal, may backdrop at inert na page sa likod nito.
dismissibleInputbooleantrueKung naisasara ng Escape at ng mga click sa backdrop ang dialog.
sizeInput'sm' | 'md' | 'lg''md'Maximum na lapad: sm (24rem), md (32rem) o lg (44rem).
enterInputNuiEnterKung paano ito lumilitaw: zoom, fade, drop, rise, unfold, flip, swing, slide o none.
motionInputNuiMotionAng spring na nagpapagalaw sa component: snappy, bouncy, jelly, elastic, lazy, mechanical o none.
springInputNuiSpringKahit anong spring, bilang { stiffness, damping, mass }, na kino-compile sa CSS sa runtime. Ino-override nito ang motion.
cornersInputNuiCornersAng hugis ng mga sulok nito: round, squircle, bevel, scoop, notch o square.
radiusInputNuiRadiusKung gaano kabilog ang mga sulok nito: none, small, medium, large o full.
densityInputNuiDensityKung gaano kalaking espasyo ang kinukuha nito: compact, regular o roomy.
closedOutputstringInilalabas ang return value tuwing nagsasara ang dialog. Walang laman ito kapag na-dismiss ang dialog.
closeMethod(returnValue?: string) => voidIsinasara ang dialog, may opsyonal na return value.

Sinusunod ng mga customization input na hindi mo sine-set ang pinakamalapit na data-nui-* attribute. Tingnan ang gabay sa pag-customize.

NuiDialogTitle

Ang title ng dialog. Nakakakuha ito ng id at nagiging aria-labelledby ng dialog.

Selector
[nuiDialogTitle]

NuiDialogDescription

Maikling paglalarawan, na tinutukoy ng aria-describedby ng dialog.

Selector
[nuiDialogDescription]

NuiDialogActions

Isang hanay ng mga button sa ibaba ng dialog, naka-align sa dulo.

Selector
[nuiDialogActions]

NuiDialogClose

Isinasara ang dialog na kinapapalooban nito kapag na-click.

Selector
[nuiDialogClose]
PangalanUriDefaultPaglalarawan
nuiDialogCloseInputstring''Ang value na ipinapangsara sa dialog, na inilalabas ng (closed).