From 105575fe8e65a28955a5fa35cf0071a765a609bb Mon Sep 17 00:00:00 2001 From: P1l3T0 Date: Mon, 24 Feb 2025 10:43:10 +0200 Subject: [PATCH] feat(badge): add badge documentation --- _config.yml | 2 + controls/badge/appearance.md | 199 ++++++++++++++++++ .../badge/client-side-programming/enums.md | 79 +++++++ .../badge/client-side-programming/overview.md | 117 ++++++++++ .../client-side-programming/properties.md | 56 +++++ controls/badge/getting-started.md | 66 ++++++ controls/badge/images/badge-cutout-border.png | Bin 0 -> 516 bytes controls/badge/images/badge-dashboard.png | Bin 0 -> 9677 bytes controls/badge/images/badge-fiilmode.png | Bin 0 -> 1805 bytes controls/badge/images/badge-icons.png | Bin 0 -> 1671 bytes controls/badge/images/badge-notification.png | Bin 0 -> 3503 bytes controls/badge/images/badge-overview.png | Bin 0 -> 4243 bytes controls/badge/images/badge-position.png | Bin 0 -> 2483 bytes controls/badge/images/badge-rounded.png | Bin 0 -> 3113 bytes controls/badge/images/badge-size.png | Bin 0 -> 2522 bytes controls/badge/images/badge-theme-colors.png | Bin 0 -> 7089 bytes controls/badge/overview.md | 46 ++++ .../badge/server-side-programming/enums.md | 96 +++++++++ .../badge/server-side-programming/overview.md | 81 +++++++ .../server-side-programming/properties.md | 37 ++++ docs-builder.yml | 3 + introduction.md | 2 + 22 files changed, 784 insertions(+) create mode 100644 controls/badge/appearance.md create mode 100644 controls/badge/client-side-programming/enums.md create mode 100644 controls/badge/client-side-programming/overview.md create mode 100644 controls/badge/client-side-programming/properties.md create mode 100644 controls/badge/getting-started.md create mode 100644 controls/badge/images/badge-cutout-border.png create mode 100644 controls/badge/images/badge-dashboard.png create mode 100644 controls/badge/images/badge-fiilmode.png create mode 100644 controls/badge/images/badge-icons.png create mode 100644 controls/badge/images/badge-notification.png create mode 100644 controls/badge/images/badge-overview.png create mode 100644 controls/badge/images/badge-position.png create mode 100644 controls/badge/images/badge-rounded.png create mode 100644 controls/badge/images/badge-size.png create mode 100644 controls/badge/images/badge-theme-colors.png create mode 100644 controls/badge/overview.md create mode 100644 controls/badge/server-side-programming/enums.md create mode 100644 controls/badge/server-side-programming/overview.md create mode 100644 controls/badge/server-side-programming/properties.md diff --git a/_config.yml b/_config.yml index 87df48df58..15eb9d827b 100644 --- a/_config.yml +++ b/_config.yml @@ -1992,6 +1992,8 @@ intro_columns: - title: "Layout" items: + "Avatar": "avatar/overview" + "Badge": "badge/overview" "Card": "card/overview" "Dock": "dock/overview" "Notification": "notification/overview" diff --git a/controls/badge/appearance.md b/controls/badge/appearance.md new file mode 100644 index 0000000000..4918c9c5a2 --- /dev/null +++ b/controls/badge/appearance.md @@ -0,0 +1,199 @@ +--- +title: Appearance +page_title: Badge Appearance +description: "Learn how to apply different styling options to the Badge control." +slug: badge/appearance +tags: badge,appearance +published: True +position: 2 +--- + +# Appearance + +The Badge provides predefined appearance options such as different sizes, border radiuses, fill modes and theme colors. + +For a live example, visit the [Appearance Demo of the Badge](https://demos.telerik.com/aspnet-ajax/badge/appearance/defaultcs.aspx). + +## Options + +The Telerik WebForms Badge supports the following styling options: + +- [`Size`](#size) - Configures the overall size of the component. +- [`ThemeColor`](#themecolor) - Configures what color will be applied to the component. +- [`FillMode`](#fillmode) - Configures how the color is applied to the component. +- [`Rounded`](#rounded) - Configures the border radius of the component. +- [`Position`](#position) - Configures the position of the component. +- [`Align`](#align) - Configures the alignment of the component. +- [`CutoutBorder`](#cutout-border) - Configures the cutout border of the component. +- [`Icon`](#icon) - Displays an icon. + +## Size + +The size option controls how big or small the rendered badge looks. + +!["Badge Size"](images/badge-size.png "Badge Size") + +The following values are available for the `size` option: + +- `Small` +- `Medium` (default) +- `Large` + +Example + +````ASP.NET + + + +```` + +## FillMode + +The `FillMode` option controls the way the color is applied to the rendered div. + +!["Badge FillMode"](images/badge-fiilmode.png "Badge FillMode") + +The following values are available for the `FillMode` option: + +- `Solid` (default) +- `Outline` + +Example + +````ASP.NET + + +```` + +## ThemeColor + +The `ThemeColor` option controls the color that will be applied to the rendered Badge. + +!["Badge ThemeColor"](images/badge-theme-colors.png "Badge ThemeColor") + +The following values are available for the `ThemeColor` option: + +- `Primary` +- `Secondary` (default) +- `Tertiary` +- `Info` +- `Success` +- `Warning` +- `Error` + +Example + +````ASP.NET + + + + + + + +```` + +## Rounded + +The `Rounded` option controls how much border radius is applied to the rendered Badge. + +!["Badge Rounded"](images/badge-rounded.png "Badge Rounded") + +The following values are available for the `Rounded` option: + +- `Small` +- `Medium` (default) +- `Large` +- `Full` + +Example + +````ASP.NET + + + + +```` + +# Position + +The `Position` option specifies position of the Badge relative to the edge of the container + +!["Badge Position"](images/badge-position.png "Badge Positon") + +The following values are available for the `Position` option: + +- `Inline` +- `Edge` (default) +- `Inside` +- `Outside` + +# Align + +The `Align` option specifies position of the Badge relative to its container + +Note: when using `Align`, make sure the Badge container has [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) other than `static` and allows [overflow content](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow). + +The following values are available for the `Align` option: + +- `TopStart` +- `TopEnd` (default) +- `BottomStart` +- `BottomEnd` + +````ASP.NET + + + + + + + +```` + +## Cutout Border + +The `CutoutBorder` option specifies whether or not to render additional "cutout" border around the badge. + +!["Cutout Border"](images/badge-cutout-border.png "Cutout Border") + +````ASP.NET + + +```` + +The display of the `CutoutBorder` option is controlled by specifying either `true` or `false`. + +## Icon + +To enable icons for the badge, set the `Icon` property to the **name** of the embedded icon. + +Visit the [Progress Design System - List of Icons](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/font-icons#list-of-font-icons) page and find the icon of your choice. + +!["Icon name"](images/badge-icons.png "Icon name") + +Example + +````ASP.NET + + + + +```` + +## Next Steps + +- [Client-side Programming]({%slug badge/client-side-programming/overview%}) +- [Server-side Programming]({%slug badge/server-side-programming/overview%}) diff --git a/controls/badge/client-side-programming/enums.md b/controls/badge/client-side-programming/enums.md new file mode 100644 index 0000000000..8063354384 --- /dev/null +++ b/controls/badge/client-side-programming/enums.md @@ -0,0 +1,79 @@ +--- +title: Enums +page_title: Badge Client-side Enums +description: Client-side Enums of the Telerik WebForms Badge component +slug: badge/client-side-programming/enums +tags: badge,javascript,enums +published: True +position: 3 +--- + +# Enums + +Telerik WebForms Badge specific Client-side Enums. + +## Align + +The enum type: `Telerik.Web.UI.RadBadgeAlign` + +| Enum member | Value | +| --- | --- | +| `Telerik.Web.UI.RadBadgeAlign.TopStart` | `0` | +| `Telerik.Web.UI.RadBadgeAlign.TopEnd` | `1` | +| `Telerik.Web.UI.RadBadgeAlign.BottomStart` | `2` | +| `Telerik.Web.UI.RadBadgeAlign.BottomEnd` | `3` | + +## FillMode + +The enum type: `Telerik.Web.UI.RadBadgeFillMode` + +| Enum member | Value | +| --- | --- | +| `Telerik.Web.UI.RadBadgeFillMode.Solid` | `0` | +| `Telerik.Web.UI.RadBadgeFillMode.Outline` | `1` | + +## Position + +The enum type: `Telerik.Web.UI.RadBadgePosition` + +| Enum member | Value | +| --- | --- | +| `Telerik.Web.UI.RadBadgePosition.Inline` | `0` | +| `Telerik.Web.UI.RadBadgePosition.Edge` | `1` | +| `Telerik.Web.UI.RadBadgePosition.Inside` | `2` | +| `Telerik.Web.UI.RadBadgePosition.Outside` | `3` | + +## Rounded + +The enum type: `Telerik.Web.UI.RadBadgeRounded` + +| Enum member | Value | +| --- | --- | +| `Telerik.Web.UI.RadBadgeRounded.Small` | `0` | +| `Telerik.Web.UI.RadBadgeRounded.Medium` | `1` | +| `Telerik.Web.UI.RadBadgeRounded.Large` | `2` | +| `Telerik.Web.UI.RadBadgeRounded.Full` | `3` | + +## Size + +The enum type: `Telerik.Web.UI.RadBadgeSize` + +| Enum member | Value | +| --- | --- | +| `Telerik.Web.UI.RadBadgeSize.Small` | `0` | +| `Telerik.Web.UI.RadBadgeSize.Medium` | `1` | +| `Telerik.Web.UI.RadBadgeSize.Large` | `2` | + +## ThemeColor + +The enum type: `Telerik.Web.UI.RadBadgeThemeColor` + +| Enum member | Value | +| --- | --- | +| `Telerik.Web.UI.RadBadgeThemeColor.Primary` | `0` | +| `Telerik.Web.UI.RadBadgeThemeColor.Secondary` | `1` | +| `Telerik.Web.UI.RadBadgeThemeColor.Tertiary` | `2` | +| `Telerik.Web.UI.RadBadgeThemeColor.Info` | `3` | +| `Telerik.Web.UI.RadBadgeThemeColor.Success` | `4` | +| `Telerik.Web.UI.RadBadgeThemeColor.Warning` | `5` | +| `Telerik.Web.UI.RadBadgeThemeColor.Error` | `6` | diff --git a/controls/badge/client-side-programming/overview.md b/controls/badge/client-side-programming/overview.md new file mode 100644 index 0000000000..6cafc2ae98 --- /dev/null +++ b/controls/badge/client-side-programming/overview.md @@ -0,0 +1,117 @@ +--- +title: Overview +page_title: Badge Client-side Programming +description: "Overview of the Client-side APIs you can use to create and configure the Telerik WebForms Badge Control." +slug: badge/client-side-programming/overview +tags: overview +published: True +position: 0 +--- + +# Client-side Programming Overview + +Overview of the Client-side APIs you can use to configure the Telerik WebForms Badge Control. + +>important The Client-side APIs only allow making changes to a rendered `Badge` element. As an ASP.NET WebForms Component, it can only be created on the server, see [Server-side Programming Overview]({%slug badge/server-side-programming/overview%}) + +## Get Client-side reference + +Example of getting Client-side reference to the `Telerik.Web.UI.RadBadge` object at Page Load. + +````ASP.NET + +```` + +````JavaScript +function pageLoadHandler(sender, args) { + var badge = $find('<%= RadBadge1.ClientID %>'); // Telerik.Web.UI.RadBadge + var kendoBadge = badge.get_kendoWidget(); // kendo.ui.Badge +} + +Sys.Application.add_load(pageLoadHandler); +```` + +For more details about referencing Telerik Controls on the Client-side, you can check out the [Getting Client-Side References]({%slug general-information/get-client-side-reference%}) article. + +## Telerik WebForms Badge API + +The WebForms Badge exposes a few Client-side properties and enums that can be used to change the appearance on the client. + +For a list of available Properties and Enums, you can refer to the following articles: +- [Properties]({%slug badge/client-side-programming/properties%}) +- [Enums]({%slug badge/client-side-programming/enums%}) + +Example of changing the appearance on Page Load + +````ASP.NET + +```` + +````JavaScript +function pageLoadHandler(sender, args) { + var badge = $find('<%= RadBadge1.ClientID %>'); + + var align = Telerik.Web.UI.RadBadgeAlign.BottomStart; + var fillMode = Telerik.Web.UI.RadBadgeFillMode.Outline; + var position = Telerik.Web.UI.RadBadgePosition.Edge; + var rounded = Telerik.Web.UI.RadBadgeRounded.Full; + var size = Telerik.Web.UI.RadBadgeSize.Large; + var themeColor = Telerik.Web.UI.RadBadgeThemeColor.Error; + + badge.set_align(align); + badge.set_fillMode(fillMode); + badge.set_position(position); + badge.set_rounded(rounded); + badge.set_size(size); + badge.set_themeColor(themeColor); + badge.set_text('Badge Label'); +} + +Sys.Application.add_load(pageLoadHandler); +```` + +## Tips & Tricks + +You can create a JavaScript object containing all the Enums in one place for easier access. + +Example + +````ASP.NET + +```` + +````JavaScript +var BadgeEnums = (function () { + try { + return { + Align: Telerik.Web.UI.RadBadgeAlign, + FillMode: Telerik.Web.UI.RadBadgeFillMode, + Position: Telerik.Web.UI.RadBadgePosition, + Rounded: Telerik.Web.UI.RadBadgeRounded, + Size: Telerik.Web.UI.RadBadgeSize, + ThemeColor: Telerik.Web.UI.RadBadgeThemeColor + }; + } catch (e) { + // Oops, Telerik.Web.UI is not defined + } +})(); + +function pageLoadHandler(sender, args) { + var badge = $find('<%= RadBadge1.ClientID %>'); + + badge.set_align(BadgeEnums.Align.BottomStart); + badge.set_fillMode(BadgeEnums.FillMode.Outline); + badge.set_position(BadgeEnums.Position.Edge); + badge.set_rounded(BadgeEnums.Rounded.Full); + badge.set_size(BadgeEnums.Size.Large); + badge.set_themeColor(BadgeEnums.ThemeColor.Warning); + badge.set_text('Badge Label'); +} + +Sys.Application.add_load(pageLoadHandler); +```` + +## Next Steps + +- [Properties]({%slug badge/client-side-programming/properties%}) +- [Enums]({%slug badge/client-side-programming/enums%}) diff --git a/controls/badge/client-side-programming/properties.md b/controls/badge/client-side-programming/properties.md new file mode 100644 index 0000000000..858ccbdaea --- /dev/null +++ b/controls/badge/client-side-programming/properties.md @@ -0,0 +1,56 @@ +--- +title: Properties +page_title: Badge JavaScript Properties +description: "JavaScript properties of the Telerik WebForms Badge component." +slug: badge/client-side-programming/properties +tags: properties +published: True +position: 1 +--- + +# Properties + +Badge specific properties to change its border radius, size, theme color, and more. + +## Getters + +| Name | Return Type | Description | +| -------------------- | ---------------------------------------------------------------------------------------------- | -------------------------------------------- | +| `get_kendoWidget()` | `object` | Get the Kendo widget instance. | +| `get_icon()` | `string` | Get the icon name used to display the badge. | +| `get_text()` | `string` | Get the text of the badge. | +| `get_cutoutBorder()` | `bool` | Get the cutout border state. | +| `get_max()` | `number` | Get the maximum value of the badge. | +| `get_visible()` | `bool` | Get the visibility state of the badge. | +| `get_align()` | [`Telerik.Web.UI.RadBadgeAlign`]({%slug badge/client-side-programming/enums#align%}) | Get the alignment of the badge. | +| `get_fillMode()` | [`Telerik.Web.UI.RadBadgeFillMode`]({%slug badge/client-side-programming/enums#fillmode%}) | Get the fill mode. | +| `get_position()` | [`Telerik.Web.UI.RadBadgePosition`]({%slug badge/client-side-programming/enums#position%}) | Get the badge position. | +| `get_rounded()` | [`Telerik.Web.UI.RadBadgeRounded`]({%slug badge/client-side-programming/enums#rounded%}) | Get the border radius level. | +| `get_size()` | [`Telerik.Web.UI.RadBadgeSize`]({%slug badge/client-side-programming/enums#size%}) | Get the size. | +| `get_themeColor()` | [`Telerik.Web.UI.RadBadgeThemeColor`]({%slug badge/client-side-programming/enums#themecolor%}) | Get the theme color. | + +## Setters + +| Name | Parameter | Description | +| -------------------------- | ---------------------------------------------------------------------------------------------- | -------------------------------------------- | +| `set_icon(option)` | `string` | Set the icon name used to display the badge. | +| `set_text(option)` | `string` | Set the text of the badge. | +| `set_cutoutBorder(option)` | `bool` | Set the cutout border state. | +| `set_max(option)` | `number` | Set the maximum value of the badge. | +| `set_align(option)` | [`Telerik.Web.UI.RadBadgeAlign`]({%slug badge/client-side-programming/enums#align%}) | Set the alignment of the badge. | +| `set_fillMode(option)` | [`Telerik.Web.UI.RadBadgeFillMode`]({%slug badge/client-side-programming/enums#fillmode%}) | Set the fill mode. | +| `set_position(option)` | [`Telerik.Web.UI.RadBadgePosition`]({%slug badge/client-side-programming/enums#position%}) | Set the badge position. | +| `set_rounded(option)` | [`Telerik.Web.UI.RadBadgeRounded`]({%slug badge/client-side-programming/enums#rounded%}) | Set the border radius level. | +| `set_size(option)` | [`Telerik.Web.UI.RadBadgeSize`]({%slug badge/client-side-programming/enums#size%}) | Set the size. | +| `set_themeColor(option)` | [`Telerik.Web.UI.RadBadgeThemeColor`]({%slug badge/client-side-programming/enums#themecolor%}) | Set the theme color. | + +## Methods + +| Name | Description | +| -------- | --------------- | +| `hide()` | Hide the badge. | +| `show()` | Show the badge. | + +## Next Steps + +- [Enums]({%slug badge/client-side-programming/enums%}) diff --git a/controls/badge/getting-started.md b/controls/badge/getting-started.md new file mode 100644 index 0000000000..c4ea938bdc --- /dev/null +++ b/controls/badge/getting-started.md @@ -0,0 +1,66 @@ +--- +title: Getting Started +page_title: Getting Started with the Badge +description: "Get started with the WebForms Badge by Telerik UI for ASP.NET AJAX and learn how to create, initialize, and enable the component." +slug: badge/getting-started +tags: badge,getting started +published: True +position: 1 +--- + +# Getting Started with the Badge + +This guide demonstrates how to get up and running with the Telerik WebForms Badge. + +After the completion of this guide, you will be able to achieve the following end result: + +!["Getting Started with the Badge"](images/badge-overview.png "Getting Started with the Badge") + +## Create the Badge + +To create the Badge in the markup, add a `telerik:RadBadge` element to the page and configure its options, like `Icon`, and `Text`. + +````ASP.NET + +```` + +To create the Badge on the server, create a new instance of the `RadBadge` object, and add it to the Controls collection of another control (e.g. `PlaceHolder1`) + +````C# +protected void Page_PreInit(object sender, EventArgs e) +{ + RadBadge badge = new RadBadge() + { + Text = "Badge", + ThemeColor = BadgeThemeColor.Primary + }; + + PlaceHolder1.Controls.Add(badge); +} + +```` +````VB +Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) Handles Me.PreInit + Dim badge As RadBadge = New RadBadge() With { + .Text = "Badge", + .ThemeColor = BadgeThemeColor.Primary + } + + PlaceHolder1.Controls.Add(badge) +End Sub +```` + +The `PlaceHolder1` + +````ASP.NET + +```` + +>important Creating controls programmatically must be done in an early event such as **PreInit** (preferably), and **Init**. For more details you can check out the [ASP.NET Page Life-Cycle Events](https://learn.microsoft.com/en-us/previous-versions/aspnet/ms178472(v=vs.100)#life-cycle-events) + +## Next Steps + +- [Change the Appearance]({%slug badge/appearance%}) +- [Customize the Badge]({%slug badge/customization%}) +- [Client-side Programming]({%slug badge/client-side-programming/overview%}) +- [Server-side Programming]({%slug badge/server-side-programming/overview%}) diff --git a/controls/badge/images/badge-cutout-border.png b/controls/badge/images/badge-cutout-border.png new file mode 100644 index 0000000000000000000000000000000000000000..076796e16d606a596bd506c131a0358acd462f4f GIT binary patch literal 516 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 literal 0 HcmV?d00001 diff --git a/controls/badge/images/badge-fiilmode.png b/controls/badge/images/badge-fiilmode.png new file mode 100644 index 0000000000000000000000000000000000000000..9edb45336c31bbff83bf4aeff34dcaef264095a4 GIT binary patch literal 1805 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 bG6G2eHa+nEdxk91|8+=hW36(HdyoGIHgvS{ literal 0 HcmV?d00001 diff --git a/controls/badge/images/badge-overview.png b/controls/badge/images/badge-overview.png new file mode 100644 index 0000000000000000000000000000000000000000..b915cbc1660ab70acd77644fa2ac720f948cbdb8 GIT binary patch literal 4243 zcmV;E5Nz*>P)_ubFueZQaYTZaP5NAZB-0ptNn@q^+4#RJ#_3KjSTJE|Qks)_l^K^T7|h@;X#8^7p|HyG|N&^tNV+q0&b1 zNh{ZTm@{Q@CUq?RWpTZSgHKwe#!6Z<^$kOB?KdZ-m=lv@=r1W{=&k)T^$ikRqcr9t z!}%s=zs8|1iXj?=Iax&S*Er5MF|zZj89MusUL7MGAk6qkudW$7D{FSpaz5C-pEJf3 z4FqG1>R|W&pyj-*U%XkhBzQ4WZ$dl6Q7@wwOo8MDj8ZIcp(#FDIi1|vtQ$g zj1PKSbIdXU6XPSjIx;>4pR__I#8yBMm>^gM`4ABwX6hSanF*MpeXpi37$2gN;qb+o z7>x;Heip%eNlb14z)52cu^7i-^Q19{FdJq^u^AHtCP1PZ)m-mk!g81$Nmt_7Y!1D( zpRk;0MkPb6>4eCzfX`%|qKPTRlun4o!w-JgMVK9XI)MxeLe$D4ERQ*z5RI8hDTL)j zGb$OPfiDKn6H|(YzgRm@m@Pmp8U$nLJYjik#sOKY2+N74LWW=3LoAmeP!*)0O6id<+l3Y0~i@{o{hVa5?pwYXXemt6gSU-T%Gtmtls<6fAC|b@# zLQ25 zXy3U@0yOJ=Gyrt3E2r2|(jD*tKtFUr1YhvXeCIJj0to`T#qR=O{J-ua zLKiqb7pO0GT$|wfe|8@!rq!36)uX|17pW#8?3srQ#GQ<@CM2LQ+U)??4ZYcUhC)5# z3rCEHx*6b`vTMHR$kq(svBJ!X*9_l2af0BO{$Z}r1r6`Mp4U-w-!o=`QIP$Gj%WSps4uw(lM{BpKqm}*;d(* z$r&%@@I1rE;+(usTRJyV{`Cx#M}&HIi_|2!M+A{FR_IYe_gWDpDJ z#!(LD8Z6g&8~u<8k|Ef0H_RM-v-VLC_}EGT#K+8B2-)xw2sHAST%9i9oABfm)9QLC z)`^d6h}Z7o5JB8C4;ci_kge&jGPs?vBiq;717Qlu5a_;%qrv1b08aCeDzD?iHU@yX z=8(v4aQXx?l$%)qm|Ohg`XFaU#!v(p>my7809YrUh75vcFl1V5Q}SPg@ZEmsbsEAH zlHspsu$UGJ16^8fTnwpKPn0_fgDMJEaM5+rg3 z5rdfBd}I&{=vtE>F85yl?KAy}$!16f@7!6uY}a`K2#(o_*iA_79lFv9Xk%;7WAGzoz|uLb3smYEzrb?HBN#-STz-Ec@mh9Wl& zz(8GiOp$;dyFCSfWmf1L9=~=FfDlQ-Nl|zZfm(#+L~{kmpsx0fqq(5f9cKAHE;#bY zTY1$dl%CKYMHDiqtGy#Ea9L3X)#MxJgvfvh)BoebznmqeL|~3@N;Lz2aTWGd*d7;`aVVv$SrrxraE~Gy8PtQv|3Jn45oJ(&bbs4S z@sR-$=FJooa6&ASIUp>L#9UM|B)&iU820woCYuvsmLFtiy}CMEUV{)B&bVizlEIu) z=kOBR=GXh<-2oa)S1#zX`S>k7oF=iH5zB^RI;Wi-!3sngABZW*<4=wZm!H^SUw2Jj zN1?$BfcFkBA;M`=6)eB{beDx?9szw!Z@{tTsNQX7aD?WZR-1;`+&E2QhxJG{so6Xt zO+sv8&2&giWZ*a5rjLGsU|sN_ zq`^Ln{%4T={zFw>hsNv&fbG6%QWZQX*F!ns8?cnOjh9@eAz>Kj^~)wzLGP^*4E>

