Callout
A callout is an anchored tip that can be used to teach people or guide them through the app without blocking them.
Usage
Basic
Basic usage of BitCallout component with a simple content and a button as the anchor to show or hide the callout.
This is the callout content.
External anchor
Use an external element as the anchor for a BitCallout component, with both ID-based and ElementSelector-based anchoring options.
Selected date
December 2024
S
M
T
W
T
F
S
Selected date
December 2024
S
M
T
W
T
F
S
Binding
Bind the Open state of BitCallout component to a boolean variable, allowing for more control over its opening and closing behavior.
This is the callout content.
You can even close it from here!
You can even close it from here!
DropDirection
Explores different drop directions for the BitCallout component, including automatic and explicit directions.
DropDirection: All
Callout content 1
Callout content 2
Callout content 3
Callout content 4
Callout content 5
Callout content 6
Callout content 7
Callout content 8
Callout content 9
Callout content 10
Callout content 11
Callout content 12
DropDirection: TopAndBottom
Callout content 1
Callout content 2
Callout content 3
Callout content 4
Callout content 5
Callout content 6
Callout content 7
Callout content 8
Callout content 9
Callout content 10
Callout content 11
Callout content 12
Style & Class
Explores styling and class customization for BitCallout, including component styles, custom classes, and detailed style options.
Component's Style & Class:
This is the callout content.
This is the callout content.
Styles & Classes:
This is the callout content.
Show callout
This is the callout content.
API
BitCallout parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Anchor | RenderFragment? | null | The content of the anchor element of the callout. |
| AnchorEl | Func<ElementReference>? | null | The setter function for element reference to the external anchor element. |
| AnchorId | string? | null | The id of the external anchor element. |
| ChildContent | RenderFragment? | null | The content of the callout. |
| Classes | BitCalloutClassStyles? | null | Custom CSS classes for different parts of the callout. |
| Content | RenderFragment? | null | Alias for ChildContent. |
| Direction | BitDropDirection? | null | Determines the allowed directions in which the callout should decide to be opened. |
| IsOpen | bool | false | Determines the opening state of the callout. |
| OnToggle | EventCallback<bool> | The callback that is called when the callout opens or closes. | |
| ResponsiveMode | BitResponsiveMode? | null | Configures the responsive mode of the callout for the small screens. |
| Styles | BitCalloutClassStyles? | null | Custom CSS styles for different parts of the callout. |
BitCallout public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Toggle | Task | Toggles the callout to open/close it. |
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. |
BitCalloutClassStyles properties
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitCallout. |
| AnchorContainer | string? | null | Custom CSS classes/styles for the anchor container element of the BitCallout. |
| Opened | string? | null | Custom CSS classes/styles for the opened callout state of the BitCallout. |
| Content | string? | null | Custom CSS classes/styles for the content of the BitCallout. |
| Overlay | string? | null | Custom CSS classes/styles for the overlay of the BitCallout. |
BitDropDirection enum
Name |
Value |
Description |
|---|---|---|
| All | 0 | The direction determined automatically based on the available spaces in all directions. |
| TopAndBottom | 1 | The direction determined automatically based on the available spaces in only top and bottom directions. |
BitResponsiveMode enum
Name |
Value |
Description |
|---|---|---|
| None | 0 | Disables the responsive mode. |
| Panel | 1 | Enables the panel responsive mode. |
| Top | 2 | Enables the top responsive mode. |
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