ember flash notifications

Ember-Flash通知

該插件旨在在ember.js應用程序中顯示閃存通知。由Popover API提供動力。

相容性

• ember.js v4.8或更高
• Ember CLI v4.8或更高
• node.js v18或更高

安裝

 ember install ember-flash-notifications

用法

將flashnotificationation調用添加到模板：

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

為通知元素添加最少的必需樣式（parwindcss不是依賴性，您也可以使用普通的CSS）：

[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;
  }
}

...並進行通知調用：

 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!');
  }
}

在此處查看詳細的示例，API文檔和實時示例

貢獻

有關詳細信息，請參見貢獻指南。

執照

該項目已根據MIT許可獲得許可。