Notes

To use this component, you need to install the Bit.BlazorUI.Extras(opens in a new tab) nuget package, as described in the Optional steps of the Getting started page.

The center lists what a BitSnackBar marked ServiceHost showed, so place it beside the layout's host; it needs the services AddBitBlazorUIServices registers. The service keeps no history until its HistoryLimit is set, so the center raises it to its own HistoryLimit (50 by default).

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

Raise a few notifications through BitSnackBarService, then open the bell: the badge counts the ones not read yet, and opening the panel reads them. Every example on this page lists the same history, through this page's snack bar.

Unread & IsOpen

What has been read is each center's own: UnreadCount is what its badge shows, MarkAllAsRead reads everything without opening the panel, and IsOpen (two-way bound) opens it from code. The notifications that were unread when the panel opened stay marked for as long as it is open.

Unread: 0

Item template

ItemTemplate draws each notification of the list. The item is the BitSnackBarItem the snack bar showed, so its ShownAt, its DismissReason and its Data are all at hand.

Texts & time zone

Every word of the center can be replaced: HeaderText, ClearAllText, EmptyText, the name of the bell (AriaLabel, with UnreadAriaLabelFormat for its count) and what a screen reader hears of an unread notification (UnreadItemText). TimeZone is the zone the times are shown in - UTC here.

Style & Class

Classes and Styles reach every part of the center, and the --bit-NotificationCenter-* variables restyle it from anywhere above it.

RTL

Use BitNotificationCenter in right-to-left (RTL).

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone, as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component falls back to the theme token beside it.

BitNotificationCenter CSS variables

Name	Default value	Description
--bit-NotificationCenter-badge-background	var(--bit-clr-err)	Background of the unread count badge.
--bit-NotificationCenter-badge-color	var(--bit-clr-err-text)	Text color of the unread count badge.
--bit-NotificationCenter-width	360px	Width of the panel, never wider than the viewport.
--bit-NotificationCenter-max-height	420px	Height the list of notifications scrolls past.
--bit-NotificationCenter-new-background	var(--bit-clr-bg-sec)	Background of a notification that had not been read when the panel opened.

API

Every parameter, public member, sub-class and enum this component exposes.

BitNotificationCenter parameters

Name	Type	Default value	Description
ClearAllText	string?	null	The text of the button that forgets every notification of the history (BitSnackBarService.ClearHistory). Defaults to "Clear all".
Classes	BitNotificationCenterClassStyles?	null	Custom CSS classes for the different parts of the notification center.
EmptyText	string?	null	The text the panel shows when there are no notifications. Defaults to "No notifications".
HeaderText	string?	null	The text at the top of the panel. Defaults to "Notifications".
HistoryLimit	int	50	How many notifications the center makes BitSnackBarService keep: the service's HistoryLimit is raised to it when it keeps fewer, and never lowered.
Icon	BitIconInfo?	null	The icon of the bell button. Takes precedence over IconName.
IconName	string?	null	The name of the icon of the bell button, from the bit BlazorUI icons. Defaults to "Ringer".
IsOpen	bool	false	Whether the panel is open. Opening it marks every notification it lists as read. (two-way bound)
ItemTemplate	RenderFragment<BitSnackBarItem>?	null	The custom template of each notification of the list.
Styles	BitNotificationCenterClassStyles?	null	Custom CSS styles for the different parts of the notification center.
TimeZone	TimeZoneInfo?	null	The time zone the time of each notification is shown in. Defaults to the local time zone - which, in a server-side rendered app, is the server's rather than the user's.
UnreadAriaLabelFormat	string?	null	The composite format the unread count joins the name of the bell button with ({0} = the count), so a screen reader hears it with the name. Defaults to "{0} unread".
UnreadItemText	string?	null	What a screen reader hears of a notification that had not been read when the panel opened, which is shown by its look alone. Defaults to "Unread".

BitNotificationCenter public members

Name	Type	Default value	Description
UnreadCount	int	0	How many notifications of the history have not been read yet: the count on the badge of the bell.
MarkAllAsRead	void MarkAllAsRead()		Marks every notification of the history as read, which clears the badge of the bell.

BitComponentBase parameters

Name	Type	Default value	Description
AriaLabel	string?	null	Gets or sets the accessible label for the component, used by assistive technologies.
Class	string?	null	Gets or sets the CSS class name(s) to apply to the rendered element.
Dir	BitDir?	null	Gets or sets the text directionality for the component's content.
Disabled	bool	false	Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
ForceAnimation	bool	false	Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name.
Id	string?	null	Gets or sets the unique identifier for the component's root element.
Style	string?	null	Gets or sets the CSS style string to apply to the rendered element.
TabIndex	string?	null	Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility	BitVisibility	BitVisibility.Visible	Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement	ElementReference		Gets the reference to the root HTML element associated with this component.

BitNotificationCenterClassStyles properties

Name	Type	Default value	Description
Root	string?	null	Custom CSS classes/styles for the root element of the BitNotificationCenter.
Button	string?	null	Custom CSS classes/styles for the bell button of the BitNotificationCenter.
Icon	string?	null	Custom CSS classes/styles for the bell icon of the BitNotificationCenter.
Badge	string?	null	Custom CSS classes/styles for the unread count badge on the bell of the BitNotificationCenter.
Callout	string?	null	Custom CSS classes/styles for the callout the panel of the BitNotificationCenter opens in.
Panel	string?	null	Custom CSS classes/styles for the panel of the BitNotificationCenter.
Header	string?	null	Custom CSS classes/styles for the header of the panel of the BitNotificationCenter.
HeaderText	string?	null	Custom CSS classes/styles for the header text of the panel of the BitNotificationCenter.
ClearAllButton	string?	null	Custom CSS classes/styles for the clear all button of the BitNotificationCenter.
List	string?	null	Custom CSS classes/styles for the list of notifications of the BitNotificationCenter.
Item	string?	null	Custom CSS classes/styles for each notification of the BitNotificationCenter.
UnreadItem	string?	null	Custom CSS classes/styles for each notification of the BitNotificationCenter that had not been read when the panel opened.
ItemIcon	string?	null	Custom CSS classes/styles for the icon of each notification of the BitNotificationCenter.
ItemTitle	string?	null	Custom CSS classes/styles for the title of each notification of the BitNotificationCenter.
ItemBody	string?	null	Custom CSS classes/styles for the body of each notification of the BitNotificationCenter.
ItemTime	string?	null	Custom CSS classes/styles for the time of each notification of the BitNotificationCenter.
Empty	string?	null	Custom CSS classes/styles for the text the panel of the BitNotificationCenter shows when there are no notifications.

BitVisibility enum

Name	Value	Description
Visible	0	The content of the component is visible.
Hidden	1	The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed	2	The component is hidden (display:none).

BitDir enum

Name	Value	Description
Ltr	0	Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl	1	Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto	2	Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.

Open an issue

Start a discussion

Edit this page

View the component source

Edit the component