Dialog API · Needless UI

ఇంపోర్ట్

import-dialog.ts

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

NuiDialog

నేటివ్ <dialog> ను Needless UI డైలాగ్‌గా మారుస్తుంది.

సెలెక్టర్: dialog[nuiDialog]
ఎక్స్‌పోర్ట్ పేరు: nuiDialog

NuiDialog: ప్రాపర్టీలు
పేరు	టైప్	డిఫాల్ట్	వివరణ
`open`టూ-వే	`boolean`	`false`	డైలాగ్ తెరిచి ఉందో లేదో. దీన్ని `[(open)]` తో బైండ్ చేయండి.
`modal`ఇన్‌పుట్	`boolean`	`true`	బ్యాక్‌డ్రాప్‌తో, వెనుక ఉన్న పేజీని నిష్క్రియం చేస్తూ మోడల్‌గా తెరుచుకుంటుంది.
`dismissible`ఇన్‌పుట్	`boolean`	`true`	Escape, బ్యాక్‌డ్రాప్ క్లిక్‌లు డైలాగ్‌ను మూసివేస్తాయో లేదో.
`size`ఇన్‌పుట్	`'sm' \| 'md' \| 'lg'`	`'md'`	గరిష్ఠ వెడల్పు: `sm` (24rem), `md` (32rem) లేదా `lg` (44rem).
`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`.
`closed`అవుట్‌పుట్	`string`		డైలాగ్ మూసుకున్న ప్రతిసారీ రిటర్న్ విలువను ఎమిట్ చేస్తుంది. ఏదీ ఎంచుకోకుండా మూసివేస్తే అది ఖాళీగా ఉంటుంది.
`close`మెథడ్	`(returnValue?: string) => void`		ఐచ్ఛిక రిటర్న్ విలువతో డైలాగ్‌ను మూసివేస్తుంది.

మీరు సెట్ చేయని కస్టమైజేషన్ ఇన్‌పుట్‌లు అత్యంత సమీపంలోని data-nui-* అట్రిబ్యూట్‌ను అనుసరిస్తాయి. కస్టమైజేషన్ గైడ్ చూడండి.

NuiDialogTitle

డైలాగ్ టైటిల్. దీనికి ఒక id వస్తుంది, ఇది డైలాగ్ యొక్క aria-labelledby అవుతుంది.

సెలెక్టర్: [nuiDialogTitle]

NuiDialogDescription

సంక్షిప్త వివరణ; డైలాగ్ యొక్క aria-describedby దీన్ని సూచిస్తుంది.

సెలెక్టర్: [nuiDialogDescription]

NuiDialogActions

డైలాగ్ దిగువన, చివరి వైపుకు అలైన్ అయిన బటన్‌ల వరుస.

సెలెక్టర్: [nuiDialogActions]

NuiDialogClose

క్లిక్ చేసినప్పుడు తాను ఉన్న డైలాగ్‌ను మూసివేస్తుంది.

సెలెక్టర్: [nuiDialogClose]

NuiDialogClose: ప్రాపర్టీలు
పేరు	టైప్	డిఫాల్ట్	వివరణ
`nuiDialogClose`ఇన్‌పుట్	`string`	`''`	డైలాగ్ మూసుకునేటప్పుడు ఇచ్చే విలువ; దీన్ని `(closed)` ఎమిట్ చేస్తుంది.