@silexlabs/grapesjs-notifications 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -2
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -19,7 +19,7 @@ Features
|
|
|
19
19
|
* [x] Notification events
|
|
20
20
|
* [x] Notification commands
|
|
21
21
|
* [x] editor.NotificationManager API
|
|
22
|
-
* [
|
|
22
|
+
* [x] Group notifications
|
|
23
23
|
|
|
24
24
|
### HTML
|
|
25
25
|
```html
|
|
@@ -78,7 +78,6 @@ API:
|
|
|
78
78
|
|
|
79
79
|
| Option | Description | Type | Default |
|
|
80
80
|
|-|-|-|-
|
|
81
|
-
| `style` | Custom style for the notification | `object` | `{}` |
|
|
82
81
|
| `timeout` | Default timeout for the notification in ms | `number` | No timeout |
|
|
83
82
|
| `container` | Container for the notifications | `HTMLElement` | `document.body` |
|
|
84
83
|
| `storeKey` | Store notifications in local storage under this key | `string` | No storage |
|
|
@@ -87,6 +86,31 @@ API:
|
|
|
87
86
|
| `maxNotifications` | Maximum number of notifications to display | `number` | `5` |
|
|
88
87
|
| `reverse` | Reverse the order of the notifications | `boolean` | `false` |
|
|
89
88
|
|
|
89
|
+
## Styling
|
|
90
|
+
|
|
91
|
+
Note that you are free to style the container since you provide it in the options. You also can change the icons from the options.
|
|
92
|
+
|
|
93
|
+
The notifications are styled using the following CSS classes:
|
|
94
|
+
|
|
95
|
+
* `.gjs-notification` - The notification container
|
|
96
|
+
* `.gjs-notification__group` - The notification group container
|
|
97
|
+
* `.gjs-notification__item` - The notification item
|
|
98
|
+
* `.gjs-notification__error` - The error notification
|
|
99
|
+
* `.gjs-notification__warning` - The warning notification
|
|
100
|
+
* `.gjs-notification__success` - The success notification
|
|
101
|
+
* `.gjs-notification__info` - The info notification
|
|
102
|
+
* `.gjs-notification__message` - The notification message
|
|
103
|
+
* `.gjs-notification__close` - The close button for the notification
|
|
104
|
+
|
|
105
|
+
```css
|
|
106
|
+
.gjs-notification {
|
|
107
|
+
padding: 10px;
|
|
108
|
+
margin: 10px;
|
|
109
|
+
border-radius: 5px;
|
|
110
|
+
box-shadow: 0 0 5px rgba(0,0,0,.3);
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
90
114
|
## Download
|
|
91
115
|
|
|
92
116
|
* CDN
|