Skip to content

934883: Test and resolve issues in UG all sections - ASP core MVC Avatar control. #3794

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jan 23, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions ej2-asp-core-mvc/avatar/EJ2_ASP.MVC/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ documentation: ug

# Getting Started with ASP.NET MVC Avatar Control

This section briefly explains about how to include [ASP.NET MVC Avatar](https://www.syncfusion.com/aspnet-mvc-ui-controls/avatar) control in your ASP.NET MVC application using Visual Studio.
This section explains about how to include [ASP.NET MVC Avatar](https://www.syncfusion.com/aspnet-mvc-ui-controls/avatar) control in your ASP.NET MVC application using Visual Studio.

## Prerequisites

Expand All @@ -25,7 +25,7 @@ This section briefly explains about how to include [ASP.NET MVC Avatar](https://

## Add stylesheet

Here, the theme is referred using CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` file as follows,
Here, the desired theme is referred using CDN inside the `<head>` of **~/Views/Shared/_Layout.cshtml** file as follows,

{% tabs %}
{% highlight c# tabtitle="~/_Layout.cshtml" %}
Expand All @@ -43,7 +43,7 @@ N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetmvc/documentatio

## Add ASP.NET MVC Avatar control

Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Avatar control in `~/Home/Index.cshtml` page.
Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Avatar control in **~/Home/Index.cshtml** page.

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
Expand Down
6 changes: 3 additions & 3 deletions ej2-asp-core-mvc/avatar/EJ2_ASP.NETCORE/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ documentation: ug

# Getting Started with ASP.NET Core Avatar Control

This section briefly explains about how to include [ASP.NET Core Avatar](https://www.syncfusion.com/aspnet-core-ui-controls/avatar) control in your ASP.NET Core application using Visual Studio.
This section explains about how to include [ASP.NET Core Avatar](https://www.syncfusion.com/aspnet-core-ui-controls/avatar) control in your ASP.NET Core application using Visual Studio.

## Prerequisites

Expand All @@ -25,7 +25,7 @@ This section briefly explains about how to include [ASP.NET Core Avatar](https:/

## Add stylesheet

Here, the theme is referred using CDN inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file as follows,
Here, the desired theme is referred using CDN inside the `<head>` of **~/Pages/Shared/_Layout.cshtml** file as follows,

{% tabs %}
{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
Expand All @@ -43,7 +43,7 @@ N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentati

## Add ASP.NET Core Avatar control

Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Avatar tag helper in `~/Pages/Index.cshtml` page.
Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Avatar tag helper in **~/Pages/Index.cshtml** page.

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
Expand Down
14 changes: 7 additions & 7 deletions ej2-asp-core-mvc/avatar/how-to/avatar-customization.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Avatar Customization in ##Platform_Name## Avatar Component | Syncfusion
description: Learn here all about Avatar Customization in Syncfusion ##Platform_Name## Avatar component of Syncfusion Essential JS 2 and more.
title: Avatar Customization in ##Platform_Name## Avatar control | Syncfusion
description: Learn here all about Avatar Customization in Syncfusion ##Platform_Name## Avatar control of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: Avatar Customization
publishingplatform: ##Platform_Name##
Expand All @@ -12,7 +12,7 @@ documentation: ug

## Color customization

The avatar comes with default background color (Grey). This can be easily customized to desired color by adding custom class or directly selecting the avatar class from the CSS.
The Avatar comes with default background color (Grey). This can be easily customized to the desired color by adding custom class or directly selecting the Avatar class from the CSS.

{% if page.publishingplatform == "aspnet-core" %}

Expand All @@ -37,9 +37,9 @@ The avatar comes with default background color (Grey). This can be easily custom

![Avatar Color](../images/color.PNG)

## Customize avatar sizes
## Customize Avatar sizes

Even though the avatar comes with five predefined sizes, sometimes it's not enough. So, the avatar is designed in such a way that the width and height will be relative to font-size. By changing the `font-size` of the avatar element, you can change the width and height automatically.
Even though the Avatar comes with five predefined sizes, sometimes it's not enough. The Avatar is designed so that the width and height are relative to the font-size. By changing the `font-size` of the Avatar element, you can change the width and height automatically.

{% if page.publishingplatform == "aspnet-core" %}

Expand All @@ -66,9 +66,9 @@ Even though the avatar comes with five predefined sizes, sometimes it's not enou

N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-UG-Examples/tree/main/Avatar/AvatarUGSample).

## Use various media in avatar
## Use various media in Avatar

Avatars can be used with a wide variety of media formats like SVG, font-icons, images, letters, words, etc.
Avatars can be used with a wide variety of types of media formats like SVG, font-icons, images, letters, words, etc.

{% if page.publishingplatform == "aspnet-core" %}

Expand Down
8 changes: 4 additions & 4 deletions ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-badge.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Integrate Avatar Into Badge in ##Platform_Name## Avatar Component
description: Learn here all about how to integrate avatar into badge in Syncfusion ##Platform_Name## Avatar component of Syncfusion Essential JS 2 and more.
title: Integrate Avatar Into Badge in ##Platform_Name## Avatar control | Syncfusion
description: Learn here all about how to integrate Avatar into Badge in Syncfusion ##Platform_Name## Avatar control of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: Integrate Avatar Into Badge
publishingplatform: ##Platform_Name##
documentation: ug
---

# Integrate avatar into Badge
# Integrate Avatar into Badge

The badge is dependent and supportive component, and it can be used with avatar to create a notification avatar. The default avatar (.`e-avatar`) and circle avatar (.`e-avatar-circle`) have been used with notification badges (.`e-badge-notification`) in the following sample.
The Badge is a dependent and supportive control that can be used with Avatar to create a notification Avatar. The default Avatar `(.e-avatar)` and circle Avatar `(.e-avatar-circle)` have been used with notification badges `(.e-badge-notification)` in the following sample.

{% if page.publishingplatform == "aspnet-core" %}

Expand Down
10 changes: 5 additions & 5 deletions ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-listview.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Integrate Avatar Into Listview in ##Platform_Name## Avatar Component
description: Learn here all about how to integrate avatar into Listview in Syncfusion ##Platform_Name## Avatar component of Syncfusion Essential JS 2 and more.
title: Integrate Avatar Into ListView in ##Platform_Name## Avatar control | Syncfusion
description: Learn here all about how to integrate Avatar into ListView in Syncfusion ##Platform_Name## Avatar control of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: Integrate Avatar Into Listview
control: Integrate Avatar Into ListView
publishingplatform: ##Platform_Name##
documentation: ug
---

# Integrate avatar into ListView
# Integrate Avatar into ListView

Avatar is integrated into the listview to create contacts applications. The `xsmall` size avatar is used to match the size of the list item. Letters and images are also used as avatar content.
Avatar is integrated into the ListView to create contacts applications. The `xsmall` size Avatar is used to match the size of the list items. Both letters and images are also used as Avatar content.

{% if page.publishingplatform == "aspnet-core" %}

Expand Down
4 changes: 2 additions & 2 deletions ej2-asp-core-mvc/avatar/overview.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Overview in ##Platform_Name## Avatar Component
description: Learn here all about Overview in Syncfusion ##Platform_Name## Avatar component of Syncfusion Essential JS 2 and more.
title: Overview in ##Platform_Name## Avatar control | Syncfusion
description: Learn here all about Overview in Syncfusion ##Platform_Name## Avatar control of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: Index
publishingplatform: ##Platform_Name##
Expand Down
20 changes: 10 additions & 10 deletions ej2-asp-core-mvc/avatar/types.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,19 @@ documentation: ug

# Types and Styles in ##Platform_Name## Avatar Control

This section explains different types of avatar.
This section explains different types of Avatar.

## Avatar size

The Essential<sup style="font-size:70%">&reg;</sup> JS 2 Avatar has the following predefined sizes that can be used with the `.e-avatar` class to change the appearance of the avatar.
The Essential<sup style="font-size:70%">&reg;</sup> JS 2 Avatar has the following predefined sizes that can be used with the `.e-avatar` class to change the appearance of the Avatar.

| Class Name | Description |
| ------------- | ------------- |
| e-avatar-xlarge | Displays xlarge size avatar. |
| e-avatar-large | Displays apply large size avatar. |
| e-avatar | Displays apply default size avatar. |
| e-avatar-small | Displays apply small size avatar. |
| e-avatar-xsmall | Displays apply xsmall size avatar. |
| e-avatar-xlarge | Displays xlarge size Avatar. |
| e-avatar-large | Displays apply large size Avatar. |
| e-avatar | Displays apply default size Avatar. |
| e-avatar-small | Displays apply small size Avatar. |
| e-avatar-xsmall | Displays apply xsmall size Avatar. |

{% if page.publishingplatform == "aspnet-core" %}

Expand All @@ -50,14 +50,14 @@ The Essential<sup style="font-size:70%">&reg;</sup> JS 2 Avatar has the followin

## Avatar types

The types of Essential<sup style="font-size:70%">&reg;</sup> JS 2 avatar are:
The types of Essential<sup style="font-size:70%">&reg;</sup> JS 2 Avatar are:

* Default
* Circle

### Default

The default style of the avatar is rectangular shape with rounded corners, which can be applied from adding the modifier class `.e-avatar` to the target element.
The default style of the Avatar is rectangular shape with rounded corners, which can be applied from adding the modifier class `.e-avatar` to the target element.

{% if page.publishingplatform == "aspnet-core" %}

Expand All @@ -83,7 +83,7 @@ The default style of the avatar is rectangular shape with rounded corners, which

### Circle

The circle avatar style can be applied by adding the modifier class `.e-avatar-circle` to the target element.
The circle Avatar style can be applied by adding the modifier class `.e-avatar-circle` to the target element.

{% if page.publishingplatform == "aspnet-core" %}

Expand Down
Loading