https://github.com/alexeipanov/ember-flash-notifications

Addon to display flash notifications in Ember.js applications
https://github.com/alexeipanov/ember-flash-notifications

ember ember-cli emberjs flash notification popover popover-api popover-component

Last synced: 3 months ago
JSON representation

Addon to display flash notifications in Ember.js applications

• Host: GitHub
• URL: https://github.com/alexeipanov/ember-flash-notifications
• Owner: alexeipanov
• License: mit
• Created: 2024-03-24T20:46:09.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-09-03T19:19:35.000Z (4 months ago)
• Last Synced: 2024-10-01T08:41:42.065Z (3 months ago)
• Topics: ember, ember-cli, emberjs, flash, notification, popover, popover-api, popover-component
• Language: JavaScript
• Homepage: https://flash-notifications.vercel.app
• Size: 1.4 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-flash-notifications

The addon is designed to display flash notifications within Ember.js applications.

Powered by Popover API.

## Compatibility

* Ember.js v4.8 or above

* Ember CLI v4.8 or above

* Node.js v18 or above

## Installation

```

ember install ember-flash-notifications

```

## Usage

Add FlashNotifications invocation to a template:

```

  

    
{{notification.message}}

  


```

Add minimal required styles for a notification element (TailwindCSS is not a dependency, and you are able to use plain CSS as well):

```

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

  }

}

```

... and make notification invocation:

```

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

  }

}

```

See detailed examples, API documetation and live examples [here](https://ember-flash-notifications.vercel.app)

## Contributing

See the [Contributing](CONTRIBUTING.md) guide for details.

## License

This project is licensed under the [MIT License](LICENSE.md).