Verwendung
- Die Message History sammelt Hinweise aus Notifications und Toasts. Sie ist in vier Kategorien unterteilt (Info, Success, Warning und Error).
- Ungelesene Nachrichten werden mit einem Batch markiert.
- Über die Suche eines Text Fields und oder ein Filter Dropdown können die Nachrichten gefiltert werden.
- Der Page Indicator ermöglicht ein eine schnelle Navigation
Typen
Die Message History kann als Popover oder Modal auftretenMessage History Popover
Die Popover Ansicht wird durch Auswahl der entsprechenden Schaltfläche im Header Bereich aufgerufen. Sie bietet einen schnellen Überblick über bis zu fünf Messages und die Möglichkeit per Auswahl von »See all in message history« den Message History Dialog aufzurufen.Message History Dialog
Um mehr Informationen zu erhalten, kann der Nachrichtenverlauf im Message History Popover zu einem detaillierteren Dialog erweitert werden. Hier werden alle Nachrichten in chronologischer Reihenfolge anzeigt. Er bietet sowohl eine Suche als auch Filteroptionen.Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
dialogTitle | string | undefined | Title of Dialog |
headline | string | undefined | Text above Itemslist |
type | "popover" | "dialog" | undefined | Is the message History a popover, dialog or neither |
isModal | boolean | true | If type is dialog show as modal or not |
items | IMessageHistoryItem[] | undefined | Message History Items |
filteredItems | IMessageHistoryItem[] | undefined | Items filtered by Search |
value | string | undefined | Search Value |
itemsPerPage | number | undefined | Paginates the filtered items |
activePage | number | undefined | Currently active page if paginated (1 based) |
attachedTo | HTMLElement | undefined | If type is popover attach to element |
isVisible | boolean | false | If type is popover or dialog and modal is set show/hide the itemlist |
Weitere dazugehörige Komponenten
MssageHistoryHeader
MessageHistoryBody
Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
filteredItems | undefined | undefined | |
activePage | undefined | undefined | |
itemsPerPage | undefined | undefined | |
isPopover | undefined | undefined |
MessageHistoryItem
Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
item | IMessageHistoryItem | undefined | Contains data to display |
isOpen | boolean | false | Is the description expanded |
disabled | boolean | false | Set to disable the Item |
isPopover | boolean | false | is item Popover |
Events
| Name | Description |
|---|---|
slide |
Beispiele
Using Item as a template
one
two
three
Using Item as a template (Paginated)
one
two
Using Item as a template (Dialog)
Using Item as a template (Popover)
Only items
This is a test title inside the item. Will not be overwritten by slot