Extras
PopConfirm
Bit.BlazorUI.ExtrasPopconfirmConfirmPopoverConfirmPopup
BitPopConfirm asks for a confirmation right where an action is triggered: a small popup anchored to the trigger, with a question and the two buttons that answer it, for the actions worth a second thought that are not worth a modal dialog.
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 popup is an alertdialog that keeps the focus while it is open, starting on the Cancel button, so an Enter
pressed out of habit does not confirm. Every opening ends in exactly one of OnConfirm and OnCancel: Confirm
raises the first, and Cancel, Escape and a click outside of the popup the second. The focus goes back to the
trigger either way.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
The trigger is the child content, and a click on it opens the popup. The title names the popup and the
message describes it.
Delete the file?
It cannot be brought back once it is deleted.
Answer:
Message only
Without a title, the message is what names the popup.
Discard the changes?
Button texts
ConfirmText and CancelText say what the two answers do, which reads better than a plain Ok.
Leave the meeting?
The others will carry on without you.
Placement
The popup takes the side of the trigger with the most room, unless Placement names one.
Placed on top.
Placed at the bottom.
Placed at the start.
Placed at the end.
Binding
IsOpen is two-way bindable. Opening or closing the popup through it is the page's own doing, and raises neither
OnConfirm nor OnCancel.
Archive the project?
IsOpen: False
Disabled
A disabled pop confirm never opens, and leaves the trigger as it is.
Delete the file?
Color
ConfirmColor colors the Confirm button: Error marks an action that destroys something.
Delete the account?
Every project of the account goes with it.
Deleted: False
Style & Class
Classes and Styles reach every part of the pop confirm, and the --bit-PopConfirm-* variables restyle its
defaults, set on the Style of the pop confirm or on any of its ancestors.
Styled popup
With custom styles.
Classed popup
With custom classes.
RTL
Use BitPopConfirm 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.
BitPopConfirm CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-PopConfirm-max-width | spacing(40) | Width the popup stops growing at, the message wrapping inside. |
| --bit-PopConfirm-padding | spacing(1.5) | Inset of the content of the popup. |
| --bit-PopConfirm-gap | spacing(1) | Room between the title, the message and the buttons. |
| --bit-PopConfirm-title-color | var(--bit-clr-fg-pri) | Color of the title. |
| --bit-PopConfirm-message-color | var(--bit-clr-fg-sec) | Color of the message. |
| --bit-PopConfirm-actions-gap | spacing(1) | Room between the two buttons. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitPopConfirm parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| CancelText | string? | null | The text of the Cancel button. Default: Cancel. |
| ChildContent | RenderFragment? | null | The trigger the popup is anchored to and opened from, a button most of the time. |
| Classes | BitPopConfirmClassStyles? | null | Custom CSS classes for the different parts of the pop confirm. |
| ConfirmColor | BitColor? | null | The color of the Confirm button, Error for an action that destroys something. Default: the color of a button left without one (Primary). |
| ConfirmText | string? | null | The text of the Confirm button. Default: Ok. |
| IsOpen | bool | false | Whether the popup is open. Two-way bindable; opening or closing it through this parameter raises neither OnConfirm nor OnCancel. |
| Message | string? | null | The question the popup asks, or what it explains under the title. The popup is described by it, or named by it where there is no Title. |
| OnCancel | EventCallback | The callback for when the question is answered with no: the Cancel button, Escape, or a click outside of the popup. | |
| OnConfirm | EventCallback | The callback for when the question is answered with yes, through the Confirm button. It is raised once the popup has closed. | |
| Placement | BitPlacement? | null | The side of the trigger the popup is placed on: Top, Bottom, Start or End, or one of their corner variants (TopStart, BottomEnd, ...). By default it takes the side with the most room. |
| Styles | BitPopConfirmClassStyles? | null | Custom CSS styles for the different parts of the pop confirm. |
| Title | string? | null | The title of the popup, which names it. |
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. |
BitPopConfirmClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitPopConfirm, which holds the trigger. |
| Callout | string? | null | Custom CSS classes/styles for the popup of the BitPopConfirm. |
| Container | string? | null | Custom CSS classes/styles for the container of the content of the popup of the BitPopConfirm. |
| Title | string? | null | Custom CSS classes/styles for the title of the BitPopConfirm. |
| Message | string? | null | Custom CSS classes/styles for the message of the BitPopConfirm. |
| Actions | string? | null | Custom CSS classes/styles for the container of the buttons of the BitPopConfirm. |
| CancelButton | string? | null | Custom CSS classes/styles for the Cancel button of the BitPopConfirm. |
| ConfirmButton | string? | null | Custom CSS classes/styles for the Confirm button of the BitPopConfirm. |
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. |
BitPlacement enum
| Name | Value | Description |
|---|---|---|
| Top | 0 | The top edge. |
| Bottom | 1 | The bottom edge. |
| Start | 2 | The edge the reading direction starts from - the left in LTR, the right in RTL. On the vertical axis, which does not turn around, it is the top. |
| End | 3 | The edge the reading direction ends at - the right in LTR, the left in RTL. On the vertical axis, which does not turn around, it is the bottom. |
| Left | 4 | The left edge, in both reading directions. |
| Right | 5 | The right edge, in both reading directions. |
| Center | 6 | The middle of the axis, against neither edge. |
| TopAndBottom | 7 | Both edges of the block axis at once. |
| StartAndEnd | 8 | Both edges of the inline axis at once, following the reading direction the way Start and End do. |
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.