eui documentation
  1. Components
  2. EclNotificationComponent

File

packages/ecl/components/ecl-notification/ecl-notification.component.ts

Extends

ECLBaseDirective

Metadata

selector ecl-notification
imports AsyncPipe TitleCasePipe EUI_ECL_ICON EUI_ECL_BUTTON TranslateModule
templateUrl ./ecl-notification.component.html

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

isCloseable
Type : boolean
Default value : true

Indicates whether the close button is displayed.
isVisible
Type : boolean
Default value : true

Controls the visibility of the notification. When false, the component is hidden using CSS utility class.
notificationTitle
Type : string

The title of the notification. This is displayed inside the component.
variant
Type : "info" | "success" | "warning" | "error"
Default value : 'info'

Defines the visual style of the notification. Can be one of: 'info' | 'success' | 'warning' | 'error'. Default is 'info'.
class
Type : string
e2eAttr
Type : any
tabindex
Type : number

Outputs

close
Type : EventEmitter

Emits an event when the close button is clicked. Consumers can call preventDefault() on the emitted event to prevent the notification from closing.

HostBindings

attr.role
Type : string
Default value : 'alert'

The ARIA role for the component. Set to "alert" by default.
class
Type : string

Computes the CSS classes applied to the host element, including the modifier for the current variant.
class.ecl-u-d-none
Type : boolean

Applies the ecl-u-d-none utility class when the notification is not visible.

Methods

onCloseClick
onCloseClick(evt: Event)

Handles the click event on the close button. Emits a close event with an instance of EclNotificationCloseEvent. If the event is not prevented, the notification is hidden.

Parameters :
Name Type Optional
evt Event No
Returns : void
getCssClasses
getCssClasses(rootClass: string)
Parameters :
Name Type Optional
rootClass string No
Returns : string

Properties

eclThemeService
Type : unknown
Default value : inject(EclThemeService)
Readonly hasCustomIcon
Type : unknown
Default value : computed(() => this.notificationCustomIcon() !== undefined)
notificationCustomIcon
Type : unknown
Default value : contentChild(EclNotificationIconDirective)
role
Type : string
Default value : 'alert'
Decorators :
@HostBinding('attr.role')

The ARIA role for the component. Set to "alert" by default.

Accessors

isHidden
getisHidden()

Applies the ecl-u-d-none utility class when the notification is not visible.

Returns : boolean
cssClasses
getcssClasses()

Computes the CSS classes applied to the host element, including the modifier for the current variant.

Returns : string
title
gettitle()

Returns the default title text based on the current variant.

Returns : string
icon
geticon()

Returns the icon name based on the current variant.

Returns : string
titleAndIconBaseOnVariant
gettitleAndIconBaseOnVariant()

Returns a mapping of title and icon based on the current variant.

Returns : literal type

results matching ""

    No results matching ""