Needless UI

ಕಾಂಪೊನೆಂಟ್‌ಗಳು

Dialog

ನೇಟಿವ್ dialog ಎಲಿಮೆಂಟ್ ಮೇಲಿನ ಮೋಡಲ್ ವಿಂಡೋ; ಫೋಕಸ್ ಅನ್ನು ಬ್ರೌಸರ್ ನಿರ್ವಹಿಸುತ್ತದೆ.

ಇಂಪೋರ್ಟ್

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

NuiDialog

ನೇಟಿವ್ <dialog> ಅನ್ನು Needless UI ಡೈಲಾಗ್ ಆಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ.

ಸೆಲೆಕ್ಟರ್
dialog[nuiDialog]
ಎಕ್ಸ್‌ಪೋರ್ಟ್ ಹೆಸರು
nuiDialog
ಹೆಸರುಪ್ರಕಾರಡೀಫಾಲ್ಟ್ವಿವರಣೆ
openದ್ವಿಮುಖbooleanfalseಡೈಲಾಗ್ ತೆರೆದಿದೆಯೇ ಎಂಬುದು. ಇದನ್ನು [(open)] ಮೂಲಕ ಬೈಂಡ್ ಮಾಡಿ.
modalಇನ್‌ಪುಟ್booleantrueಹಿನ್ನೆಲೆ ಪರದೆಯೊಂದಿಗೆ, ಹಿಂದಿನ ಪುಟವನ್ನು ಜಡಗೊಳಿಸಿ, ಮೋಡಲ್ ಆಗಿ ತೆರೆಯುತ್ತದೆ.
dismissibleಇನ್‌ಪುಟ್booleantrueEscape ಮತ್ತು ಹಿನ್ನೆಲೆ ಕ್ಲಿಕ್‌ಗಳು ಡೈಲಾಗ್ ಅನ್ನು ಮುಚ್ಚುತ್ತವೆಯೇ ಎಂಬುದು.
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ಇನ್‌ಪುಟ್string''ಡೈಲಾಗ್ ಮುಚ್ಚುವಾಗ ನೀಡುವ ಮೌಲ್ಯ; ಇದನ್ನು (closed) ಎಮಿಟ್ ಮಾಡುತ್ತದೆ.