Skip to content

Commit 9e9008f

Browse files
marin-bratanovmarin-bratanov
committed
chore(button): split into separate articles
1 parent b1cdddf commit 9e9008f

File tree

5 files changed

+165
-95
lines changed

5 files changed

+165
-95
lines changed

‎components/button/events.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
title: Events
3+
page_title: Button for Blazor | Events
4+
description: Events of the Button for Blazor
5+
slug: button-events
6+
tags: telerik,blazor,button,events
7+
published: True
8+
position: 20
9+
---
10+
11+
# Button Events
12+
13+
This article explains the events available in the Telerik Button for Blazor:
14+
15+
* [OnClick](#onclick)
16+
17+
## OnClick
18+
19+
The `OnClick` event fires when the user clicks or taps the button.
20+
21+
>caption Handle the button click
22+
23+
````CSHTML
24+
@someVariable
25+
26+
<TelerikButton OnClick="@myHandler">Click me!</TelerikButton>
27+
28+
@code {
29+
MarkupString someVariable;
30+
31+
void myHandler()
32+
{
33+
someVariable = new MarkupString(DateTime.Now.ToString());
34+
}
35+
}
36+
````
37+
38+
@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
39+
40+
41+
## See Also
42+
43+
* [Button Overview]({%slug components/button/overview%})

‎components/button/icons.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
title: Icons
3+
page_title: Button for Blazor | Icon
4+
description: Icons and images in the Button for Blazor
5+
slug: button-icons
6+
tags: telerik,blazor,button,icon,sprite,image
7+
published: True
8+
position: 2
9+
---
10+
11+
12+
# Button Icons
13+
14+
You can put an image, sprite or a font icon in the button to illustrate its purpose for your end users. To apply them, use the following properties:
15+
16+
* for a font icon, use the `Icon` attribute to set the font icon class.
17+
* for an image, use the `ImageUrl` attribute to provide the URL
18+
* for a sprite, set the `SpriteClass` attribute to `k-icon MySpriteClass` where `MySpriteClass` defines the CSS rules for the sprite.
19+
20+
You can see how to use the built-in icons in the [Font Icons]({%slug general-information/font-icons%}) article.
21+
22+
For a custom font icon, define the font and glyph in your `Icon` CSS class.
23+
24+
The following example shows how to use an image from a URL, a sprite image, and the built-in font icons.
25+
26+
>caption How to use icons in Telerik Button
27+
28+
````CSHTML
29+
<TelerikButton SpriteClass="k-icon netherlandsFlag">Sprite</TelerikButton>
30+
<TelerikButton Icon="@IconName.Filter">Font Icon</TelerikButton>
31+
<TelerikButton ImageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png">Image URL</TelerikButton>
32+
33+
<style>
34+
/* the sprite for the first button is defined through a CSS rule matchin its Class */
35+
.netherlandsFlag {
36+
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/styles/flags.png");
37+
background-position: 0 -64px;
38+
}
39+
</style>
40+
````
41+
42+
>caption The result from the code snippet above
43+
44+
![](images/icon-buttons.png)
45+
46+
>tip You can use relative paths to your images in the `wwwroot` folder. The example above uses absolute paths to make it easy for you to see the results without preparing images.
47+
48+
49+
## See Also
50+
51+
* [Button Overview]({%slug components/button/overview%})

‎components/button/overview.md‎

Lines changed: 39 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -12,26 +12,36 @@ position: 0
1212

1313
This article provides information about the Button component and its core features.
1414

15-
The Button component provides styling according to the [chosen theme]({%slug general-information/themes%}), click event and icons. You can also disable the button through a property.
15+
The Button component provides styling according to the [chosen theme]({%slug general-information/themes%}), click [event]({%slug button-events%}) and [icons]({%slug button-icons%}). You can also disable the button and set its [type]({%slug button-type%}).
1616

1717
In this article:
1818

1919
* [Basic Button](#basic-button)
20-
* [Click Handler](#click-handler)
21-
* [Styling](#styling)
22-
* [Icons](#icons)
20+
* [Primary Button](#primary-button)
2321
* [Disabled State](#disabled-state)
24-
* [Button Type](#button-type)
22+
* [Styling](#styling)
23+
2524

2625

2726
## Basic Button
2827

2928
To add a Telerik Button to your Blazor app, use the `<TelerikButton>` tag:
3029

31-
>caption Basic Telerik Button tag
30+
>caption Basic Telerik Button with OnClick event handling
3231
3332
````CSHTML
34-
<TelerikButton>Hello!</TelerikButton>
33+
@result
34+
<br />
35+
<TelerikButton OnClick="@OnClickHandler">Hello!</TelerikButton>
36+
37+
@code {
38+
string result;
39+
40+
async Task OnClickHandler()
41+
{
42+
result = DateTime.Now.ToString();
43+
}
44+
}
3545
````
3646

3747
>caption The result from the code snippet above
@@ -50,47 +60,7 @@ To add a Telerik Button to your Blazor app, use the `<TelerikButton>` tag:
5060
}
5161
````
5262

53-
## Click Handler
54-
55-
To attach a click handler, use the `OnClick` attribute and define the method in the `functions` section.
56-
57-
>caption Click handler for a Telerik Button
58-
59-
````CSHTML
60-
@someVariable
61-
62-
<TelerikButton OnClick="@myHandler">Click me!</TelerikButton>
63-
64-
@code {
65-
MarkupString someVariable;
66-
67-
void myHandler()
68-
{
69-
someVariable = new MarkupString(DateTime.Now.ToString());
70-
}
71-
}
72-
````
73-
74-
## Styling
75-
76-
You can style the button through its `Class` attribute to define your own CSS rules that apply to the HTML rendering.
77-
78-
>caption Set CSS class to the button and change its appearance
79-
80-
````CSHTML
81-
<TelerikButton Class="RedText">My text is red.</TelerikButton>
82-
83-
<style>
84-
.RedText,
85-
.RedText:hover {
86-
color: red;
87-
}
88-
</style>
89-
````
90-
91-
>caption The result from the code snippet above
92-
93-
![](images/red-button.png)
63+
## Primary Button
9464

9565
You can also make the button use a strong color to attact attention, called Primary button styling. To do that, set its `Primary` property to true.
9666

@@ -104,41 +74,6 @@ You can also make the button use a strong color to attact attention, called Prim
10474
10575
![](images/primary-button.png)
10676

107-
## Icons
108-
109-
You can put an image, sprite or a font icon in the button to illustrate its purpose for your end users. To apply them, use the following properties:
110-
111-
* for a font icon, use the `Icon` attribute to set the font icon class.
112-
* for an image, use the `ImageUrl` attribute to provide the URL
113-
* for a sprite, set the `SpriteClass` attribute to `k-icon MySpriteClass` where `MySpriteClass` defines the CSS rules for the sprite.
114-
115-
You can see how to use the built-in icons in the [Font Icons]({%slug general-information/font-icons%}) article.
116-
117-
For a custom font icon, define the font and glyph in your `Icon` CSS class.
118-
119-
The following example shows how to use an image from a URL, a sprite image, and the built-in font icons.
120-
121-
>caption How to use icons in Telerik Button
122-
123-
````CSHTML
124-
<TelerikButton SpriteClass="k-icon netherlandsFlag">Sprite</TelerikButton>
125-
<TelerikButton Icon="@IconName.Filter">Font Icon</TelerikButton>
126-
<TelerikButton ImageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png">Image URL</TelerikButton>
127-
128-
<style>
129-
/* the sprite for the first button is defined through a CSS rule matchin its Class */
130-
.netherlandsFlag {
131-
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/styles/flags.png");
132-
background-position: 0 -64px;
133-
}
134-
</style>
135-
````
136-
137-
>caption The result from the code snippet above
138-
139-
![](images/icon-buttons.png)
140-
141-
>tip You can use relative paths to your images in the `wwwroot` folder. The example above uses absolute paths to make it easy for you to see the results without preparing images.
14277

14378
## Disabled State
14479

@@ -154,24 +89,34 @@ To disable a button, set its `Enabled` attribute to `false`.
15489
15590
![](images/disabled-button.png)
15691

157-
## Button Type
158-
159-
The button renders a `<button type="submit">` element by default, as this is the default behavior of a button.
92+
## Styling
16093

161-
You can control the `type` attribute through the `ButtonType` property of the component which can accept the following values:
94+
You can style the button through its `Class` attribute to define your own CSS rules that apply to the HTML rendering.
16295

163-
* `Submit` - Renders a `type="submit"` attribute. Can submit the form and trigger validation. The default value.
164-
* `Button` - Renders a `type="button"` attribute. Does not invoke form validation and submission.
165-
* `Reset` - Renders a `type="reset"` attribute. Can reset the current form.
96+
>caption Set CSS class to the button and change its appearance
16697
16798
````CSHTML
168-
<TelerikButton>Implicit SUBMIT</TelerikButton>
169-
<TelerikButton ButtonType="@ButtonType.Submit">Explicit SUBMIT</TelerikButton>
170-
<TelerikButton ButtonType="@ButtonType.Button">BUTTON</TelerikButton>
171-
<TelerikButton ButtonType="@ButtonType.Reset">RESET</TelerikButton>
99+
<TelerikButton Class="RedText">My text is red.</TelerikButton>
100+
101+
<style>
102+
.RedText,
103+
.RedText:hover {
104+
color: red;
105+
}
106+
</style>
172107
````
173108

109+
>caption The result from the code snippet above
110+
111+
![](images/red-button.png)
112+
113+
114+
115+
174116
## See Also
175117

176118
* [Live Demo: Button](https://demos.telerik.com/blazor-ui/button/index)
119+
* [Events]({%slug button-events%})
120+
* [Icons]({%slug button-icons%})
121+
* [Type]({%slug button-type%})
177122

‎components/button/type.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
title: Type
3+
page_title: Button for Blazor | Type
4+
description: Choosing a type attribute of the Button for Blazor
5+
slug: button-type
6+
tags: telerik,blazor,button,type
7+
published: True
8+
position: 3
9+
---
10+
11+
# Button Type
12+
13+
The Button renders a `<button type="submit">` element by default, as this is the default behavior of a button. This article explains how to change it.
14+
15+
You can control the `type` attribute through the `ButtonType` property of the component which can accept the following values:
16+
17+
* `Submit` - Renders a `type="submit"` attribute. Can submit the form and trigger validation. The default value.
18+
* `Button` - Renders a `type="button"` attribute. Does not invoke form validation and submission.
19+
* `Reset` - Renders a `type="reset"` attribute. Can reset the current form.
20+
21+
````CSHTML
22+
<TelerikButton>Implicit SUBMIT</TelerikButton>
23+
<TelerikButton ButtonType="@ButtonType.Submit">Explicit SUBMIT</TelerikButton>
24+
<TelerikButton ButtonType="@ButtonType.Button">BUTTON</TelerikButton>
25+
<TelerikButton ButtonType="@ButtonType.Reset">RESET</TelerikButton>
26+
````
27+
28+
29+
## See Also
30+
31+
* [Button Overview]({%slug components/button/overview%})

‎components/tabstrip/events.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ position: 20
1010

1111
# Tab Strip Events
1212

13-
This article explains the events available in the Telerik NumericTextbox for Blazor:
13+
This article explains the events available in the Telerik TabStrip for Blazor:
1414

1515
* [ActiveTabIndexChanged](#activetabindexchanged)
1616

0 commit comments

Comments
 (0)