diff --git a/README.md b/README.md index e0efe71bbfb7dbaa092af9746e63cef145db8660..236a0e9c094cb47dd0280f776439c9bd58ccd42b 100644 --- a/README.md +++ b/README.md @@ -12,14 +12,24 @@ window.dispatchEvent(new CustomEvent('read', {detail: {resource: resource}})) ## Usage 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 +58,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..0b3971b149acc062360eaf1b3ef3f77c09f0830d --- /dev/null +++ b/examples/notifications-format-date.html @@ -0,0 +1,40 @@ + + + + + + SIB Notifications - Demo + + + + + + + + + + + + + + + +

SIB Notifications - Demo

+ + + + + diff --git a/index.html b/index.html index 7067027a0b8ebf69a0baa5bb4e73d4c73979ccd1..01f2226f4f92d5dae8ea2c4a8a1d1dab54e0c3f6 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,7 @@

SIB Badge