ember flash notifications

notifications à l'échelle

L'addon est conçu pour afficher les notifications Flash dans les applications Ember.js. Propulsé par API Popover.

Compatibilité

• Ember.js v4.8 ou supérieur
• Ember CLI V4.8 ou supérieur
• Node.js v18 ou supérieur

Installation

 ember install ember-flash-notifications

Usage

Ajoutez une invocation des Notifications flash à un modèle:

 <FlashNotifications as |notification|>
  <FlashNotification @notification={{notification}}>
    <div class={{notification.type}}>{{notification.message}}</div>
  </FlashNotification>
</FlashNotifications>

Ajouter un minimum de styles requis pour un élément de notification (TailwindCSS n'est pas une dépendance, et vous pouvez également utiliser CSS ordinaire):

[popover] {
  @apply my-0 mr-0;
}

.flash {
  @apply w-80 border transition-opacity block opacity-0;
}

.flash:popover-open {
  @apply opacity-100;
}

.flash .error {
  @apply bg-rose-500 text-white p-2 rounded-sm;
}

@starting-style {
  .flash:popover-open {
    @apply opacity-0;
  }
}

... et faire une invocation de la notification:

 mport { action } from '@ember/object';
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class FlashComponent extends Component {
  @service notifications;

  @action
  addNotification() {
    this.notifications.error('Something is going wrong!');
  }
}

Voir des exemples détaillés, la documentation de l'API et des exemples en direct ici

Contributif

Voir le guide contributeur pour plus de détails.

Licence

Ce projet est autorisé sous la licence du MIT.