Uv!;(P+=Fl0u>9(!5o!??(npKtW#6uM0eFm5g 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 DdmQx- literal 0 HcmV?d00001 diff --git a/controls/badge/images/badge-size.png b/controls/badge/images/badge-size.png new file mode 100644 index 0000000000000000000000000000000000000000..e2f8a966543269f83f08bedcd159761433919107 GIT binary patch literal 2522 zcmV<02_^Q4P)1< zr8Hqnu%)7+RvY3*YZ!?-?>jU3n2d?5w$a!fDK(SK{OAAi`+tr47vwLlfygxQS7ekq zVXgtl;l)7^p$0g-B2+FX&Edr{5TOP*ydqRCC(Yr-F%Y2!IJ_cME+@_5#W4_}1~|MT zR4ymY;k98HkS@D#K9*m-lLc|jf3M!jZ$6f#%kB&fa(K;9PV64N|Jr>0;ivF+&A{@I z{Z@Yc;ph9W%`i=Ic!g;ucK4;rF2dHjgVr9pr&g^va=3_ZV zaf?RzTa+aO-SOqXD|U&4Ho*MX;prw0^;VdZym}`u1F!hRgV~-P+r$xOkJ+!|ihL zQui)^F~)1nVez!KqnO2S&tcTUfRMG}#SH1P7hf~NOzA@R&S84J-Kphhep*wAAP~Zi zK1Crws9a-$_l*m@Qnw?Y9?X6!P|}s$^l{=0LX%^ly0@=}5ROWxwS*`q5AUVc2*T0x zz)O^cZ+!#0(Q9hx*O9}&{T{@vx}yy7<4Nf_04rOU_~{rNWCETB5k%9lMICtgSqfXS z^!+(xl!bJo*n@CrW*3oSX_jUzWVj{6h2YgFJ~ED8$?LI&7Y1n0YC{OM?iLG$`_j;A z_aI!*<6{ReQOUpj$d-{T_2psw-%;x_fEci(H9duP>o;ha^Y3 z`EW`-Qo~_EkP6Vyo#v`yQoU{_uoBRmF{J^IL$ozxurRyMj$Yf}`&HAXWFU*k6ibzZ z`Ut{F`TR~0E7{v2DSv_9+ow}4ZLdclNopV`47X&sP;!(7kuZeUTEo)03$lk2sdFAd z;YV{Tt?pc)v7rqLs8Cb)R0~482FlhacCC=PN7;64W{FxOf|qzFX%IrIaO4Et;{m|+ zzRxg6y{cxUKC6PLZvES>jv;92D5W0t+Hg`;8c9*z${S@Q7KYd9fOv@Ai=-b=rRTN? znQoQ9%b8|$db#{vB3;AGjH=aMHm3^dMgdh$gMB}+i2WFY1sYYDogBXyZ3x>6GQrLT z01&pXYr?rnIIq_AY_3^+L=#Zp7!ReR8zEhjI<}9&mL`bxfYgNJ%oU zXMgJ(n4iR{2_OX3HV$CwL1UtvAs3|Km2FJx2js*%G{@mq5amzRi4(mT4g>7=iA8ZpKU%y0?SJMcm-*nA}=|?x52FR0ouRNNw`=Q|HT`rUyn?-%_ z$y2>7q_Ixz>=vM3&tQ~1sFX1w=$ZMG`X{fHVS>TbkluIBy2OK*oH#?S04n$Ul~MJ| zuJ$N+Vdj4sc6I3O+SSnIrS3|9hCCt`>xsIVlxxAS5}OK*HshAj;cUKsk*h zIbsctE#>@v8+8^pyJrIfLOU3c+SUyKhp4D@VU+les-Lz}5pdFkT6ZTcCy%t^uL*?1 zyrkz&WM>XKvlT>k$N*>_cqRV}pw@LeTyl;ID)%<2bS?i2Libn|Yn&!alK$?sg?f~# zwwsX?Ib9(J7+b|}4u?(!lWRd#9p_Xb(~znbYF8oZ5B~OKM{;c=lTVcI#7k9FiFyd| znT=*9)P>w*RmW$9Ol4mg0-RD%YJ;QF@r{taOI-j16`&8PbL~IJ*l-tKq}aW-+G>MQ zG9IGZ-}kc2th*QG^S(LGV8Q66^;4Ppf$DrNtIUi{mt(V25j%8bG0T(!)!Ohc+$2I^t(%NmuH_D)d!K7+Wk z*!Lb9z4&+SXQ*-ok2dZbxjtAqgHU+=|7!;PmqIImQScTU_{;H000hU kSV?A0O#mtY000O800000007cclK=n!07*qoM6N<$f({i_@% literal 0 HcmV?d00001 diff --git a/controls/badge/images/badge-theme-colors.png b/controls/badge/images/badge-theme-colors.png new file mode 100644 index 0000000000000000000000000000000000000000..ec1e50821ca56992d3fe5f39c200d1cfce9ea481 GIT binary patch literal 7089 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 +```` + +## Creating the Badge dynamically + +To create the Badge on the server, create a new instance of the `RadBadge` object, set its properties and add it to the Controls collection of another control (e.g. `PlaceHolder1`). + +You can find the properties and enums in the following articles: + +- [Properties]({%slug badge/server-side-programming/properties%}) +- [Enums]({%slug badge/server-side-programming/enums%}) + +Example + +````C# +protected void Page_PreInit(object sender, EventArgs e) +{ + RadBadge badge = new RadBadge() + { + Text = "Badge", + Size = BadgeSize.Large, + Rounded = BadgeRounded.Full, + FillMode = BadgeFillMode.Outline, + ThemeColor = BadgeThemeColor.Success, + Position = BadgePosition.Edge, + Align = BadgeAlign.BottomStart + }; + + PlaceHolder1.Controls.Add(badge); +} +```` +````VB +Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) Handles Me.PreInit + Dim badge As RadBadge = New RadBadge() With { + .Text = "Badge", + .Size = BadgeSize.Large, + .Rounded = BadgeRounded.Full, + .FillMode = BadgeFillMode.Outline, + .ThemeColor = BadgeThemeColor.Success, + .Position = BadgePosition.Edge, + .Align = BadgeAlign.BottomStart + } + + PlaceHolder1.Controls.Add(badge) +End Sub +```` + +The `PlaceHolder1` + +````ASP.NET + +```` + +>important Creating controls programmatically must be done in an early event such as **PreInit** (preferably), **Init**. For more details you can check out the [ASP.NET Page Life-Cycle Events](https://learn.microsoft.com/en-us/previous-versions/aspnet/ms178472(v=vs.100)#life-cycle-events) + +## Next Steps + +- [Properties]({%slug badge/server-side-programming/properties%}) +- [Enums]({%slug badge/server-side-programming/enums%}) diff --git a/controls/badge/server-side-programming/properties.md b/controls/badge/server-side-programming/properties.md new file mode 100644 index 0000000000..4cb5e05aac --- /dev/null +++ b/controls/badge/server-side-programming/properties.md @@ -0,0 +1,37 @@ +--- +title: Properties +page_title: Chip Server-side Properties +description: "Server-side properties of the WebForms Chip component." +slug: badge/server-side-programming/properties +tags: badge,server-side,properties +published: True +position: 1 +--- + +# Properties + +Badge specific properties to change its border radius, size, theme color, and more. + +| Name | Return type | Description | +| -------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | +| `Align` | [`Telerik.Web.UI.BadgeAlign`]({%slug badge/client-side-programming/enums#align%}) | Gets/Sets the alignment of the badge within its container (e.g., top-left, bottom-right). | +| `CutoutBorder` | `bool` | Gets/Sets the state of the cutout border on the badge. | +| `FillMode` | [`Telerik.Web.UI.BadgeFillMode`]({%slug badge/client-side-programming/enums#fillmode%}) | Gets/Sets the fill mode of the badge, determining its styling (e.g., solid or outline). | +| `Icon` | `string` | Gets/Sets the name of the icon used to display on the badge. | +| `Max` | `number` | Gets/Sets the maximum value that the badge can hold or display. | +| `Position` | [`Telerik.Web.UI.BadgePosition`]({%slug badge/client-side-programming/enums#position%}) | Gets/Sets the position of the badge in its container (e.g., inline, edge). | +| `Rounded` | [`Telerik.Web.UI.BadgeRounded`]({%slug badge/client-side-programming/enums#rounded%}) | Gets/Sets the border-radius style of the badge (e.g., small, large, full). | +| `Size` | [`Telerik.Web.UI.BadgeSize`]({%slug badge/client-side-programming/enums#size%}) | Gets/Sets the size of the badge (e.g., small, medium, large). | +| `Template` | `string` | Gets/Sets the template for custom badge content. | +| `Text` | `string` | Gets/Sets the text content of the badge. | +| `ThemeColor` | [`Telerik.Web.UI.BadgeThemeColor`]({%slug badge/client-side-programming/enums#themecolor%}) | Gets/Sets the theme color of the badge (e.g., success, error, primary). | +| `Visible` | `bool` | Gets/Sets the visibility state of the badge. | + +## Next Steps + +- [Enums]({%slug chip/server-side-programming/enums%}) + +## See Also + +- [Server-side Programming Overview]({%slug chip/server-side-programming/overview%}) +- [Enums]({%slug chip/server-side-programming/enums%}) diff --git a/docs-builder.yml b/docs-builder.yml index a5e78e0ade..1f3b9d9227 100644 --- a/docs-builder.yml +++ b/docs-builder.yml @@ -1692,6 +1692,9 @@ meta: controls/aiprompt: title: AIPrompt position: 1 + controls/badge: + title: Badge + position: 1 api/server: title: Server-side position: 2 diff --git a/introduction.md b/introduction.md index 24a3ebafb9..b773d8a869 100644 --- a/introduction.md +++ b/introduction.md @@ -263,6 +263,8 @@ The following table lists all available Telerik UI for ASP.NET AJAX components. + +