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
            
            <BitPersona PrimaryText="Saleh Khafan" Size="BitPersonaSize.Size72" />
<BitPersona PrimaryText="Saleh Khafan"
            Size="BitPersonaSize.Size72"
            ImageUrl="/images/persona/persona-female.png" />
<BitPersona PrimaryText="Unknown"
            SecondaryText="Developer"
            Size="BitPersonaSize.Size72"
            Unknown />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
<BitCheckbox @bind-Value="isDetailsShown" Label="Include BitPersona details" /> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Secondary" Size="BitPersonaSize.Size8" HidePersonaDetails="!isDetailsShown" ImageUrl="/images/persona/persona-female.png" /> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Secondary" Size="BitPersonaSize.Size24" HidePersonaDetails="!isDetailsShown" ImageUrl="/images/persona/persona-female.png" /> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Secondary" [email protected] HidePersonaDetails="!isDetailsShown" ImageUrl="/images/persona/persona-female.png" /> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Size="BitPersonaSize.Size40" HidePersonaDetails="!isDetailsShown" ImageUrl="/images/persona/persona-female.png" /> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Size="BitPersonaSize.Size48" HidePersonaDetails="!isDetailsShown" ImageUrl="/images/persona/persona-female.png" /> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Size="BitPersonaSize.Size56" HidePersonaDetails="!isDetailsShown" ImageUrl="/images/persona/persona-female.png" /> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" TertiaryText="In a meeting" Size="BitPersonaSize.Size72" HidePersonaDetails="!isDetailsShown" ImageUrl="/images/persona/persona-female.png" /> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" TertiaryText="Off" OptionalText="Available at 4:00pm" Size="BitPersonaSize.Size100" HidePersonaDetails="!isDetailsShown" ImageUrl="/images/persona/persona-female.png" /> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" TertiaryText="In a meeting" OptionalText="Available at 4:00pm" Size="BitPersonaSize.Size120" HidePersonaDetails="!isDetailsShown" ImageUrl="/images/persona/persona-female.png" /> <BitPersona CoinSize="150" PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" TertiaryText="In a meeting" OptionalText="Available at 4:00pm" Size="BitPersonaSize.Size120" HidePersonaDetails="!isDetailsShown" ImageUrl="/images/persona/persona-female.png" />@code { private bool isDetailsShown = true; }
Variant
SX
Saleh Xafan
            Developer
            
            SX
Saleh Xafan
            Developer
            
            SX
Saleh Xafan
            Developer
            
            <BitPersona PrimaryText="Saleh Xafan"
            SecondaryText="Developer"
            Size="BitPersonaSize.Size72"
            CoinVariant="BitVariant.Fill" />
<BitPersona PrimaryText="Saleh Xafan"
            SecondaryText="Developer"
            Size="BitPersonaSize.Size72"
            CoinVariant="BitVariant.Outline" />
<BitPersona PrimaryText="Saleh Xafan"
            SecondaryText="Developer"
            Size="BitPersonaSize.Size72"
            CoinVariant="BitVariant.Text" />Shape
Saleh Xafan
            Developer
            
            Saleh Xafan
            Developer
            
            <BitPersona PrimaryText="Saleh Xafan"
            SecondaryText="Developer"
            Size="BitPersonaSize.Size72"
            CoinShape="BitPersonaCoinShape.Circular"
            ImageUrl="/images/persona/persona-female.png" />
<BitPersona PrimaryText="Saleh Xafan"
            SecondaryText="Developer"
            Size="BitPersonaSize.Size72"
            CoinShape="BitPersonaCoinShape.Square"
            ImageUrl="/images/persona/persona-female.png" />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
<BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" TertiaryText="In a meeting" OptionalText="Available at 4:00pm" Size="BitPersonaSize.Size120" Presence="BitPersonaPresence.None" OnActionClick="() => actionClickCount++" ActionIconName="@BitIconName.CloudUpload" ImageUrl="/images/persona/persona-female.png" /> <p>Action Click Count: @actionClickCount</p> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" TertiaryText="In a meeting" OptionalText="Available at 4:00pm" Size="BitPersonaSize.Size120" Presence="BitPersonaPresence.Online" OnImageClick="() => imageClickCount++" ImageUrl="/images/persona/persona-female.png" /> <p>Image Click Count: @imageClickCount</p>@code { private int imageClickCount = 0; private int actionClickCount = 0; }
Initials
Invalid ImageUrl:
SK
Saleh Khafan
            
            
            No ImageUrl:
