Components
Activity timeline
Activity timeline
Alternating left/right timeline grouped by day, with sticky day headers and sticky author avatars. Designed for incremental rendering — pass continuation state on the model so appended pages keep the same author on the same side and never duplicate the day header.
Canonical
Today
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
Yesterday
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
The most-used shape. Each author groups on one side of the line. A new author flips the side; day boundaries reset the day-header sticky behaviour but preserve the alternation.
Variants
3 variants
Today
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
Yesterday
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
Default
ShowEntityLink=true
Today
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
Visibility icons
ShowVisibilityIcons=true
Today
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
Scoped
ShowEntityLink=false
States
1 state
Today
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
Yesterday
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
Default
Stateless renderer. Sticky behaviour kicks in when the parent scroll container moves.
Props
ActivityTimelineModel| Property | Type | Notes |
|---|---|---|
| Days | IReadOnlyList<ActivityTimelineDay> | One group per day, newest-first. |
| ShowEntityLink | bool | Hides the entity link on detail pages already scoped to one entity. |
| ShowVisibilityIcons | bool | Adds client / partner audience icons next to each timestamp. |
| StickyHeader | ActivityTimelineSticky | Top12 drops the sticky offset under a tab strip; None sits flush. |
| PreviousDate | DateOnly? | Continuation state from a prior batch; suppresses a duplicate day header. |
| PreviousUserId | Guid? | Continuation state; decides whether the first row starts a new person-group. |
| PreviousPersonGroupIndex | int? | Continuation state; keeps the side alternation in step. |
Do & don't
Today
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
Yesterday
- @* Dot is a small disc in the line colour with a halo matching the card background. The previous fill (bg-surface-container) was the same colour as the card in light mode, so each dot rendered as white- on-white and only the avatar (with an image) was visible. *@
Do
Pass the continuation state on load-more renders so the appended batch joins seamlessly with the prior one.
- Jane Doe accepted the quote
- Marcus Lee created the quote
- Marcus Lee set the referrer
Don't
Don't render activity as a flat list. The author grouping and day header are what make "what happened here" scannable.