diff --git a/README.md b/README.md index e0efe71bbfb7dbaa092af9746e63cef145db8660..35604f01c86680780a9382d38e06a65773a735a4 100644 --- a/README.md +++ b/README.md @@ -11,15 +11,29 @@ window.dispatchEvent(new CustomEvent('read', {detail: {resource: resource}})) ``` ## Usage -In your template, insert the following line where you want to display the component. +First, you need to import `moment.js` library in your template, to display the dates properly. +```html + +``` +Then, in your template, insert the following line where you want to display the component. + ```html ``` If you want to use the `bind-user` attribute, do not forget to use `sib-oidc` for authentication. +### Parameters + +| Name | Default | Description | +| --------------- | ---------------------- | :----------------------------------------------------------- | +| `data-src` | `undefined` | URL of the inbox to display. | +| `id-suffix` | `""` | String added at the end of the data source URL. Useful if you are using `bind-user` to get the current user URL. | +| `extra-context` | `{}` | Context to add to let the router know where to navigate after a click on a notification. | +| `date-format` | `"DD/MM/YYYY - kk:mm"` | Format of the date displayed in the notifications box. For more informations about available formats, look at the [moment.js doc](https://momentjs.com/docs/#/displaying/format/). | + ### Routing -To redirect to specific pages when you click on a notification, you should: +To redirect to specific pages when you click on a notification, you should: 1. Choose a route to be the default view for a resource type. To do this, add the attribute `rdf-type` to a `sib-route` (ex: ``) 2. Add an `extra-context` to the sib-conversation component, so it can understands the `rdf_type` you used before. @@ -48,6 +62,13 @@ In your template, insert the following line where you want to display the compon ``` +### Parameters + +| Name | Default | Description | +| ----------- | ----------- | :----------------------------------------------------------- | +| `data-src` | `undefined` | URL of the resource or container of which you want to get the unread notifications. | +| `id-suffix` | `""` | String added at the end of the data source URL. Useful if you are using `bind-resource` to get the current displayed resource. | + ### Design To customize your component, you can set the css variable `--sib-badge-theme` anywhere in your stylesheet to the color you want. For example: diff --git a/examples/notifications-format-date.html b/examples/notifications-format-date.html new file mode 100644 index 0000000000000000000000000000000000000000..e2c231965df0009a2e429a8a0ae5fd01bde73a72 --- /dev/null +++ b/examples/notifications-format-date.html @@ -0,0 +1,41 @@ + + + + + + SIB Notifications - Demo + + + + + + + + + + + + + + + + +

SIB Notifications - Demo

+ + + + + diff --git a/examples/notifications-routing.html b/examples/notifications-routing.html index 1f4c5a2b4ebce2fc633023190ead34e7f0283c9e..409601c82e1c84914d831da42cfd19288dbd4dda 100644 --- a/examples/notifications-routing.html +++ b/examples/notifications-routing.html @@ -19,6 +19,7 @@ +