SX
Saleh Xafan
            
            
            ImageInitials:
S
Saleh Khafan
            
            
            <BitPersona PrimaryText="Saleh Khafan"
            Size="BitPersonaSize.Size72"
            ShowInitialsUntilImageLoads
            ImageUrl="invalid-src" />
<BitPersona Size="BitPersonaSize.Size72" PrimaryText="Saleh Xafan" />
<BitPersona Size="BitPersonaSize.Size72" PrimaryText="Saleh Khafan" ImageInitials="S" />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
            
            <div>None</div> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Presence="BitPersonaPresence.None" PresenceIcons="_icons" Size="BitPersonaSize.Size120" ImageUrl="/images/persona/persona-female.png" /> <div>Offline</div> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Presence="BitPersonaPresence.Offline" PresenceIcons="_icons" Size="BitPersonaSize.Size120" ImageUrl="/images/persona/persona-female.png" /> <div>Online</div> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Presence="BitPersonaPresence.Online" PresenceIcons="_icons" Size="BitPersonaSize.Size120" ImageUrl="/images/persona/persona-female.png" /> <div>Away</div> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Presence="BitPersonaPresence.Away" PresenceIcons="_icons" Size="BitPersonaSize.Size120" ImageUrl="/images/persona/persona-female.png" /> <div>Do not Disturb (Dnd)</div> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Presence="BitPersonaPresence.Dnd" PresenceIcons="_icons" Size="BitPersonaSize.Size120" ImageUrl="/images/persona/persona-female.png" /> <div>Blocked</div> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Presence="BitPersonaPresence.Blocked" Size="BitPersonaSize.Size120" ImageUrl="/images/persona/persona-female.png" /> <div>Busy</div> <BitPersona PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Presence="BitPersonaPresence.Busy" PresenceIcons="_icons" Size="BitPersonaSize.Size120" ImageUrl="/images/persona/persona-female.png" />@code { private Dictionary<BitPersonaPresence, string> _icons = new() { {BitPersonaPresence.Offline, BitIconName.UnavailableOffline}, {BitPersonaPresence.Online, BitIconName.SkypeCheck}, {BitPersonaPresence.Away, BitIconName.SkypeClock}, {BitPersonaPresence.Dnd, BitIconName.SkypeMinus}, {BitPersonaPresence.Blocked, BitIconName.BlockedSolid}, {BitPersonaPresence.Busy, BitIconName.Blocked2Solid} }; }
Reversed
Adjust the texts position of BitPersona's image to be reversed.
        Annie Lindqvist
            Software Engineer
            
            <BitPersona Reversed
            PrimaryText="Annie Lindqvist"
            SecondaryText="Software Engineer"
            Presence="BitPersonaPresence.Online"
            PresenceIcons="_icons"
            Size="BitPersonaSize.Size120"
            ImageUrl="/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" />Templates
Text templates:
                    Edit image
                
                    Annie Lindqvist
                
            
                    Software Engineer
                
            
                    In a meeting
                
            
                    Available at 7:00pm
                
Coin template:

Annie Lindqvist
            Software Engineer
            
            <style>
    .custom-ico {
        font-size: 14px;
        margin-right: 5px;
    }
    .custom-coin {
        display: block;
        border-radius: 20px;
    }
</style>
<BitPersona Size="BitPersonaSize.Size100" ImageUrl="/images/persona/persona-female.png" OnImageClick="() => {}">
    <PrimaryTextTemplate>
        <BitIcon IconName="@BitIconName.Contact" Class="custom-ico" />
        Annie Lindqvist
    </PrimaryTextTemplate>
    <SecondaryTextTemplate>
        <BitIcon IconName="@BitIconName.Suitcase" Class="custom-ico" />
        Software Engineer
    </SecondaryTextTemplate>
    <TertiaryTextTemplate>
        <BitIcon IconName="@BitIconName.JoinOnlineMeeting" Class="custom-ico" />
        In a meeting
    </TertiaryTextTemplate>
    <OptionalTextTemplate>
        <BitIcon IconName="@BitIconName.Clock" Class="custom-ico" />
        Available at 7:00pm
    </OptionalTextTemplate>
    <ImageOverlayTemplate>
        <BitIcon IconName="@BitIconName.Edit" Class="custom-ico" />
        Edit image
    </ImageOverlayTemplate>
