- bit BlazorUI

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!

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