A notification provides contextual feedback or information related to user actions within a page's content.
import { DaffNotificationComponent } from '@daffodil/design/notification'
Notifications provide contextual feedback or information related to user actions within a page's content.
Use Toast for app-level alerts.
@Component()
class DaffNotificationComponent {
@Input() status: DaffStatus
@Input() orientation: DaffOrientation = 'vertical'
@Input() dismissible: boolean = false
@Output() closeNotification: EventEmitter<void> = new EventEmitter()
}
DaffStatus| Default | – |
|---|---|
| Description | Sets the status on a component. Options are: |
DaffOrientation| Default | 'vertical' |
|---|---|
| Description | The orientation of the component. Options are: |
boolean| Default | false |
|---|---|
| Description | Whether the notification can be dismissed by the user.
Displays a close icon if |
EventEmitter| Default | – |
|---|---|
| Description | Emits when the notification is closed. |
import { DaffNotificationActionsDirective } from '@daffodil/design/notification'
Actions is used to include actionable buttons related to the notification (e.g., dismiss, navigate).
@Directive()
class DaffNotificationActionsDirective {}
import { DaffNotificationTitleDirective } from '@daffodil/design/notification'
Title is the primary text summarizing the notification.
@Directive()
class DaffNotificationTitleDirective {}
import { DaffNotificationSubtitleDirective } from '@daffodil/design/notification'
@Directive()
class DaffNotificationSubtitleDirective {}
import { DaffNotificationMessageDirective } from '@daffodil/design/notification'
Message provides additional details or supporting context that supplements the notification title. Keep this brief—ideally one to two short sentences.
@Directive()
class DaffNotificationMessageDirective {}
import { DaffNotificationModule } from '@daffodil/design/notification'
@NgModule()
class DaffNotificationModule {}