Notifications
Message
Bit.BlazorUIAlertMessageBar
An inline message that reports an error, a warning, or something worth knowing - a failed upload, an expiring licence, a saved draft - in place and without interrupting the page. It carries a color and a matching icon for its severity, an optional title, action buttons, a fold that holds a long text to one line or to a set number of them, and a dismiss button that can take the message off the page by itself, on a timer or on demand, and it announces itself to screen readers with the urgency its color implies.
Notes
Color is what makes a Message a notice rather than a box of text: it picks the palette, the
default icon, and the urgency of the announcement. Warning,
SevereWarning and
Error are announced as an
alert, which interrupts a screen reader;
everything else is announced politely as a status.
Override that with Role where the color is chosen for looks rather than for severity, and with
Politeness where the role is right but the urgency is not.
Never let the color carry the meaning on its own - the text has to say what happened - and never leave a
warning or an error without a way forward: give it an Actions button or a link that resolves it.
AutoDismissTime is a time limit, so it holds while a mouse or a pen rests on the message or the
focus is inside it. Keep it for confirmations that need no answer; anything with an action in it should
wait to be dismissed by hand.
The icon is decorative markup and is hidden from screen readers, so where the text does not say what kind
of message this is, say it with IconAriaLabel. And leave AutoFocus for the messages that have
to be acted upon: the rest are already announced, and taking the focus away from what the reader was doing
is an interruption of its own.
A live region only announces what changes inside it, so a message that appears with its text already in
place is a change of nothing and several screen readers stay silent about it: give the ones that answer
something the reader just did a DelayedAnnouncement.
A message that takes itself off the page takes the focus with it if the dismiss button was carrying it,
which leaves a keyboard user back at the top of the document. Where that matters, put the focus somewhere
deliberate from OnDismiss - the control the message was about, or the next message in the stack.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
A Message needs nothing but its content. It fills the width of its container, picks the
Info color by default, and renders the icon that goes with that color.
This is a Message.
Title
Title adds a short heading that makes the message scannable, which matters most where
several of them stack up. On a single-line message the title leads the content on the same line;
on a Multiline one it sits above it. Use TitleTemplate to render markup instead of plain
text, and TitleElement to render the title as a heading (h2 ... h6) where the
message is a part of the page a reader should be able to jump to - the title keeps the type of the
message either way.
Heads up
Your session expires in 5 minutes.
Upload failed
The file report-2024.xlsx could not be uploaded because it exceeds the 25 MB limit.
Compress the file or split it into parts and try again.
Saved to your workspace
Everyone with access to the workspace can see this version now.
A title that is a heading
Rendered as an h3, so it shows up in the heading list of a screen reader.
Variant
Variant chooses how much of the color the message spends: Fill (the default) paints the
whole surface, Outline keeps only the border, and Text drops both and tints the text alone.
Fill (default):
Filled
Outline:
Outlined
Text:
Texted
Alignment
Alignment places the icon and the content along the width of the message. It only shows
when the content is narrower than the message, which is the case for a short single-line notice.
Start
Center
End
Elevation
Elevation lifts the message off the page with one of the 24 shadow steps of the theme.
Values outside the 1 to 24 range leave the message flat.
Elevated Message
Multiline
Multiline lets the content wrap over as many lines as it needs instead of being clipped to one,
and moves the action buttons to a row of their own underneath it. MaxLines puts a ceiling back
on that, so one long message cannot push the rest of the page down: the content stops at the given
number of lines and the last of them ends in an ellipsis. Add Truncate alongside it and the same
expander button a truncated single-line message carries appears, unfolding the message past the cap.
In the beginning, there is silence-a blank canvas yearning to be filled, a quiet space where creativity waits
to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new, an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new, an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
Held to two lines by MaxLines:
Storage almost full
Your workspace is using 19.4 GB of its 20 GB. New uploads will start to fail once the limit is
reached, and shared links to files already in the workspace will keep working. Remove the files you
no longer need, or move them to an archive, to free the space back up.
The same cap with Truncate, which adds the button that unfolds it:
Import failed
Fourteen of the 320 rows could not be imported because their Email column was empty or held a
value the address parser did not recognize. Every other row was imported and is already visible in
the contacts list. Download the report to see which rows were left out, fix them in place, and run
the import again - the rows that went through the first time are skipped rather than duplicated.
Truncate
Truncate clips the content to a single line and adds a button that unfolds it, for a message
that has to fit in a tight space. On a Multiline message there is nothing folded away for it
to unfold, so it does nothing there on its own - pair it with MaxLines and it unfolds the
message past that cap instead. The expanded state is
two-way bindable through Expanded, so it can be driven from outside as well, and the
ExpandAsync, CollapseAsync and ToggleExpandAsync methods do the same on a
captured message without a binding to keep.
In the beginning, there is silence-a blank canvas yearning to be filled, a quiet space where creativity waits
to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
Driven by its methods rather than by a binding. In the beginning, there is silence-a blank canvas
yearning to be filled, a quiet space where creativity waits to awaken. These words are temporary,
standing in place of ideas yet to come, a glimpse into the infinite possibilities that lie ahead.
Dismiss
Dismissible renders the dismiss button and lets the message take itself off the page; bind
Dismissed to follow that from outside, or to put the message back. OnDismiss also
renders the button, but only reports the dismissal - leaving the removal to its handler.
DismissOnEscape adds the Escape key as a second way out - it works wherever dismissing would do
something, a Dismissed binding on its own included, and OnDismissing gets a say
before any of them: cancel it to keep the message where it is, and read its Reason to tell
the button, the key, the countdown and a DismissAsync call apart. DismissAsync is that
same dismissal on demand, for a message that is taken away by something other than its own button.
Self-dismissing message: Dismissible needs no handler to disappear.
Dismiss option enabled by adding OnDismiss parameter.
Focus me (or the dismiss button) and press Escape to dismiss.
Guarded by OnDismissing: the first attempt is refused, the second one goes through.
Attempts so far: 0.
Dismissed from the outside by DismissAsync, which goes through
OnDismissing and stops the countdown just as the button does.
Auto-dismiss
AutoDismissTime dismisses the message on its own once the given time has passed. The countdown
is a time limit, so it holds for as long as a pointer that can rest on the message - a mouse or a pen,
never a touch, which is over as soon as it began - is over it, or the focus is inside it, and the
message cannot vanish mid-read; PauseAutoDismiss and ResumeAutoDismiss hold it
over anything else, and the bar holds with them. ShowAutoDismissProgress draws the countdown as
a bar along the bottom edge, holding exactly where the countdown holds. The countdown runs wherever
dismissing would do something - an OnDismiss handler, Dismissible, or a Dismissed
binding on its own. Assigning a different time re-arms it, and so does bringing a dismissed message back
- and so does refusing one through OnDismissing, which gives the message its time over again
rather than leaving it standing there with an exhausted bar.
Auto-Dismiss option enabled by adding the AutoDismissTime parameter alongside OnDismiss.
Hover me to hold the countdown.
Ten seconds, drawn along the bottom edge. Hover me and the bar stops with the countdown.
Fifteen seconds, and no dismiss button: a message bound through Dismissed alone
counts down all the same. Hold it from outside with the buttons below.
Actions
The Actions template holds the controls that let the reader act on the message, and a warning
or an error should always offer one so it never becomes a dead end. On a single-line message they
share the line with the content; a Multiline one gives them a row of their own underneath it,
where a set too wide for the row wraps instead of being clipped. They sit outside the region the
message announces itself through, so an icon-only action needs an AriaLabel of its own.
A draft of this page was recovered from your last session.
Connection lost
The last three changes could not be saved because the server could not be reached. They are
kept on this device and will be sent as soon as the connection is back.
Message with single line and icon-only action buttons.
HideIcon
HideIcon drops the severity glyph. Only do this where the surrounding text already
says what kind of message it is - the color on its own is not enough to carry that meaning.
Icon hidden
Icons
Each of the three glyphs of the message can be replaced from the built-in icon set: IconName
for the severity icon, DismissIconName for the dismiss button, and
ExpandIconName / CollapseIconName for the two states of the truncate expander.
IconTemplate goes further and puts arbitrary markup - a spinner, an avatar, an image - in the
place of the severity icon.
Message with a custom icon.
Message with a custom dismiss icon.
Message with a spinner in place of its icon, through IconTemplate.
Message with custom expand and collapse icon.
In the beginning, there is silence-a blank canvas yearning to be filled, a quiet space where creativity waits
to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
Square
Square removes the rounded corners so the message can run edge to edge as a page-wide banner,
flush against the sides of whatever contains it.
Advanced
The parts of the message combine freely: a truncated message keeps its expander next to the
dismiss button, and a multiline one moves the actions to their own row underneath the content.
Truncate with OnDismiss and Actions.
In the beginning, there is silence-a blank canvas yearning to be filled, a quiet space where creativity waits
to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
Multiline with Title, OnDismiss and Actions.
Something went wrong
In the beginning, there is silence-a blank canvas yearning to be filled, a quiet space where creativity waits
to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
Announcement
A message announces itself: its text sits in a live region whose urgency comes from Color -
Warning, SevereWarning and Error interrupt the screen reader as an
alert, everything else waits its turn as a status. Role overrides that where
the color was chosen for looks rather than for severity, and Role="none" silences the region
altogether for a message that is part of the page rather than news about it. Politeness splits
the two apart where they have to be: it writes the urgency on its own, leaving the role where it was,
for the alert that should not cut in and the status that has to be heard at once. The icon is
decorative and hidden from screen readers, so IconAriaLabel is what says which kind of message
this is where the text does not - it leads the announcement, invisibly. A message that has a name - a
Title, or an AriaLabel of its own - is also a named group, so a screen reader can step
over it as one unit instead of walking through it line by line. A live region only announces what
changes inside it, so a region that arrives with its text already in place is a change of nothing and
several screen readers stay silent: DelayedAnnouncement puts the region on the page one render
ahead of the text, which is what makes the announcement reliable for a message that appears in answer
to something the reader just did. The dismiss and expander buttons borrow the title of the
message as their description, so a page full of them is not a page full of buttons all called
"Dismiss".
Error
The payment could not be authorized. Announced as "Error: The payment could not be authorized."
An error-colored message that reports no error, announced politely as a status.
Part of the page rather than news about it: not announced at all.
An error worth reporting but not worth interrupting for: still an alert, announced politely.
A success the reader has to hear about at once: still a status, announced assertively.
Focus
AutoFocus moves the focus to the message as soon as it is rendered, which takes a keyboard or
screen reader user straight to it; the message is made focusable on its own for that, so no
TabIndex is needed. Keep it for the messages that have to be acted upon - the rest are already
announced by the live region, and moving the focus away from what the reader was doing is an
interruption. The same move is available at any time through the FocusAsync method of a
captured message. A message the focus can reach - through AutoFocus or a TabIndex -
also points at its own text as its description, so landing on it says what it says: a live region
is announced when it changes, not when it is reached.
A message with a TabIndex can be focused on demand.
Disabled
A disabled message keeps saying what it says - it is a notice, not a control, so its text stays at
full contrast and is still announced. What IsEnabled turns off is everything that would change
it: the dismiss and expander buttons are dimmed and stop responding, the Escape key stops
dismissing, and no AutoDismissTime countdown is started, so a disabled message cannot slip
away while it is out of reach. Enabling it again arms the countdown from the beginning. The public
methods are left alone - a message turned off in the interface can still be dismissed or unfolded by
the code that owns it.
Licence expiring
Your licence runs out in 14 days. Renew it before then to keep the shared workspaces open to
everyone who is using them today.
Color
Color sets the palette, the default icon and the urgency of the announcement in one go.
The eight semantic colors are the ones to reach for; the background, foreground and border
colors are there for a message that has to match a surface rather than report a severity.
Primary.
Secondary.
Tertiary.
Info (default).
Success.
Warning.
SevereWarning.
Error.
PrimaryBackground.
SecondaryBackground.
TertiaryBackground.
PrimaryForeground.
SecondaryForeground.
TertiaryForeground.
PrimaryBorder.
SecondaryBorder.
TertiaryBorder.
External Icons
Every icon of the message also takes a BitIconInfo, which renders whatever CSS classes an
external library needs - Icon, DismissIcon, ExpandIcon and CollapseIcon.
Use the Fa, Bi and Css helpers, or pass the classes as a plain string.
FontAwesome message (Icon="fa-solid fa-circle-info")
FontAwesome success (Icon="fa-solid fa-circle-check")
FontAwesome dismiss icon (DismissIcon="fa-solid fa-xmark")
Bootstrap message (Icon="bi bi-info-circle-fill")
Bootstrap success (Icon="check-circle-fill")
In the beginning, there is silence-a blank canvas yearning to be filled, a quiet space where creativity waits
to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
Size
Size scales the type, the icon, the inset, the two round buttons and the countdown track of the
message together, so a small message is not left carrying medium-sized buttons.
Small
Medium
Large
Style & Class
Style and Class land on the root element, while Styles and Classes reach
each part of the message on its own - the root, the containers, the icon, the title, the content, the
actions, the two buttons, and the track and bar of the auto-dismiss countdown.
Component's Style & Class:
Styled Message.
In the beginning, there is silence-a blank canvas yearning to be filled, a quiet space where creativity waits
to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
Classed Message.
In the beginning, there is silence-a blank canvas yearning to be filled, a quiet space where creativity waits
to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
Styles & Classes:
Styled title
Styles.
In the beginning, there is silence-a blank canvas yearning to be filled, a quiet space where creativity waits
to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
Classes.
In the beginning, there is silence-a blank canvas yearning to be filled, a quiet space where creativity waits
to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
RTL
Set Dir to BitDir.Rtl to mirror the message: the icon moves to the right and the
expander and dismiss buttons to the left.
پیام خبری (پیش فرض). به وبسایت ما سر بزنید.
پیام موفق. به وبسایت ما سر بزنید.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها
شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
پیام هشدار
به وبسایت ما سر بزنید.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
پیام هشدار شدید. به وبسایت ما سر بزنید.
پیام خطا. به وبسایت ما سر بزنید.
API
Every parameter, public member, sub-class and enum this component exposes.
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. |
| AutoDismissTime | TimeSpan? | null | Enables the auto-dismiss feature and sets the time to automatically dismiss the message. It runs wherever dismissing would do something - an OnDismiss handler, Dismissible, or a Dismissed binding - and is held while the pointer is over the message, the focus is inside it, or PauseAutoDismiss was called. |
| AutoFocus | bool | false | Moves the focus to the message as soon as it is rendered. The root is made focusable (tabindex="-1") while no explicit TabIndex is given. |
| ChildContent | RenderFragment? | null | The content of message. |
| Classes | BitMessageClassStyles? | null | Custom CSS classes for different parts of the BitMessage. |
| CollapseAriaLabel | string | "Collapse" | The aria-label and the tooltip of the expander button of the message in Truncate mode while it is expanded. |
| CollapseIcon | BitIconInfo? | null | Gets or sets the icon for the collapse button in Truncate mode using custom CSS classes for external icon libraries. Takes precedence over CollapseIconName when both are set. |
| CollapseIconName | string? | null | Gets or sets the name of the collapse icon in Truncate mode from the built-in Fluent UI icons. |
| Color | BitColor? | null | The general color of the message. |
| Content | RenderFragment? | null | The alias for ChildContent. |
| DelayedAnnouncement | bool | false | Holds the content of the message back for one render, so its live region is already on the page when the text lands in it, which is what makes the announcement reliable. |
| DismissAriaLabel | string | "Dismiss" | The aria-label and the tooltip of the dismiss button of the message. |
| Dismissed | bool | false | Determines whether the message has been dismissed, which is two-way bindable. A dismissed message renders nothing, and setting it back to false brings the message back and re-arms its AutoDismissTime countdown. The message only sets it itself while Dismissible is set or the parameter is bound. |
| DismissedChanged | EventCallback<bool> | null | The callback that is called when the Dismissed value changes, for subscribing to the change without binding to Dismissed. |
| Dismissible | bool | false | Renders the dismiss button and lets the message dismiss itself by setting Dismissed, without an OnDismiss handler having to take it off the page. |
| DismissIcon | BitIconInfo? | null | Gets or sets the icon for the dismiss button using custom CSS classes for external icon libraries. Takes precedence over DismissIconName when both are set. |
| DismissIconName | string? | null | Gets or sets the name of the dismiss icon from the built-in Fluent UI icons. If unset, default will be the Fluent UI Cancel icon. |
| DismissOnEscape | bool | false | Dismisses the message when the Escape key is pressed while the focus is inside it. Only wired up while dismissing would do something - that is, while OnDismiss has a handler, Dismissible is set, or Dismissed is bound. |
| Elevation | int? | null | Determines the elevation of the message, a scale from 1 to 24. |
| ExpandAriaLabel | string | "Expand" | The aria-label and the tooltip of the expander button of the message in Truncate mode while it is collapsed. |
| Expanded | bool | false | Determines whether the truncated content of the message is expanded, which is two-way bindable. Only meaningful together with Truncate. |
| ExpandedChanged | EventCallback<bool> | null | The callback that is called when the Expanded value changes, for subscribing to the change without binding to Expanded. |
| ExpandIcon | BitIconInfo? | null | Gets or sets the icon for the expand button in Truncate mode using custom CSS classes for external icon libraries. Takes precedence over ExpandIconName when both are set. |
| ExpandIconName | string? | null | Gets or sets the name of the expand icon in Truncate mode from the built-in Fluent UI icons. |
| HideIcon | bool | false | Prevents rendering the icon of the message. |
| Icon | BitIconInfo? | null | Gets or sets the icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set. |
| IconAriaLabel | string? | null | The text that says out loud what the icon of the message means, rendered invisibly at the start of the announced region. Set it where the text of the message does not already say what kind of message it is. |
| IconName | string? | null | Gets or sets the name of the icon to display from the built-in Fluent UI icons. If unset, the icon will be selected automatically based on Color. |
| IconTemplate | RenderFragment? | null | The custom template to render in place of the icon of the message, which takes precedence over Icon and IconName. |
| MaxLines | int? | null | Caps how many lines the content of the message may wrap over in Multiline mode, ending the last of them in an ellipsis. Pair it with Truncate to give the reader the expander button that unfolds the rest. |
| 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 | Reports that the message was dismissed - by its button, the Escape key, the countdown or a DismissAsync call - and renders the dismiss button that does it. Taking the message off the page is left to this callback; use Dismissible to have the message do that itself. | |
| OnDismissing | EventCallback<BitMessageDismissArgs> | Callback invoked before the message is dismissed, letting the dismissal be cancelled. Set Cancel on the provided args to keep the message where it is, and read its Reason to tell the dismiss button, the Escape key, the countdown and a DismissAsync call apart. Refusing a countdown gives the message its AutoDismissTime over again. | |
| Politeness | BitPoliteness? | null | How urgently the message interrupts a screen reader (aria-live), independently of the role it is announced under. Left unset, the role carries the urgency on its own: alert interrupts, status waits its turn. |
| Role | string? | null | Custom role to apply to the message text. If unset, Warning, SevereWarning and Error announce as "alert" and every other color as "status". Set it to "none" for a message that should not be announced at all. |
| ShowAutoDismissProgress | bool | false | Renders a bar along the bottom edge of the message that runs down as its AutoDismissTime does, holding wherever the countdown holds. It only renders where there is a countdown to show. |
| Size | BitSize? | null | The size of Message, Possible values: Small | Medium | Large. |
| Square | bool | false | Removes the rounded corners of the message so it can sit flush against the edges of its container as a banner. |
| Styles | BitMessageClassStyles? | null | Custom CSS styles for different parts of the BitMessage. |
| Title | string? | null | The title (heading) of the message, rendered above the content in multiline mode and ahead of it otherwise. |
| TitleElement | string? | null | The HTML element the title of the message is rendered as. The default is a div; set it to a heading (h2 ... h6) where the message is a part of the page a reader should be able to jump to. |
| TitleTemplate | RenderFragment? | null | The custom template to render as the title (heading) of the message, which takes precedence over Title. |
| Truncate | bool | false | Determines if the message text is truncated. If true, the content is clipped to a single line and a button renders to unfold it, for a message that has to fit in a tight space. On a Multiline message it unfolds the content past the MaxLines cap instead, and does nothing without one. |
| Variant | BitVariant? | null | The variant of the message. |
BitMessage public members
| Name | Type | Default value | Description |
|---|---|---|---|
| CollapseAsync | Task | Folds the truncated content of the message back into a single line, the way its expander button does. | |
| DismissAsync | Task | Dismisses the message the same way its dismiss button does: the countdown is stopped, the message takes itself off the page while it owns its dismissal, and OnDismiss is invoked. | |
| ExpandAsync | Task | Unfolds the truncated content of the message, the way its expander button does. | |
| FocusAsync | ValueTask | Moves the focus to the message, which has to be focusable for the focus to land: either give it a TabIndex or set AutoFocus. | |
| PauseAutoDismiss | void | Holds the AutoDismissTime countdown where it is, the way hovering the message does, for holding it over something the message cannot see. | |
| ResumeAutoDismiss | void | Lets the AutoDismissTime countdown spend its time again after a PauseAutoDismiss, from wherever it was held. | |
| ToggleExpandAsync | Task | Turns the truncated content of the message over: unfolds it while it is folded, folds it while it is not. |
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. |
| 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. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | bool | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| 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. |
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. |
| IconLabel | string? | null | Custom CSS classes/styles for the visually hidden icon label 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. |
| Title | string? | null | Custom CSS classes/styles for the title 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 dismiss button of the BitMessage. |
| DismissIcon | string? | null | Custom CSS classes/styles for the dismiss icon of the BitMessage. |
| AutoDismissProgress | string? | null | Custom CSS classes/styles for the auto-dismiss progress track of the BitMessage. |
| AutoDismissProgressBar | string? | null | Custom CSS classes/styles for the auto-dismiss progress bar of the BitMessage. |
BitMessageDismissArgs properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Reason | BitMessageDismissReason | What made the message dismiss: its dismiss button, the Escape key, the auto-dismiss countdown, or a call to the DismissAsync method. | |
| Cancel | bool | false | Set to true to cancel the dismissal and keep the message where it is. |
BitIconInfo properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Name | string? | null | Gets or sets the name of the icon. |
| BaseClass | string? | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | string? | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
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 |
BitPoliteness enum
| Name | Value | Description |
|---|---|---|
| Off | 0 | The region is not a live region: nothing in it is announced as it changes (aria-live="off"). |
| Polite | 1 | The change waits its turn and is announced once the screen reader has finished what it was saying (aria-live="polite"). |
| Assertive | 2 | The change interrupts the screen reader and is announced right away (aria-live="assertive"). |
BitMessageDismissReason enum
| Name | Value | Description |
|---|---|---|
| Button | 0 | The dismiss button of the message was pressed. |
| Escape | 1 | The Escape key was pressed while the focus was inside the message. |
| AutoDismiss | 2 | The AutoDismissTime countdown of the message ran out. |
| Programmatic | 3 | The DismissAsync method of the message was called. |
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. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.