Skip to content

Commit 970fab0

Browse files
P1l3T0P1l3T0
authored
feat(badge): add badge documentation (#662)
1 parent 4f63c6f commit 970fab0

22 files changed

+784
-0
lines changed

‎_config.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1992,6 +1992,8 @@ intro_columns:
19921992
-
19931993
title: "Layout"
19941994
items:
1995+
"Avatar": "avatar/overview"
1996+
"Badge": "badge/overview"
19951997
"Card": "card/overview"
19961998
"Dock": "dock/overview"
19971999
"Notification": "notification/overview"

‎controls/badge/appearance.md

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
---
2+
title: Appearance
3+
page_title: Badge Appearance
4+
description: "Learn how to apply different styling options to the Badge control."
5+
slug: badge/appearance
6+
tags: badge,appearance
7+
published: True
8+
position: 2
9+
---
10+
11+
# Appearance
12+
13+
The Badge provides predefined appearance options such as different sizes, border radiuses, fill modes and theme colors.
14+
15+
For a live example, visit the [Appearance Demo of the Badge](https://demos.telerik.com/aspnet-ajax/badge/appearance/defaultcs.aspx).
16+
17+
## Options
18+
19+
The Telerik WebForms Badge supports the following styling options:
20+
21+
- [`Size`](#size) - Configures the overall size of the component.
22+
- [`ThemeColor`](#themecolor) - Configures what color will be applied to the component.
23+
- [`FillMode`](#fillmode) - Configures how the color is applied to the component.
24+
- [`Rounded`](#rounded) - Configures the border radius of the component.
25+
- [`Position`](#position) - Configures the position of the component.
26+
- [`Align`](#align) - Configures the alignment of the component.
27+
- [`CutoutBorder`](#cutout-border) - Configures the cutout border of the component.
28+
- [`Icon`](#icon) - Displays an icon.
29+
30+
## Size
31+
32+
The size option controls how big or small the rendered badge looks.
33+
34+
!["Badge Size"](images/badge-size.png "Badge Size")
35+
36+
The following values are available for the `size` option:
37+
38+
- `Small`
39+
- `Medium` (default)
40+
- `Large`
41+
42+
Example
43+
44+
````ASP.NET
45+
<telerik:RadBadge runat="server" Text="Small" Size="Small" />
46+
<telerik:RadBadge runat="server" Text="Medium" Size="Medium" />
47+
<telerik:RadBadge runat="server" Text="Large" Size="Large" />
48+
````
49+
50+
## FillMode
51+
52+
The `FillMode` option controls the way the color is applied to the rendered div.
53+
54+
!["Badge FillMode"](images/badge-fiilmode.png "Badge FillMode")
55+
56+
The following values are available for the `FillMode` option:
57+
58+
- `Solid` (default)
59+
- `Outline`
60+
61+
Example
62+
63+
````ASP.NET
64+
<telerik:RadBadge runat="server" Text="Solid" FillMode="Solid" />
65+
<telerik:RadBadge runat="server" Text="Outline" FillMode="Outline" />
66+
````
67+
68+
## ThemeColor
69+
70+
The `ThemeColor` option controls the color that will be applied to the rendered Badge.
71+
72+
!["Badge ThemeColor"](images/badge-theme-colors.png "Badge ThemeColor")
73+
74+
The following values are available for the `ThemeColor` option:
75+
76+
- `Primary`
77+
- `Secondary` (default)
78+
- `Tertiary`
79+
- `Info`
80+
- `Success`
81+
- `Warning`
82+
- `Error`
83+
84+
Example
85+
86+
````ASP.NET
87+
<telerik:RadBadge runat="server" ID="RadBadge1" Text="Primary" ThemeColor="Primary" />
88+
<telerik:RadBadge runat="server" ID="RadBadge2" Text="Secondary" ThemeColor="Secondary" />
89+
<telerik:RadBadge runat="server" ID="RadBadge3" Text="Tertiary" ThemeColor="Tertiary" />
90+
<telerik:RadBadge runat="server" ID="RadBadge4" Text="Info" ThemeColor="Info" />
91+
<telerik:RadBadge runat="server" ID="RadBadge5" Text="Success" ThemeColor="Success" />
92+
<telerik:RadBadge runat="server" ID="RadBadge6" Text="Warning" ThemeColor="Warning" />
93+
<telerik:RadBadge runat="server" ID="RadBadge7" Text="Error" ThemeColor="Error" />
94+
````
95+
96+
## Rounded
97+
98+
The `Rounded` option controls how much border radius is applied to the rendered Badge.
99+
100+
!["Badge Rounded"](images/badge-rounded.png "Badge Rounded")
101+
102+
The following values are available for the `Rounded` option:
103+
104+
- `Small`
105+
- `Medium` (default)
106+
- `Large`
107+
- `Full`
108+
109+
Example
110+
111+
````ASP.NET
112+
<telerik:RadBadge runat="server" ID="RadBadge1" Text="Small" Rounded="Small" />
113+
<telerik:RadBadge runat="server" ID="RadBadge2" Text="Medium" Rounded="Medium" />
114+
<telerik:RadBadge runat="server" ID="RadBadge3" Text="Large" Rounded="Large" />
115+
<telerik:RadBadge runat="server" ID="RadBadge4" Text="Full" Rounded="Full" />
116+
````
117+
118+
# Position
119+
120+
The `Position` option specifies position of the Badge relative to the edge of the container
121+
122+
!["Badge Position"](images/badge-position.png "Badge Positon")
123+
124+
The following values are available for the `Position` option:
125+
126+
- `Inline`
127+
- `Edge` (default)
128+
- `Inside`
129+
- `Outside`
130+
131+
# Align
132+
133+
The `Align` option specifies position of the Badge relative to its container
134+
135+
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).
136+
137+
The following values are available for the `Align` option:
138+
139+
- `TopStart`
140+
- `TopEnd` (default)
141+
- `BottomStart`
142+
- `BottomEnd`
143+
144+
````ASP.NET
145+
<button>
146+
TopStart
147+
<telerik:RadBadge runat="server" Position="Edge" Align="TopStart" />
148+
</button>
149+
150+
<button>
151+
TopEnd
152+
<telerik:RadBadge runat="server" Position="Edge" Align="TopEnd" />
153+
</button>
154+
155+
<button>
156+
BottomStart
157+
<telerik:RadBadge runat="server" Position="Edge" Align="BottomStart" />
158+
</button>
159+
160+
<button>
161+
BottomEnd
162+
<telerik:RadBadge runat="server" Position="Edge" ID="RadBadge8" Align="BottomEnd" />
163+
</button>
164+
````
165+
166+
## Cutout Border
167+
168+
The `CutoutBorder` option specifies whether or not to render additional "cutout" border around the badge.
169+
170+
!["Cutout Border"](images/badge-cutout-border.png "Cutout Border")
171+
172+
````ASP.NET
173+
<telerik:RadBadge runat="server" CutoutBorder="false" />
174+
<telerik:RadBadge runat="server" CutoutBorder="true" />
175+
````
176+
177+
The display of the `CutoutBorder` option is controlled by specifying either `true` or `false`.
178+
179+
## Icon
180+
181+
To enable icons for the badge, set the `Icon` property to the **name** of the embedded icon.
182+
183+
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.
184+
185+
!["Icon name"](images/badge-icons.png "Icon name")
186+
187+
Example
188+
189+
````ASP.NET
190+
<telerik:RadBadge runat="server" ID="RadBadge1" Icon="x" />
191+
<telerik:RadBadge runat="server" ID="RadBadge2" Icon="undo" />
192+
<telerik:RadBadge runat="server" ID="RadBadge3" Icon="redo" />
193+
<telerik:RadBadge runat="server" ID="RadBadge4" Icon="clock" />
194+
````
195+
196+
## Next Steps
197+
198+
- [Client-side Programming]({%slug badge/client-side-programming/overview%})
199+
- [Server-side Programming]({%slug badge/server-side-programming/overview%})

‎controls/badge/client-side-programming/enums.md

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: Enums
3+
page_title: Badge Client-side Enums
4+
description: Client-side Enums of the Telerik WebForms Badge component
5+
slug: badge/client-side-programming/enums
6+
tags: badge,javascript,enums
7+
published: True
8+
position: 3
9+
---
10+
11+
# Enums
12+
13+
Telerik WebForms Badge specific Client-side Enums.
14+
15+
## Align
16+
17+
The enum type: `Telerik.Web.UI.RadBadgeAlign`
18+
19+
| Enum member | Value |
20+
| --- | --- |
21+
| `Telerik.Web.UI.RadBadgeAlign.TopStart` | `0` |
22+
| `Telerik.Web.UI.RadBadgeAlign.TopEnd` | `1` |
23+
| `Telerik.Web.UI.RadBadgeAlign.BottomStart` | `2` |
24+
| `Telerik.Web.UI.RadBadgeAlign.BottomEnd` | `3` |
25+
26+
## FillMode
27+
28+
The enum type: `Telerik.Web.UI.RadBadgeFillMode`
29+
30+
| Enum member | Value |
31+
| --- | --- |
32+
| `Telerik.Web.UI.RadBadgeFillMode.Solid` | `0` |
33+
| `Telerik.Web.UI.RadBadgeFillMode.Outline` | `1` |
34+
35+
## Position
36+
37+
The enum type: `Telerik.Web.UI.RadBadgePosition`
38+
39+
| Enum member | Value |
40+
| --- | --- |
41+
| `Telerik.Web.UI.RadBadgePosition.Inline` | `0` |
42+
| `Telerik.Web.UI.RadBadgePosition.Edge` | `1` |
43+
| `Telerik.Web.UI.RadBadgePosition.Inside` | `2` |
44+
| `Telerik.Web.UI.RadBadgePosition.Outside` | `3` |
45+
46+
## Rounded
47+
48+
The enum type: `Telerik.Web.UI.RadBadgeRounded`
49+
50+
| Enum member | Value |
51+
| --- | --- |
52+
| `Telerik.Web.UI.RadBadgeRounded.Small` | `0` |
53+
| `Telerik.Web.UI.RadBadgeRounded.Medium` | `1` |
54+
| `Telerik.Web.UI.RadBadgeRounded.Large` | `2` |
55+
| `Telerik.Web.UI.RadBadgeRounded.Full` | `3` |
56+
57+
## Size
58+
59+
The enum type: `Telerik.Web.UI.RadBadgeSize`
60+
61+
| Enum member | Value |
62+
| --- | --- |
63+
| `Telerik.Web.UI.RadBadgeSize.Small` | `0` |
64+
| `Telerik.Web.UI.RadBadgeSize.Medium` | `1` |
65+
| `Telerik.Web.UI.RadBadgeSize.Large` | `2` |
66+
67+
## ThemeColor
68+
69+
The enum type: `Telerik.Web.UI.RadBadgeThemeColor`
70+
71+
| Enum member | Value |
72+
| --- | --- |
73+
| `Telerik.Web.UI.RadBadgeThemeColor.Primary` | `0` |
74+
| `Telerik.Web.UI.RadBadgeThemeColor.Secondary` | `1` |
75+
| `Telerik.Web.UI.RadBadgeThemeColor.Tertiary` | `2` |
76+
| `Telerik.Web.UI.RadBadgeThemeColor.Info` | `3` |
77+
| `Telerik.Web.UI.RadBadgeThemeColor.Success` | `4` |
78+
| `Telerik.Web.UI.RadBadgeThemeColor.Warning` | `5` |
79+
| `Telerik.Web.UI.RadBadgeThemeColor.Error` | `6` |

0 commit comments

Comments
 (0)