Persona
Avatar
Avatar
A BitPersona is a visual representation of a person across products, typically showcasing the image that person has chosen to upload themselves. The control can also be used to show that person's online status. The complete control includes an individual's avatar (an uploaded image or a composition of the person’s initials on a background color), their name or identification, and online status. The BitPersona control is used in the PeoplePicker and Facepile controls.
Usage
Basic
SK
Saleh Khafan
Annie Lindqvist
Unknown
Developer
Size
Size 8 Persona:
Annie Lindqvist
Secondary
Size 24 Persona:
Annie Lindqvist
Secondary
Size 32 Persona:
Annie Lindqvist
Secondary
Size 40 Persona:
Annie Lindqvist
Software Engineer
Size 48 Persona:
Annie Lindqvist
Software Engineer
Size 56 Persona:
Annie Lindqvist
Software Engineer
Size 72 Persona:
Annie Lindqvist
Software Engineer
In a meeting
Size 100 Persona:
Annie Lindqvist
Software Engineer
Off
Available at 4:00pm
Size 120 Persona:
Annie Lindqvist
Software Engineer
In a meeting
Available at 4:00pm
CoinSize 150:
Annie Lindqvist
Software Engineer
In a meeting
Available at 4:00pm
Color
P
Primary
S
Secondary
T
Tertiary
I
Info
(default)
S
Success
W
Warning
S
SevereWarning
E
Error
P
PrimaryBackground
S
SecondaryBackground
T
TertiaryBackground
P
PrimaryForeground
S
SecondaryForeground
T
TertiaryForeground
P
PrimaryBorder
S
SecondaryBorder
T
TertiaryBorder
Variant
SX
Saleh Xafan
Developer
SX
Saleh Xafan
Developer
SX
Saleh Xafan
Developer
Shape
Saleh Xafan
Developer
Saleh Xafan
Developer
Action
Custom action can be revealed by hovering on the bottom of the image:
Annie Lindqvist
Software Engineer
In a meeting
Available at 4:00pm
Action Click Count: 0
Hover over the image to reveal the image click action:
Edit image
Annie Lindqvist
Software Engineer
In a meeting
Available at 4:00pm
Image Click Count: 0
Initials
Invalid ImageUrl:
SK
Saleh Khafan
No ImageUrl:
SX
Saleh Xafan
ImageInitials:
S
Saleh Khafan
PersonaPresence
None:
Annie Lindqvist
Software Engineer
Offline:
Annie Lindqvist
Software Engineer
Online:
Annie Lindqvist
Software Engineer
Away:
Annie Lindqvist
Software Engineer
Do not Disturb (Dnd):
Annie Lindqvist
Software Engineer
Blocked:
Annie Lindqvist
Software Engineer
Busy:
Annie Lindqvist
Software Engineer
Templates
Text templates:
Edit image
Annie Lindqvist
Software Engineer
In a meeting
Available at 7:00pm
Coin template:
Annie Lindqvist
Software Engineer
Style & Class
Component's Style & Class:
SK
Saleh Khafan
SK
Saleh Khafan
Styles & Classes:
SK
Saleh Khafan
SK
Saleh Khafan
RTL
نص
صالح یوسف نژاد
مهندس نرم افزار
API
BitPersona parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| ActionButtonTitle | string | Edit image | The title of the action button (tooltip). |
| ActionIconName | string? | Icon name for the icon button of the custom action. | |
| ActionTemplate | RenderFragment? | Optional Custom template for the custom action element. | |
| Classes | BitPersonaClassStyles | null | Custom CSS classes for different parts of the BitPersona component. |
| CoinColor | BitColor? | null | The background color when the user's initials are displayed. |
| CoinShape | BitPersonaCoinShape? | null | The shape of the coin. |
| CoinSize | int? | Optional custom persona coin size in pixel. | |
| CoinTemplate | RenderFragment? | Custom persona coin's image template. | |
| CoinVariant | BitVariant? | null | The variant of the coin. |
| HidePersonaDetails | bool | false | Whether to not render persona details, and just render the persona image/initials. |
| ImageAlt | string? | null | Alt text for the image to use. default is empty string. |
| ImageInitials | string? | null | The user's initials to display in the image area when there is no image. |
| ImageOverlayTemplate | RenderFragment? | Optional Custom template for the image overlay. | |
| ImageOverlayText | string? | Edit image | The user's initials to display in the image area when there is no image. |
| ImageUrl | string? | null | Url to the image to use, should be a square aspect ratio and big enough to fit in the image area. |
| OnActionClick | EventCallback<MouseEventArgs> | null | Callback for the persona custom action. |
| OnImageClick | EventCallback<MouseEventArgs> | null | Callback for when the image clicked. |
| OptionalText | string? | null | Optional text to display, usually a custom message set. The optional text will only be shown when using size100. |
| OptionalTextTemplate | RenderFragment? | Custom optional text template. | |
| Presence | BitPersonaPresence | BitPersonaPresence.None | Presence of the person to display - will not display presence if undefined. |
| PresenceIcons | Dictionary<BitPersonaPresence, string>? | null | The icons to be used for the presence status. |
| PresenceTitle | string? | null | Presence title to be shown as a tooltip on hover over the presence icon. |
| PrimaryText | string? | null | Primary text to display, usually the name of the person. |
| PrimaryTextTemplate | RenderFragment? | Custom primary text template. | |
| SecondaryText | string? | null | Secondary text to display, usually the role of the user. |
| SecondaryTextTemplate | RenderFragment? | Custom secondary text template. | |
| ShowInitialsUntilImageLoads | bool | false | If true renders the initials while the image is loading. This only applies when an imageUrl is provided. |
| Unknown | bool | false | If true, show the special coin for unknown persona. It has '?' in place of initials, with static font and background colors. |
| Size | string? | null | Decides the size of the control. |
| Styles | BitPersonaClassStyles | null | Custom CSS styles for different parts of the BitPersona component. |
| TertiaryText | string? | null | Tertiary text to display, usually the status of the user. The tertiary text will only be shown when using size72 or size100. |
| TertiaryTextTemplate | RenderFragment? | null | Custom tertiary text template. |
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. |
BitPersonaClassStyles properties
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitPersona. |
| CoinContainer | string? | null | Custom CSS classes/styles for the coin container of the BitPersona. |
| PresentationIcon | string? | null | Custom CSS classes/styles for the presentation icon of the BitPersona. |
| Presentation | string? | null | Custom CSS classes/styles for the presentation of the BitPersona. |
| ImageContainer | string? | null | Custom CSS classes/styles for the image container of the BitPersona.. |
| UnknownIcon | string? | null | Custom CSS classes/styles for the unknown icon of the BitPersona. |
| ImageOverlay | string? | null | Custom CSS classes/styles for the image overlay of the BitPersona. |
| ImageOverlayText | string? | null | Custom CSS classes/styles for the image overlay text of the BitPersona. |
| Initials | string? | null | Custom CSS classes/styles for the initials of the BitPersona. |
| Image | string? | null | Custom CSS classes/styles for the image of the BitPersona. |
| ActionButton | string? | null | Custom CSS classes/styles for the action button of the BitPersona. |
| ActionButtonIcon | string? | null | Custom CSS classes/styles for the action button icon of the BitPersona. |
| Presence | string? | null | Custom CSS classes/styles for the presence of the BitPersona. |
| DetailsContainer | string? | null | Custom CSS classes/styles for the details container of the BitPersona. |
| PrimaryTextContainer | string? | null | Custom CSS classes/styles for the primary text container of the BitPersona. |
| SecondaryTextContainer | string? | null | Custom CSS classes/styles for the secondary text container of the BitPersona. |
| TertiaryTextContainer | string? | null | Custom CSS classes/styles for the tertiary text container of the BitPersona. |
| OptionalTextContainer | string? | null | Custom CSS classes/styles for the optional text container of the BitPersona. |
BitPersonaPresence enum
Name |
Value |
Description |
|---|---|---|
| Away | 3 | |
| Blocked | 5 | |
| Busy | 6 | |
| Dnd | 4 | |
| None | 0 | |
| Offline | 1 | |
| Online | 2 |
BitPersonaSize enum
Name |
Value |
Description |
|---|---|---|
| Size8 | Renders a 8px BitPersonaCoin. | |
| Size24 | Renders a 24px BitPersonaCoin. | |
| Size32 | Renders a 32px BitPersonaCoin. | |
| Size40 | Renders a 40px BitPersonaCoin. | |
| Size48 | Renders a 48px BitPersonaCoin. | |
| Size56 | Renders a 56px BitPersonaCoin. | |
| Size72 | Renders a 72px BitPersonaCoin. | |
| Size100 | Renders a 100px BitPersonaCoin. | |
| Size120 | Renders a 120px BitPersonaCoin. |
BitPersonaCoinShape enum
Name |
Value |
Description |
|---|---|---|
| Circular | Represents the traditional round shape of a coin. | |
| Square | Represents a square-shaped coin. |
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. |
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