Notifications provide a way to display and communicate information related to user actions within a page's content.
import { DaffNotificationComponent } from '@daffodil/design/notification'
DaffNotificationComponent provides a way to display and communicate information related to user actions within a page's content.
@Component()
class DaffNotificationComponent implements DaffPrefixable {
faTimes: IconDefinition = faTimes
@ContentChild() _prefix: DaffPrefixDirective
@ContentChild() _actions: DaffNotificationActionsDirective
@HostBinding() class: boolean = true
@HostBinding() tabindex: string = '0'
@HostBinding()
get role(): "alert" | "status"
@HostBinding()
get verticalOrientation(): boolean
@HostBinding()
get horizontalOrientation(): boolean
@Input() @HostBinding() dismissible: boolean = false
@Input() orientation: DaffNotificationOrientation
@Output() closeNotification: EventEmitter<void> = new EventEmitter()
onCloseNotification(event: Event): void
}
IconDefinition
Default | faTimes |
---|---|
Description |
DaffPrefixDirective
Default | – |
---|---|
Description |
DaffNotificationActionsDirective
Default | – |
---|---|
Description |
boolean
Default | true |
---|---|
Description |
string
Default | '0' |
---|---|
Description |
"alert" | "status"
Default | – |
---|---|
Description | Sets role to alert when |
boolean
Default | – |
---|---|
Description |
boolean
Default | – |
---|---|
Description |
void
Parameter | event: Event |
---|---|
Description |
boolean
Default | false |
---|---|
Description | Whether or not a notification is closable |
DaffNotificationOrientation
Default | – |
---|---|
Description |
EventEmitter<void>
Default | – |
---|---|
Description | Output event triggered when the close icon is clicked. |
import { DaffNotificationActionsDirective } from '@daffodil/design/notification'
@Directive()
class DaffNotificationActionsDirective {
@HostBinding() class: boolean = true
}
import { DaffNotificationTitleDirective } from '@daffodil/design/notification'
@Directive()
class DaffNotificationTitleDirective {
@HostBinding() class: boolean = true
}
import { DaffNotificationSubtitleDirective } from '@daffodil/design/notification'
@Directive()
class DaffNotificationSubtitleDirective {
@HostBinding() class: boolean = true
}
import { DaffNotificationMessageDirective } from '@daffodil/design/notification'
@Directive()
class DaffNotificationMessageDirective {
@HostBinding() class: boolean = true
}
import { DaffNotificationModule } from '@daffodil/design/notification'
@NgModule()
class DaffNotificationModule {}
import { DaffNotificationOrientation } from '@daffodil/design/notification'
type DaffNotificationOrientation = 'horizontal' | 'vertical'