diff --git a/blazor-toc.html b/blazor-toc.html index a960b24026..39c938fcf7 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -925,7 +925,9 @@ - +
  • + Customization +
  • Badge diff --git a/blazor/avatar/customizations.md b/blazor/avatar/customizations.md new file mode 100644 index 0000000000..a19d2d64cd --- /dev/null +++ b/blazor/avatar/customizations.md @@ -0,0 +1,258 @@ +--- +layout: post +title: Customizations in Blazor Avatar Component | Syncfusion® +description: Checkout and learn about the documentation of how to use different content types, shapes, and sizes in Blazor Avatar component. +platform: Blazor +control: Avatar +documentation: ug +--- + +# Customizations with Blazor Avatar Component + +Learn how to use different content types, shapes, and sizes in the Blazor Avatar component. + +## Types in Blazor Avatar Component + +The Blazor Avatar component supports multiple content types to display user or entity information. + +| Content Type | Description | +|-------------|-------------| +| Image Avatar | Displays an image inside the Avatar. | +| SVG Avatar | Displays SVG icons inside the Avatar. | +| Initial Avatar | Displays initials or letters inside the Avatar. | +| Font Avatar | Displays font icons inside the Avatar. | +| Word Avatar | Displays words or text inside the Avatar. | + +```cshtml + + +
    + XLarge user avatar image +
    +
    + +
    +
    +
    +
    + +
    GR
    +
    + +
    +
    +
    +
    + +
    User
    + + + +``` + +## Shapes in Blazor Avatar Component + +The Blazor Avatar component supports two shapes: **Square** and **Circular**. By default, the Avatar is rendered in a square shape with a medium size. + +```cshtml + + +
    + Square avatar image +
    + + +
    + Circular avatar image +
    + + + +``` + +## Sizes in Blazor Avatar Component + +The Blazor Avatar component provides five size options to customize the Avatar appearance based on your UI requirements. + +| Size | Description | +|------| -------------| +| Extra Small | Displays an extra small sized Avatar. | +| Small | Displays a small sized Avatar. | +| Medium | Displays a medium sized Avatar. This is the default size. | +| Large | Displays a large sized Avatar. | +| Extra Large | Displays an extra large sized Avatar. | + +```cshtml + + +
    + + +
    + + +
    + + +
    + + +
    + + + +``` + +## Avatar Integration with ListView Component + +Easily integrate the Blazor Avatar component with layout components like ListView and Card to achieve UIs like mobile contact lists, Gmail, Outlook, and more. You can also integrate with the Badge component to represent notification counts in messaging apps. + +The following example demonstrates the integration of Avatar within the ListView component. + +```cshtml + +@using Syncfusion.Blazor.Lists +
    + + + + + + + +
    +@code { + private List DataSource = new List() + { + new DataModel { Id = "s_01", Text = "Robert", Avatar = "", Pic = "pic04" }, + new DataModel { Id = "s_02", Text = "Nancy", Avatar = "N", Pic = "" }, + new DataModel { Id = "s_03", Text = "John", Avatar = "", Pic = "pic01" }, + new DataModel { Id = "s_05", Text = "Andrew", Avatar = "A", Pic = "" }, + new DataModel { Id = "s_06", Text = "Margaret", Avatar = "", Pic = "pic02" }, + new DataModel { Id = "s_07", Text = "Steven", Avatar = "", Pic = "pic03" }, + new DataModel { Id = "s_08", Text = "Michael", Avatar = "M", Pic = "" }, + }; + // Specifies the model class for ListView datasource. + public class DataModel + { + public string? Id { get; set; } + public string? Text { get; set; } + public string? Avatar { get; set; } + public string? Pic { get; set; } + } +} + + +```