Skip to content

Commit 442850f

Browse files
svdimitrntacheva
svdimitr
and
ntacheva
authored
Documentation of component options (#706)
* chore(appearance): appearance settings for the Button * chore(button): button appearance article * chore(commandbutton): appearance settings * chore(docs): options * chore(buttons): delete images * chore(buttongroup): delete images * chore(switch): delete images * chore(docs): revamp of the articles * Update components/buttongroup/appearance.md Co-authored-by: Nadezhda Tacheva <[email protected]> * Update components/button/appearance.md Co-authored-by: Nadezhda Tacheva <[email protected]> * Update components/checkbox/appearance.md Co-authored-by: Nadezhda Tacheva <[email protected]> * Update components/maskedtextbox/appearance.md Co-authored-by: Nadezhda Tacheva <[email protected]> * Update components/numerictextbox/appearance.md Co-authored-by: Nadezhda Tacheva <[email protected]> * Update components/switch/appearance.md Co-authored-by: Nadezhda Tacheva <[email protected]> * Update components/switch/appearance.md Co-authored-by: Nadezhda Tacheva <[email protected]> * Update components/switch/appearance.md Co-authored-by: Nadezhda Tacheva <[email protected]> * Update components/textarea/appearance.md Co-authored-by: Nadezhda Tacheva <[email protected]> * Update components/togglebutton/appearance.md Co-authored-by: Nadezhda Tacheva <[email protected]> * chore(switch): add tip for usage of track and thumbrounded * Update components/textbox/appearance.md Co-authored-by: Nadezhda Tacheva <[email protected]> * chore(radiogroup): remove the screenshots from the table * chore(maskedtextbox): place the article as last * chore(button): resolve conflict * chore(button): redo the styling article for the breaking changes Co-authored-by: Nadezhda Tacheva <[email protected]>
1 parent 2757834 commit 442850f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1377
-8
lines changed

‎components/button/appearance.md‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
---
2+
title: Appearance
3+
page_title: Button Appearance
4+
description: Appearance settings of the Button for Blazor.
5+
slug: button-appearance
6+
tags: telerik,blazor,button,appearance
7+
published: True
8+
position: 35
9+
---
10+
11+
# Appearance Settings
12+
13+
You can control the appearance of the button by setting the following attributes:
14+
15+
* [FillMode](#fillmode)
16+
* [Rounded](#rounded)
17+
* [Shape](#shape)
18+
* [Size](#size)
19+
* [ThemeColor](#themecolor)
20+
21+
You can use all of them together to achieve the desired appearance. This article will explain their effect one by one.
22+
23+
## FillMode
24+
25+
The `FillMode` controls how the TelerikButton is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class:
26+
27+
| Class members | Manual declarations |
28+
|------------|--------|
29+
|`Solid` <br /> default value|`solid`|
30+
|`Flat`|`flat`|
31+
|`Outline`|`outline`|
32+
|`Link`|`link`|
33+
34+
>caption The built-in Fill modes
35+
36+
````CSHTML
37+
@* These are all built-in fill modes *@
38+
39+
@{
40+
var fields = typeof(Telerik.Blazor.ThemeConstants.Button.FillMode)
41+
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
42+
| System.Reflection.BindingFlags.FlattenHierarchy)
43+
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
44+
45+
foreach (var field in fields)
46+
{
47+
string fillmode = field.GetValue(null).ToString();
48+
49+
<div style="float:left; margin: 20px;">
50+
<TelerikButton FillMode="@fillmode">@fillmode</TelerikButton>
51+
</div>
52+
}
53+
}
54+
````
55+
56+
## Rounded
57+
58+
The `Rounded` parameter applies the `border-radius` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
59+
60+
| Class members | Manual declarations |
61+
|------------|--------|
62+
|`Small` |`sm`|
63+
|`Medium`|`md`|
64+
|`Large`|`lg`|
65+
|`Full`|`full`|
66+
67+
>caption The built-in values of the Rounded attribute
68+
69+
````CSHTML
70+
@* The built-in rounded edges of the button. *@
71+
72+
@{
73+
var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Rounded)
74+
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
75+
| System.Reflection.BindingFlags.FlattenHierarchy)
76+
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
77+
78+
foreach (var field in fields)
79+
{
80+
string rounded = field.GetValue(null).ToString();
81+
82+
<div style="float:left; margin: 20px;">
83+
<TelerikButton Rounded="@rounded">@rounded</TelerikButton>
84+
</div>
85+
}
86+
}
87+
````
88+
89+
## Shape
90+
91+
The `Shape` attribute defines the geometric shape of the button. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Shape` class:
92+
93+
| Class members | Manual declarations |
94+
|---------------|--------|
95+
| `Rectangle` |`rectangle`|
96+
| `Square` |`square`|
97+
| `Circle` |To create a circular button you should set the `Shape` attribute to **Square**, and the `Rounded` attribute to **Full**|
98+
99+
100+
>note The width and height of the geometric shapes depend on the amount of text in the button, and the size of the font.
101+
102+
>caption The built-in button shapes
103+
104+
````CSHTML
105+
@{
106+
var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Shape)
107+
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
108+
| System.Reflection.BindingFlags.FlattenHierarchy)
109+
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
110+
111+
foreach (var field in fields)
112+
{
113+
string shape = field.GetValue(null).ToString();
114+
115+
<div style="float:left; margin: 20px;">
116+
<TelerikButton Shape="@shape">@shape</TelerikButton>
117+
</div>
118+
}
119+
}
120+
````
121+
122+
## Size
123+
124+
You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class:
125+
126+
| Class members | Manual declarations |
127+
|---------------|--------|
128+
| `Small` |`sm`|
129+
| `Medium` |`md`|
130+
| `Large` |`lg`|
131+
132+
>caption The built-in button sizes
133+
134+
````CSHTML
135+
@{
136+
var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Size)
137+
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
138+
| System.Reflection.BindingFlags.FlattenHierarchy)
139+
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
140+
141+
foreach (var field in fields)
142+
{
143+
string size = field.GetValue(null).ToString();
144+
145+
<div style="float:left; margin: 20px;">
146+
<TelerikButton Size="@size">@size</TelerikButton>
147+
</div>
148+
}
149+
}
150+
````
151+
152+
## ThemeColor
153+
154+
The color of the button is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.ThemeColor` class:
155+
156+
| Class members | Manual declarations |
157+
|------------|--------|
158+
|`Base` <br /> default value |`base`|
159+
|`Primary`|`primary`|
160+
|`Secondary`|`secondary`|
161+
|`Tertiary`|`tertiary`|
162+
|`Info`|`info`|
163+
|`Success`|`success`|
164+
|`Warning`|`warning`|
165+
|`Error`|`error`|
166+
|`Dark`|`dark`|
167+
|`Light`|`light`|
168+
|`Inverse`|`inverse`|
169+
170+
171+
>caption The built-in ThemeColors
172+
173+
````CSHTML
174+
@* The built-in button colors *@
175+
176+
@{
177+
var fields = typeof(Telerik.Blazor.ThemeConstants.Button.ThemeColor)
178+
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
179+
| System.Reflection.BindingFlags.FlattenHierarchy)
180+
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
181+
182+
foreach (var field in fields)
183+
{
184+
string themeColor = field.GetValue(null).ToString();
185+
186+
<div style="float:left; margin: 20px;">
187+
<TelerikToggleButton ThemeColor="@themeColor">@themeColor</TelerikToggleButton>
188+
</div>
189+
}
190+
}
191+
````
192+

‎components/button/overview.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,10 @@ Add a reference to the Button instance to use its methods (for example - `FocusA
8787

8888
* [Using Button Icons]({%slug button-icons%})
8989

90+
>caption The result from the code snippet above
91+
92+
![use css to change the button size](images/button-size-change.png)
93+
9094
## See Also
9195

9296
* [Live Demo: Button](https://demos.telerik.com/blazor-ui/button/index)

‎components/button/styling.md‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,7 @@ There are a few ways to style the Button component:
1818

1919
## Primary Button
2020

21-
Through the primary button styling, you can make the button use a strong color to attract attention. To do that, set its `Primary` property to true.
22-
23-
>caption Button with the Primary color scheme from the current theme
24-
25-
````CSHTML
26-
<TelerikButton Primary="true">Primary</TelerikButton>
27-
````
21+
To set a Primary button you should set the `ThemeColor` parameter to `primary`. [Read the Appearance article for further information...]({%slug button-appearance%}).
2822

2923
## Button Class
3024

0 commit comments

Comments
 (0)