packages/eui/packages/components/eui-message-box/eui-message-box.component.ts
Component for displaying modal message boxes with structured content and customizable actions. This component provides a user-friendly interface for confirmation dialogs, alerts, and other types of modal messages.
The component supports various styling variants through the BaseStatesDirective hostDirective, customizable buttons, and configurable behavior for dialog actions.
AfterViewInit
OnDestroy
changeDetection | ChangeDetectionStrategy.OnPush |
encapsulation | ViewEncapsulation.None |
HostDirectives |
BaseStatesDirective
Inputs : euiPrimary euiSecondary euiInfo euiSuccess euiWarning euiDanger euiAccent euiVariant
|
selector | eui-message-box |
imports |
TranslateModule
PortalModule
OverlayModule
A11yModule
DragDropModule
EUI_BUTTON
EUI_ICON
|
templateUrl | ./eui-message-box.component.html |
Properties |
Methods |
|
Inputs |
Outputs |
acceptLabel |
Type : string
|
Default value : 'eui.OK'
|
Label for the accept/confirm button. Can be a translation key. |
dismissLabel |
Type : string
|
Default value : 'eui.CANCEL'
|
Label for the dismiss/cancel button. Can be a translation key. |
e2eAttr |
Type : string
|
Default value : 'eui-dialog'
|
Data attribute for e2e testing purposes. |
hasAcceptButton |
Type : boolean
|
Default value : true
|
Whether to show the accept/confirm button. |
hasDismissButton |
Type : boolean
|
Default value : true
|
Whether to show the dismiss/cancel button. |
hasNoBodyPadding |
Type : boolean
|
Default value : false
|
Whether to remove padding from the message box body. |
height |
Type : string
|
Default value : 'auto'
|
Height of the message box. |
isDraggable |
Type : boolean
|
Default value : false
|
Whether the message box can be dragged around the screen. |
isHandleCloseOnAccept |
Type : boolean
|
Default value : false
|
Whether to manually handle closing the dialog on accept button click. |
isHandleCloseOnClose |
Type : boolean
|
Default value : false
|
Whether to manually handle closing the dialog on close button click. |
isHandleCloseOnDismiss |
Type : boolean
|
Default value : false
|
Whether to manually handle closing the dialog on dismiss button click. |
title |
Type : string
|
Title text displayed in the message box header. |
width |
Type : string
|
Default value : '33rem'
|
Width of the message box. |
accept |
Type : EventEmitter
|
Event emitted when the accept/confirm button is clicked. |
dismiss |
Type : EventEmitter
|
Event emitted when the dismiss/cancel button is clicked. |
messageBoxClose |
Type : EventEmitter
|
Event emitted when the message box closes. |
messageBoxOpen |
Type : EventEmitter
|
Event emitted when the message box opens. |
Public closeMessageBox |
closeMessageBox()
|
Closes the currently open message box. This method uses the EuiMessageBoxService to close the dialog.
Returns :
void
|
Public openMessageBox |
openMessageBox()
|
Type parameters :
|
Opens the message box with the current configuration. This method configures and displays the message box using the EuiMessageBoxService.
Returns :
void
|
baseStatesDirective |
Default value : inject(BaseStatesDirective)
|
Public content |
Type : string | TemplatePortal
|
Content that will be displayed in the message box body. Can be either a simple string message or a TemplatePortal for more complex content. |
euiMessageBoxFooterDirective |
Type : QueryList<EuiMessageBoxFooterDirective>
|
Decorators :
@ContentChild(undefined)
|
Reference to any custom footer content provided through the eui-message-box-footer directive. Forward reference is used to resolve the circular dependency between the component and directive. |
templateRefFooter |
Type : TemplateRef<EuiMessageBoxFooterDirective>
|
Decorators :
@ViewChild('templateRefFooter')
|
Reference to the template containing the message box footer. This will be used to create a portal for the footer section. |