# NotificationCenter
**Also known as:** NotificationBell, NotificationInbox, NotificationsPanel
## Description
BitNotificationCenter is a bell button whose badge counts the notifications not read yet, opening a panel that lists the history of BitSnackBarService: what the app's snack bar showed, newest first, with its time - whether it is still on the screen or long gone.
## 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". |
| 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. |
## 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. |
| 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. |
## Enums
### 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. |
## Sub Classes
### 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. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| 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. |
## Examples
\n**Basic**:
```razor
Info
Success
Warning
Error
```
```csharp
// Program.cs: builder.Services.AddBitBlazorUIServices();
[Inject] private BitSnackBarService snackBarService { get; set; } = default!;
private Task ShowInfo() => snackBarService.Info("New comment", "Sara replied to your review.");
private Task ShowSuccess() => snackBarService.Success("Saved", "All changes are saved.");
private Task ShowWarning() => snackBarService.Warning("Storage almost full", "You have used 92% of your space.");
private Task ShowError() => snackBarService.Error("Upload failed", "The server did not answer.");
```
\n**Unread & IsOpen**:
```razor
Notify
Open
Mark all as read
Unread: @unreadCenter?.UnreadCount
```
```csharp
[Inject] private BitSnackBarService snackBarService { get; set; } = default!;
private BitNotificationCenter? unreadCenter;
private bool isCenterOpen;
private Task ShowSuccess() => snackBarService.Success("Saved", "All changes are saved.");
```
\n**Item template**:
```razor
Notify
```
```csharp
[Inject] private BitSnackBarService snackBarService { get; set; } = default!;
private Task ShowWarning() => snackBarService.Warning("Storage almost full", "You have used 92% of your space.");
```
\n**Texts & time zone**:
```razor
Notify
```
```csharp
[Inject] private BitSnackBarService snackBarService { get; set; } = default!;
private Task ShowInfo() => snackBarService.Info("New comment", "Sara replied to your review.");
```
\n**Style & Class**:
```razor
Notify
```
```csharp
[Inject] private BitSnackBarService snackBarService { get; set; } = default!;
private Task ShowError() => snackBarService.Error("Upload failed", "The server did not answer.");
```
\n**RTL**:
```razor
اعلان
```
```csharp
[Inject] private BitSnackBarService snackBarService { get; set; } = default!;
private Task ShowRtl() => snackBarService.Info("دیدگاه تازه", "سارا به بازبینی شما پاسخ داد.");
```
@item.Title
@(item.DismissReason is { } reason ? $"Dismissed ({reason})" : "On the screen")