Notification

Notifications provide a way to display and communicate information related to user actions within a page's content.

DaffNotificationModule

import { DaffNotificationModule } from '@daffodil/design/notification'

@NgModule()
class DaffNotificationModule {}

DAFF_NOTIFICATION_COMPONENTS

import { DAFF_NOTIFICATION_COMPONENTS } from '@daffodil/design/notification'

const DAFF_NOTIFICATION_COMPONENTS: readonly [typeof DaffNotificationComponent, typeof DaffNotificationActionsDirective, typeof DaffNotificationMessageDirective, typeof DaffNotificationTitleDirective, typeof DaffNotificationSubtitleDirective, typeof DaffPrefixSuffixModule]

DaffNotificationOrientation

import { DaffNotificationOrientation } from '@daffodil/design/notification'

type DaffNotificationOrientation = 'horizontal' | 'vertical'

Type	Options
DaffNotificationOrientation	`'horizontal' \| 'vertical'`

DaffNotificationComponent

DaffNotificationComponent provides a way to display and communicate information related to user actions within a page's content.

import { DaffNotificationComponent } from '@daffodil/design/notification'

@Component()
class DaffNotificationComponent implements DaffPrefixable {
  faTimes: faTimes
  @ContentChild() _prefix: DaffPrefixDirective
  @ContentChild() _actions: DaffNotificationActionsDirective
  @HostBinding() class: true
  @HostBinding() tabindex: '0'
  @HostBinding() 
  get role()
  @HostBinding() 
  get verticalOrientation()
  @HostBinding() 
  get horizontalOrientation()
  @Input() @HostBinding() dismissible: false
  @Input() 
  get orientation(): DaffNotificationOrientation
  set orientation(value): DaffNotificationOrientation
  @Output() closeNotification: EventEmitter<void>
  onCloseNotification(event: Event)
}

Selector: 'daff-notification'

Properties

Name	Type	Description
faTimes	faTimes
_prefix	DaffPrefixDirective
_actions	DaffNotificationActionsDirective
class	true
tabindex	'0'
role		Sets role to alert when `status="warn"` or `status="critical"`. Sets role to status on all other instances.
verticalOrientation
horizontalOrientation
@Input() dismissible	false	Whether or not a notification is closable
@Input() orientation	DaffNotificationOrientation
@Output() closeNotification	EventEmitter<void>	Output event triggered when the close icon is clicked.
onCloseNotification

DaffNotificationActionsDirective

import { DaffNotificationActionsDirective } from '@daffodil/design/notification'

@Directive()
class DaffNotificationActionsDirective {
  @HostBinding() class: true
}

Selector: '[daffNotificationActions]'

Properties

Name	Type	Description
class	true

DaffNotificationTitleDirective

import { DaffNotificationTitleDirective } from '@daffodil/design/notification'

@Directive()
class DaffNotificationTitleDirective {
  @HostBinding() class: true
}

Selector: '[daffNotificationTitle]'

Properties

Name	Type	Description
class	true

DaffNotificationSubtitleDirective

import { DaffNotificationSubtitleDirective } from '@daffodil/design/notification'

@Directive()
class DaffNotificationSubtitleDirective {
  @HostBinding() class: true
}

Selector: '[daffNotificationSubtitle]'

Properties

Name	Type	Description
class	true

DaffNotificationMessageDirective

import { DaffNotificationMessageDirective } from '@daffodil/design/notification'

@Directive()
class DaffNotificationMessageDirective {
  @HostBinding() class: true
}

Selector: '[daffNotificationMessage]'

Properties

Name	Type	Description
class	true