MessageBar
A banner (MessageBar) displays errors, warnings, or important information about an open app or file. For example, if a file failed to upload an error message bar should appear.
Usage
Basic
Different types of BitMessageBar.
Info (default) MessageBar. Visit our website.
Success MessageBar. Visit our website.
Warning MessageBar. Visit our website.
SevereWarning MessageBar. Visit our website.
Error MessageBar. Visit our website.
Blocked MessageBar. Visit our website.
Customization
There are multiple options to customize.
Dismiss option enabled by adding OnDismiss parameter.
MessageBar with single line and action buttons.MessageBar with single line and action buttons.
MessageBar defaults to multiline.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus, purus a lobortis tristique, odio augue pharetra metus, ac placerat nunc mi nec dui. Vestibulum aliquam et nunc semper scelerisque. Curabitur vitae orci nec quam condimentum porttitor et sed lacus. Vivamus ac efficitur leo. Cras faucibus mauris libero, ac placerat erat euismod et. Donec pulvinar commodo odio sit amet faucibus. In hac habitasse platea dictumst. Duis eu ante commodo, condimentum nibh pellentesque, laoreet enim. Fusce massa lorem, ultrices eu mi a, fermentum suscipit magna. Integer porta purus pulvinar, hendrerit felis eget, condimentum mauris.
single line, with dismiss button and truncated text.
Truncation is not available if you use action buttons or multiline and should be used sparingly.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus, purus a lobortis tristique, odio augue pharetra metus, ac placerat nunc mi nec dui. Vestibulum aliquam et nunc semper scelerisque. Curabitur vitae orci nec quam condimentum porttitor et sed lacus. Vivamus ac efficitur leo. Cras faucibus mauris libero, ac placerat erat euismod et. Donec pulvinar commodo odio sit amet faucibus. In hac habitasse platea dictumst. Duis eu ante commodo, condimentum nibh pellentesque, laoreet enim. Fusce massa lorem, ultrices eu mi a, fermentum suscipit magna. Integer porta purus pulvinar, hendrerit felis eget, condimentum mauris.
MessageBar with action buttons which defaults to multiline.
Implementation
BitMessageBar parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Actions | RenderFragment? | null | The content of the action to show on the message bar. |
| ChildContent | RenderFragment? | null | The content of message bar. |
| DismissButtonAriaLabel | string? | null | Aria label on dismiss button if onDismiss is defined. |
| IsMultiline | bool | true | Determines if the message bar is multi lined. If false, and the text overflows over buttons or to another line, it is clipped. |
| MessageBarType | BitMessageBarType | BitMessageBarType.Info | The type of message bar to render. |
| DismissIconName | string | Clear | Custom Fabric icon name to replace the dismiss icon. If unset, default will be the Fabric Clear icon. |
| MessageBarIconName | string? | null | Custom icon to replace the message bar icon. If unset, default will be the icon set by messageBarType. |
| OnDismiss | EventCallback | Whether the message bar has a dismiss button and its callback. If null, dismiss button won't show. | |
| OverflowButtonAriaLabel | string? | null | Aria label on overflow button if truncated is true. |
| Role | string? | null | Custom role to apply to the message bar. |
| Truncated | bool | false | Determines if the message bar text is truncated. If true, a button will render to toggle between a single line view and multiline view. This parameter is for single line message bars with no buttons only in a limited space scenario. |
BitComponentBase parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| AriaLabel | string? | null | The aria-label of the control for the benefit of screen readers. |
| Class | string? | null | Custom CSS class for the root element of the component. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Capture and render additional attributes in addition to the component's parameters. |
| Id | string? | null | Custom id attribute for the root element. if null the UniqueId will be used instead. |
| IsEnabled | bool | true | Whether or not the component is enabled. |
| Style | string? | null | Custom CSS style for the root element of the component. |
| Visibility | BitVisibility | BitVisibility.Visible | Whether the component is visible, hidden or collapsed. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction. |
| RootElement | ElementReference | The ElementReference of the root element. |
BitMessageBarType enum
Name |
Value |
Description |
|---|---|---|
| Info | 0 | Info styled MessageBar. |
| Warning | 1 | Warning styled MessageBar. |
| Error | 2 | Error styled MessageBar. |
| Blocked | 3 | Blocked styled MessageBar. |
| SevereWarning | 4 | SevereWarning styled MessageBar. |
| Success | 5 | Success styled MessageBar. |
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). |