Skip to main content

Snackbar Api

openNotification(...)

Special Parameter

  • keepOpenUntilDismissOrDuration: force snackbar to stay open. if true, the snackbar will be kept open until it is dismissed or the duration is reached. If false, the snackbar will be closed after the duration is reached or another snackbar got opnened.
  • duration: undefined: the duration of the snackbar in milliseconds. If set to duration: undefined, the snackbar will be kept open until it is dismissed or another snackbar is opened
  • keepTrack if true, the snackbar will be kept in the snackbar service and can be closed later. If false, the snackbar will be removed from the snackbar service after it is closed.

How to Open

const { snackbarApi } = fyzUtils;
snackbarApi.openNotification('Hallo Welt!', {
    template: 'warning', //optional
    variation: 'full', // optional
    
    ... // customize the template,
    
    keepOpenUntilDismissOrDuration: true, // optional
    duration: undefined, // optional
    keepTrack: true // optional
});

Variations

  1. Minimal minimal

  1. Action Only actionOnly

  1. Headline Only headlineOnly

  1. Indicator Only indicatorOnly

  1. Action Headline actionHeadline

  1. Action Indicator actionIndicator

  1. Headline Indicator headlineIndicator

  1. Full full

Templates

  1. Neutral neutral

Default Variation is headlineIndicator

  1. Info info

Default Variation is headlineIndicator

  1. Warning warning

Default Variation is headlineIndicator

  1. Error error

Default Variation is headlineIndicator

  1. Success success

Default Variation is headlineIndicator

  1. System Alarm systemAlarm

Default Variation is headlineIndicator

  1. Notice notice

Default Variation is headlineIndicator

  1. Acknoledgement Request acknowledgementRequest

Stays open. Needs acknowledgement

  • Default Variation is full
  • Location: Bottom Center
  • keepOpenUntilDismissOrDuration: true // keeps the snackbar open, even a new snackar opened
  • duration: undefined // keeps the snackbar open
  • keepTrack: false // do not track closeAll() has no effect
  • closeShow: true

  1. Critical Alarm criticalAlarm

Stays open. Needs acknowledgement.

Default Variation is full

  • Location: Bottom Center
  • keepOpenUntilDismissOrDuration: true // keeps the snackbar open, even a new snackar opened
  • duration: undefined // keeps the snackbar open
  • closeShow: true

  1. Safety Alarm safetyAlarm

Default Variation is headlineIndicator

  1. Environmental Alarm environmentalAlarm

Default Variation is headlineIndicator

  1. Production Alarm productionAlarm

Default Variation is headlineIndicator

  1. Diagonstic Alarm diagnosticAlarm

Default Variation is headlineIndicator

  1. Communication Alarm communicationAlarm

Default Variation is headlineIndicator

  1. Energy Alarm energyAlarm

Default Variation is headlineIndicator

  1. Tampering Alarm tamperingAlarm

Default Variation is headlineIndicator

  1. State Change Alarm stateChangeAlarm

Default Variation is headlineIndicator

  1. Limit Exceedance Alarm limitExceedanceAlarm

Default Variation is headlineIndicator

  1. Maintenance Alarm maintenanceAlarm

Stays open. Needs acknowledgement.

  • Location: Bottom Center
  • Default Variation is full
  • keepOpenUntilDismissOrDuration: true // keeps the snackbar open, even a new snackar opened
  • duration: undefined // keeps the snackbar open
  • closeShow: true

How to Catch a Result

const { snackbarApi } = fyzUtils;
const result = snackbarApi.openNotification('Hallo Welt!', {
    template: 'warning',
    variation: 'full',
    ... // customize the template
}).result$;

result.pipe(rxjs.take(1)).subscribe(res => {
  if(res === true) {
    // action clicked
  } else {
    // close clicked
  }
})

How to Close Programatically

const { snackbarApi } = fyzUtils;
const id = snackbarApi.openNotification('Hallo Welt!', {
    template: 'warning',
    variation: 'full',
    ... // customize the template
}).id;

// close by id
snackbarApi.close(id);

// cloase all where keepTrack = true
snackbarApi.closeAll();

Snackbar Brick

How to open

const { cRef: brickComponent } = fyzBrick;
brickComponent.open();