Toast

Toasts are small messages designed to mimic push notifications. They are used to provide users with application level information.

Usage

API

Services

DaffToastPositionService

import { DaffToastPositionService } from '@daffodil/design/toast'

@Injectable()
class DaffToastPositionService {
  config: DaffToastPosition

  setPosition(position: DaffToastPosition): void
}

Properties

config

DaffToastPosition

Default	–
Description	Reads the current position of the toast. Defaults to bottom center on mobile devices.

() Methods

Parameters

Parameter	`position: DaffToastPosition`
Description	The position of the toast.

DaffToastService

import { DaffToastService } from '@daffodil/design/toast'

Service to display toasts.

@Injectable()
class DaffToastService implements OnDestroy {
  open(
    toast: DaffToastData
    configuration?: Partial<DaffToastConfiguration>
  ): DaffToast
  close(toast: DaffToast): void
}

() Methods

Parameters

Parameter	`toast: DaffToastData`
Description	Data that can be shown on a toast.

Parameter	`configuration: Partial<DaffToastConfiguration>`
Description	Additional configuration options such as duration. The default duration is set to 5000ms.

Parameters

Parameter	`toast: DaffToast`
Description	The instance of toast that you wish to close.

Tokens

DAFF_TOAST_OPTIONS

import { DAFF_TOAST_OPTIONS } from '@daffodil/design/toast'

const DAFF_TOAST_OPTIONS: InjectionToken<DaffToastOptions>

Types

DaffToastConfiguration

import { DaffToastConfiguration } from '@daffodil/design/toast'

interface DaffToastConfiguration {
  duration: number
}

Properties

duration `number`
The duration (in milliseconds) for which a toast remains visible before dismissal. While you can set a duration for toasts with actions, it's generally not recommended, as users should have ample time to interact with them.

duration

number

The duration (in milliseconds) for which a toast remains visible before dismissal.

While you can set a duration for toasts with actions, it's generally not recommended, as users should have ample time to interact with them.

DaffToast

import { DaffToast } from '@daffodil/design/toast'

interface DaffToast {
  dismiss: () => void
  dismissalStream: Observable<void | number>
}

Properties

dismiss `() => void`
Closes the toast.

dismissalStream `Observable<void \| number>`
The observable that emits when the toast is closed.

DaffToastData

import { DaffToastData } from '@daffodil/design/toast'

Possible data that can be shown on a toast

interface DaffToastData {
  title: string
  message: string
  status: DaffStatus
  actions: DaffToastAction[]
  dismissible: boolean
}

Properties

title `string`
A title that provides a quick oveview of the toast.

message `string`
A short message used to provide additional details about the toast.

status `DaffStatus`
Sets a status on the toast.

actions `DaffToastAction[]`
Used to display actions in the toast.

dismissible `boolean`
Whether or not the toast is dismissible.

DaffToastAction

import { DaffToastAction } from '@daffodil/design/toast'

The configurations for an action button rendered inside a toast displayed using the DaffButtonComponent.

interface DaffToastAction {
  type: DaffToastActionButtonType
  content: string
  size: DaffToastActionButtonSize
  color: DaffPalette
  status: DaffStatus
  data: Record<string, any>
  eventEmitter: EventEmitter<DaffToastAction>
}

Properties

type `DaffToastActionButtonType`
The type of button. Matches one of the predefined types supported by `DaffButtonComponent`.

type

DaffToastActionButtonType

The type of button.

Matches one of the predefined types supported by DaffButtonComponent.

content `string`
The text displayed on the button.

size `DaffToastActionButtonSize`
The size of the button. Matches one of the predefined sizes supported by `DaffButtonComponent`.

size

DaffToastActionButtonSize

The size of the button.

Matches one of the predefined sizes supported by DaffButtonComponent.

color `DaffPalette`
The color of the button. Do not use both `color` and `status` simultaneously.

color

DaffPalette

The color of the button.

Do not use both color and status simultaneously.

status `DaffStatus`
The button status. Do not use both `color` and `status` simultaneously.

status

DaffStatus

The button status.

Do not use both color and status simultaneously.

data `Record<string, any>`
Data associated with the action.

eventEmitter `EventEmitter<DaffToastAction>`
An event emitter that fires when the action is triggered.

DaffToastActionButtonSize

import { DaffToastActionButtonSize } from '@daffodil/design/toast'

The available button sizes that can be used in DaffToastAction. These correspond to the types supported by DaffButtonComponent.

type DaffToastActionButtonSize = 'sm' | 'md' | 'lg' | undefined

DaffToastActionButtonType

import { DaffToastActionButtonType } from '@daffodil/design/toast'

The available button styles that can be used in DaffToastAction. These correspond to the types supported by DaffButtonComponent.

type DaffToastActionButtonType = 'raised' | 'underline' | 'stroked' | 'flat' | undefined

Constants

provideDaffToastOptions

import { provideDaffToastOptions } from '@daffodil/design/toast'

const provideDaffToastOptions: <R extends DaffToastOptions = DaffToastOptions>(config: Partial<R> | InjectionToken<Partial<R>>) => FactoryProvider

provideDaffToast

import { provideDaffToast } from '@daffodil/design/toast'

Registers the DaffToastService and DaffToastPositionService for displaying a toast. This provider ensures toasts function correctly within your application.

import { provideDaffToast } from '@daffodil/design/toast';

@NgModule({
    providers: [
        provideDaffToast(),
    ]
)}
export class AppModule {}

const provideDaffToast: () => Provider[]