</BitPersona>
<BitPersona Size="BitPersonaSize.Size100" PrimaryText="Annie Lindqvist" SecondaryText="Software Engineer" Presence="BitPersonaPresence.Online" CoinVariant="BitVariant.Text">
    <CoinTemplate>
        <img src="/images/persona/persona-female.png" width="100px" height="100px" class="custom-coin" />
    </CoinTemplate>
</BitPersona>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
            
            
            <BitPersona PrimaryText="Primary" CoinColor="BitColor.Primary" />
<BitPersona PrimaryText="Secondary" CoinColor="BitColor.Secondary" />
<BitPersona PrimaryText="Tertiary" CoinColor="BitColor.Tertiary" />
<BitPersona PrimaryText="Info" SecondaryText="(default)" CoinColor="BitColor.Info" />
<BitPersona PrimaryText="Success" CoinColor="BitColor.Success" />
<BitPersona PrimaryText="Warning" CoinColor="BitColor.Warning" />
<BitPersona PrimaryText="SevereWarning" CoinColor="BitColor.SevereWarning" />
<BitPersona PrimaryText="Error" CoinColor="BitColor.Error" />
<BitPersona PrimaryText="PrimaryBackground" CoinColor="BitColor.PrimaryBackground" />
<BitPersona PrimaryText="SecondaryBackground" CoinColor="BitColor.SecondaryBackground" />
<BitPersona PrimaryText="TertiaryBackground" CoinColor="BitColor.TertiaryBackground" />
<BitPersona PrimaryText="PrimaryForeground" CoinColor="BitColor.PrimaryForeground" />
<BitPersona PrimaryText="SecondaryForeground" CoinColor="BitColor.SecondaryForeground" />
<BitPersona PrimaryText="TertiaryForeground" CoinColor="BitColor.TertiaryForeground" />
<BitPersona PrimaryText="PrimaryBorder" CoinColor="BitColor.PrimaryBorder" />
<BitPersona PrimaryText="SecondaryBorder" CoinColor="BitColor.SecondaryBorder" />
<BitPersona PrimaryText="TertiaryBorder" CoinColor="BitColor.TertiaryBorder" />Style & Class
Component's Style & Class:
SK
Saleh Khafan
            
            
            SK
Saleh Khafan
            
            
            Styles & Classes:
SK
Saleh Khafan
            
            
            SK
Saleh Khafan
            
            
            <style>
    .custom-class {
        padding: 1rem;
        box-shadow: #3d3226 0 0 1rem;
        border-radius: 1rem;
    }
    .custom-img-container {
        color: #ff6a00;
        background-color: #f2cd01;
    }
    .custom-primary-text {
        color: #b6ff00;
        font-weight: bold;
        font-style: italic;
    }
</style>
<BitPersona PrimaryText="Saleh Khafan"
            Size="BitPersonaSize.Size72"
            Style="padding: 1rem; background: gray;border-radius: 1rem;" />
<BitPersona PrimaryText="Saleh Khafan"
            Size="BitPersonaSize.Size72"
            Class="custom-class" />
<BitPersona PrimaryText="Saleh Khafan"
            Size="BitPersonaSize.Size72"
            Styles="@(new() { ImageContainer = "color: #b6ff00; background-color: #00ff90;",
                              PrimaryTextContainer = "color: #ea1919; font-weight: bold; font-style: italic;" })" />
<BitPersona PrimaryText="Saleh Khafan"
            Size="BitPersonaSize.Size72"
            Classes="@(new() { ImageContainer = "custom-img-container",
                               PrimaryTextContainer = "custom-primary-text" })" />RTL
نص
صالح یوسف نژاد
            مهندس نرم افزار
            
            <BitPersona Dir="BitDir.Rtl"
            PrimaryText="صالح یوسف نژاد"
            SecondaryText="مهندس نرم افزار"
            Size="@BitPersonaSize.Size56" />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. | 
| Reversed | bool | false | Reverses the texts and image location. | 
| 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. | 
Feedback
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
Or you can review / edit this component on GitHub.
- On this page