- bit BlazorUI
Home Docs
  • Inputs
  • Layouts
  • Lists
  • Navs
  • Notifications
  • Progress
  • Surfaces
  • Utilities
  • Extras
  • Iconography
  • Theming

    • Message

    A Message displays errors, warnings, or important information. For example, if a file failed to upload an error message should appear.

    Usage

    Basic
    Color
    Info (default).
    Success.
    Variant
    Fill (default):
    Info.
    Success.



    Outline:
    Info.
    Success.



    Text:
    Info.
    Success.
    Alignment
    Elevation

    Multiline
    Multiline parameter makes the content to be rendered in multiple lines. 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.
    Truncate
    Dismiss
    Actions
     
    HideIcon
    HideIcon parameter removes the icon:
    Info (default) Message.
    Success Message.
    Icons
    Message with a custom icon.


    Advanced

     
    Size
    Style & Class
    Component's Style & Class:

    Styled Message. 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.

    Classed Message. 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.



    Styles & Classes:


    RTL
    پیام خبری (پیش فرض). به وبسایت ما سر بزنید.
    پیام موفق. به وبسایت ما سر بزنید. 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.

    API

    BitMessage parameters
    Name
    Type
    Default value
    Description
    Actions RenderFragment? null The content of the action to show on the message.
    Alignment BitAlignment? null Determines the alignment of the content section of the message.
    ChildContent RenderFragment? null The content of message.
    Classes BitMessageClassStyles? null Custom CSS classes for different parts of the BitMessage.
    CollapseIcon string DoubleChevronUp Custom Fabric icon name for the collapse icon in Truncate mode. If unset, default will be the Fabric DoubleChevronUp icon.
    Color BitColor? null The general color of the message.
    Content RenderFragment? null The alias for ChildContent.
    DismissIcon string Cancel Custom Fabric icon name to replace the dismiss icon. If unset, default will be the Fabric Cancel icon.
    Elevation int? null Determines the elevation of the message, a scale from 1 to 24.
    ExpandIcon string DoubleChevronDown Custom Fabric icon name for the expand icon in Truncate mode. If unset, default will be the Fabric DoubleChevronDown icon.
    HideIcon bool false Prevents rendering the icon of the message.
    IconName string? null Custom icon to replace the message icon. If unset, default will be the icon set by Type.
    Multiline bool false Determines if the message is multi-lined. If false, and the text overflows over buttons or to another line, it is clipped.
    OnDismiss EventCallback Whether the message has a dismiss button and its callback. If null, dismiss button won't show.
    Role string? null Custom role to apply to the message text.
    Size BitSize? null The size of Message, Possible values: Small | Medium | Large.
    Styles BitMessageClassStyles? null Custom CSS styles for different parts of the BitMessage.
    Truncate bool false Determines if the message 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 messages with no buttons only in a limited space scenario.
    Variant BitVariant? null The variant of the message.
    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.
    Dir BitDir? null Determines the component direction.
    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.
    BitMessageClassStyles properties
    Name
    Type
    Default value
    Description
    Root string? null Custom CSS classes/styles for the root element of the BitMessage.
    RootContainer string? null Custom CSS classes/styles for the root container of the BitMessage.
    Container string? null Custom CSS classes/styles for the icon and content container of the BitMessage.
    IconContainer string? null Custom CSS classes/styles for the icon container of the BitMessage.
    Icon string? null Custom CSS classes/styles for the icon element of the BitMessage.
    ContentContainer string? null Custom CSS classes/styles for the content container of the BitMessage.
    ContentWrapper string? null Custom CSS classes/styles for the content wrapper element of the BitMessage.
    Content string? null Custom CSS classes/styles for the content element of the BitMessage.
    Actions string? null Custom CSS classes/styles for the actions element of the BitMessage.
    ExpanderButton string? null Custom CSS classes/styles for the truncate expander button of the BitMessage.
    ExpanderIcon string? null Custom CSS classes/styles for the truncate expander icon of the BitMessage.
    DismissButton string? null Custom CSS classes/styles for the truncate dismiss button of the BitMessage.
    DismissIcon string? null Custom CSS classes/styles for the truncate dismiss icon of the BitMessage.
    BitColor enum
    Name
    Value
    Description
    Primary 0 Primary general color.
    Secondary 1 Secondary general color.
    Tertiary 2 Tertiary general color.
    Info 3 Info general color.
    Success 4 Success general color.
    Warning 5 Warning general color.
    SevereWarning 6 SevereWarning general color.
    Error 7 Error general color.
    PrimaryBackground 8 Primary background color.
    SecondaryBackground 9 Secondary background color.
    TertiaryBackground 10 Tertiary background color.
    PrimaryForeground 11 Primary foreground color.
    SecondaryForeground 12 Secondary foreground color.
    TertiaryForeground 13 Tertiary foreground color.
    PrimaryBorder 14 Primary border color.
    SecondaryBorder 15 Secondary border color.
    TertiaryBorder 16 Tertiary border color.
    BitVariant enum
    Name
    Value
    Description
    Fill 0 Fill styled variant.
    Outline 1 Outline styled variant.
    Text 2 Text styled variant.
    BitAlignment enum
    Name
    Value
    Description
    Start 0
    End 1
    Center 2
    SpaceBetween 3
    SpaceAround 4
    SpaceEvenly 5
    Baseline 6
    Stretch 7
    BitSize enum
    Name
    Value
    Description
    Small 0 The small size message.
    Medium 1 The medium size message.
    Large 2 The large size message.
    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.
    • On this page