Skip to content

934883: Test and resolve issues in UG all sections - ASP core Badge control. #3809

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 3 commits into from
Jan 24, 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
4 changes: 2 additions & 2 deletions ej2-asp-core-mvc/badge/EJ2_ASP.MVC/getting-started-asp-mvc.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ This section briefly explains about how to include [ASP.NET MVC Badge](https://w

## Add stylesheet

Here, the theme is referred using CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` file as follows,
Here, the 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 Badge control

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

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ This section briefly explains about how to include [ASP.NET Core Badge](https://

## Add stylesheet

Here, the theme is referred using CDN inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file as follows,
Here, the 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 Badge Control

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

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

# Customization in ##Platform_Name## Badge Control

## Colour customization
## Color customization

Even though badges come with `8 predefined colors`, you can also customize the colour of the badge as desired.
Even though Badges come with `8 predefined colors`, you can also customize the color of the Badge as desired.

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

Expand All @@ -37,9 +37,9 @@ Even though badges come with `8 predefined colors`, you can also customize the c

![Badge Color Customization](../images/colorcustom.PNG)

## Customize badge size
## Customize Badge size

Badges are designed to change its size based on the content. To change the size of a badge, adjust the `font size` of the badge.
Badges are designed to change its size based on the content. To change the size of a Badge, adjust the `font size` of the Badge.

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

Expand All @@ -66,7 +66,7 @@ Badges are designed to change its size based on the content. To change the size

## Custom position

Even though the badges support the conventional `top` and `bottom` positions, the position of the badges can be changed as desired. This can be done by adding a custom class to the badge element to override the default position applied from the source.
Even though the Badges support the conventional `top` and `bottom` positions, the position of the Badges can be changed as desired. This can be done by adding a custom class to the Badge element to override the default position applied from the source.

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

Expand Down
6 changes: 3 additions & 3 deletions ej2-asp-core-mvc/badge/how-to/dynamic-badge-content.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Dynamic Badge Content in ##Platform_Name## Badge Component
description: Learn here all about Dynamic Badge Content in Syncfusion ##Platform_Name## Badge component of Syncfusion Essential JS 2 and more.
title: Dynamic Badge Content in ##Platform_Name## Badge control | Syncfusion
description: Learn here all about Dynamic Badge Content in Syncfusion ##Platform_Name## Badge control of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: Dynamic Badge Content
publishingplatform: ##Platform_Name##
Expand All @@ -10,7 +10,7 @@ documentation: ug

# Dynamic Badge Content

Badges in real-time needs to be updated dynamically based on the requirements. The following sample demonstrates how to update the badges content dynamically. Click the increment button to change the badge value.
Badges in real-time needs to be updated dynamically based on the requirements. The following sample demonstrates how to update the Badges content dynamically. Click the increment button to change the Badge value.

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

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Integrate Badge Into Listview in ##Platform_Name## Badge Component
description: Learn here all about how to integrate badge into Listview in Syncfusion ##Platform_Name## Badge component of Syncfusion Essential JS 2 and more.
title: Integrate Badge Into Listview in ##Platform_Name## Badge control | Syncfusion
description: Learn here all about how to integrate Badge into Listview in Syncfusion ##Platform_Name## Badge control of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: Integrate Badge Into Listview
publishingplatform: ##Platform_Name##
Expand All @@ -10,9 +10,9 @@ documentation: ug

# Integrate Badge into ListView

The badges can be integrated with the `listview` component to indicate new notification with colour based on priority.
The Badges can be integrated with the `listview` control to indicate new notification with color based on priority.

In the following sample, `default` badges are used and there is no need to customize the badge size. The component will automatically adjust the size based on the container element.
In the following sample, `default` Badges are used and there is no need to customize the Badge size. The control will automatically adjust the size based on the container element.

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

Expand Down
6 changes: 3 additions & 3 deletions ej2-asp-core-mvc/badge/overview.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Overview in ##Platform_Name## Badge Component
description: Learn here all about Overview in Syncfusion ##Platform_Name## Badge component of Syncfusion Essential JS 2 and more.
title: Overview in ##Platform_Name## Badge control | Syncfusion
description: Learn here all about Overview in Syncfusion ##Platform_Name## Badge control of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: Index
publishingplatform: ##Platform_Name##
Expand All @@ -16,6 +16,6 @@ Badges can be used to alert users about new or unread messages, notifications, a

* **[Types](/badge/types/)** - Provided 8 different types of Badges.

* **[Predefined Colours](/badge/types/#badge-styles)** - Provided 8 predefined situational colours of Badges.
* **[Predefined Colors](/badge/types/#badge-styles)** - Provided 8 predefined situational colors of Badges.

* **[Position](/badge/types/#position)** - Supports 3 different positions, such as `default`, `top` and `bottom`.
20 changes: 10 additions & 10 deletions ej2-asp-core-mvc/badge/types.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ documentation: ug

# Types in ##Platform_Name## Badge Control

This section explains different styles and types of the badges.
This section explains different styles and types of the Badges.

## Badge styles

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

| Class Name | Description |
|------------|-------------|
Expand Down Expand Up @@ -52,7 +52,7 @@ The Essential<sup style="font-size:70%">&reg;</sup> JS 2 Badge has the following

## Badge types

The types of Essential<sup style="font-size:70%">&reg;</sup> JS 2 badges are as follows:
The types of Essential<sup style="font-size:70%">&reg;</sup> JS 2 Badges are as follows:

* Circle
* Pill
Expand All @@ -64,7 +64,7 @@ The types of Essential<sup style="font-size:70%">&reg;</sup> JS 2 badges are as

### Circle

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

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

Expand All @@ -91,7 +91,7 @@ The circle badge style can be applied by adding the modifier class `.e-badge-cir

### Pill

The pill badge style can be applied by adding the modifier class `.e-badge-pill` to the target element.
The pill Badge style can be applied by adding the modifier class `.e-badge-pill` to the target element.

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

Expand All @@ -118,7 +118,7 @@ The pill badge style can be applied by adding the modifier class `.e-badge-pill`

### Link

When badge modifier classes are applied to the anchor tag, the badge’s appearance will change from normal state to hover state on mouseover.
When Badge modifier classes are applied to the anchor tag, the Badge’s appearance will change from normal state to hover state on mouseover.

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

Expand All @@ -145,7 +145,7 @@ When badge modifier classes are applied to the anchor tag, the badge’s appeara

### Notification

The notification badge style can be applied by adding the modifier class `.e-badge-notification` to the target element. Notification badges are used when a content or a context needs special attention. While using the notification badge, set the parent element to `position: relative`.
The notification Badge style can be applied by adding the modifier class `.e-badge-notification` to the target element. Notification Badges are used when a content or a context needs special attention. While using the notification Badge, set the parent element to `position: relative`.

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

Expand All @@ -172,7 +172,7 @@ The notification badge style can be applied by adding the modifier class `.e-bad

### Dot

Dot can be applied by adding the modifier class `.e-badge-dot` to the target element. Dot badges are similar to notification badges, but in a minimalistic way. While using the dot badge, set the parent element to `position: relative`.
Dot can be applied by adding the modifier class `.e-badge-dot` to the target element. Dot Badges are similar to notification Badges, but in a minimalistic way. While using the dot Badge, set the parent element to `position: relative`.

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

Expand All @@ -199,7 +199,7 @@ Dot can be applied by adding the modifier class `.e-badge-dot` to the target ele

### Overlap

The overlap badge can be used with `notification` or `dot` badge, which overlaps with the target element by adding the modifier class`.e-badge-overlap`. While using the overlap badge, set the parent element to `position: relative`.
The overlap Badge can be used with `notification` or `dot` Badge, which overlaps with the target element by adding the modifier class`.e-badge-overlap`. While using the overlap Badge, set the parent element to `position: relative`.

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

Expand All @@ -226,7 +226,7 @@ The overlap badge can be used with `notification` or `dot` badge, which overlaps

### Position

The default position of the `notification` or `dot` badge is top. But, the position can be changed to `bottom` using the modifier class `.e-badge-bottom`. For example, the bottom class modifier is used with dot badge to display the status in the avatar as shown in the following sample.
The default position of the `notification` or `dot` Badge is top. But, the position can be changed to `bottom` using the modifier class `.e-badge-bottom`. For example, the bottom class modifier is used with dot Badge to display the status in the avatar as shown in the following sample.

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

Expand Down
Loading