Skip to content

Commit 992a77b

Browse files
dimodidimodi
dimodi
authored and
dimodi
committed
docs(Button): Revamp Appearance article
1 parent f175bfd commit 992a77b

File tree

1 file changed

+67
-107
lines changed

1 file changed

+67
-107
lines changed

‎components/button/appearance.md‎

Lines changed: 67 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -10,151 +10,111 @@ position: 35
1010

1111
# Appearance Settings
1212

13-
You can control the appearance of the button by setting the following attributes:
13+
The Telerik Button component for Blazor provides several ways to control its appearance. This article discusses the following component parameters:
1414

1515
* [FillMode](#fillmode)
1616
* [Rounded](#rounded)
1717
* [Size](#size)
1818
* [ThemeColor](#themecolor)
1919

20-
You can use all of them together to achieve the desired appearance. This article will explain their effect one by one.
20+
You can use all of them together to achieve the desired appearance.
2121

2222
## FillMode
2323

24-
The `FillMode` toggles the background and border of the TelerikButton. You can set the parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class:
24+
The `FillMode` parameter changes or removes the background and border of the Button. Set the parameter to a member of the static class `Telerik.Blazor.ThemeConstants.Button.FillMode`. When setting the `FillMode` parameter value inline, start with a `@` character, otherwise the predefined string constant cannot be resolved.
2525

26-
| Class members | Manual declarations |
27-
|------------|--------|
28-
|`Solid` <br /> default value|`solid`|
29-
|`Flat`|`flat`|
30-
|`Outline`|`outline`|
31-
|`Link`|`link`|
32-
|`Clear`|`clear`|
26+
| FillMode Class Member | Actual String Value |
27+
| --- | --- |
28+
| `Solid` | `solid` (default) |
29+
| `Flat` | `flat` |
30+
| `Outline` | `outline` |
31+
| `Link` | `link` |
32+
| `Clear` | `clear` |
3333

34-
>caption The built-in Fill modes
34+
>caption Built-in Button FillMode Values
3535
3636
````RAZOR
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-
}
37+
<TelerikButton FillMode="@ThemeConstants.Button.FillMode.Clear">Clear</TelerikButton>
38+
<TelerikButton FillMode="@ThemeConstants.Button.FillMode.Flat">Flat</TelerikButton>
39+
<TelerikButton FillMode="@ThemeConstants.Button.FillMode.Link">Link</TelerikButton>
40+
<TelerikButton FillMode="@ThemeConstants.Button.FillMode.Outline">Outline</TelerikButton>
41+
<TelerikButton FillMode="@ThemeConstants.Button.FillMode.Solid">Solid (Default)</TelerikButton>
5442
````
5543

5644
## Rounded
5745

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:
46+
The `Rounded` parameter applies a `border-radius` CSS style to the Button to curve the corners. Set the parameter to a member of the static class `Telerik.Blazor.ThemeConstants.Button.Rounded`. When setting the `Rounded` parameter value inline, start with a `@` character, otherwise the predefined string constant cannot be resolved.
5947

60-
| Class members | Manual declarations |
61-
|------------|--------|
62-
|`Small` |`sm`|
63-
|`Medium`|`md`|
64-
|`Large`|`lg`|
65-
|`Full`|`full`|
48+
| Rounded Class Member | Actual Value |
49+
| --- | --- |
50+
| `Small` | `sm` |
51+
| `Medium` | `md` (default) |
52+
| `Large` | `lg` |
53+
| `Full` | `full` |
6654

67-
>caption The built-in values of the Rounded attribute
55+
>caption Built-in Button Rounded Values
6856
6957
````RAZOR
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-
}
58+
<TelerikButton Rounded="@ThemeConstants.Button.Rounded.Full">Full</TelerikButton>
59+
<TelerikButton Rounded="@ThemeConstants.Button.Rounded.Large">Large</TelerikButton>
60+
<TelerikButton Rounded="@ThemeConstants.Button.Rounded.Medium">Medium (Default)</TelerikButton>
61+
<TelerikButton Rounded="@ThemeConstants.Button.Rounded.Small">Small</TelerikButton>
8762
````
8863

8964
## Size
9065

91-
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:
66+
The `Size` parameter affects the Button dimensions, paddings, and font size. Set the parameter to a member of the static class `Telerik.Blazor.ThemeConstants.Button.Size`. When setting the `Size` parameter value inline, start with a `@` character, otherwise the predefined string constant cannot be resolved.
9267

93-
| Class members | Manual declarations |
94-
|---------------|--------|
95-
| `Small` |`sm`|
96-
| `Medium` |`md`|
97-
| `Large` |`lg`|
68+
| Size Class Member | Actual Value |
69+
| --- | --- |
70+
| `Small` | `sm` |
71+
| `Medium` | `md` (default) |
72+
| `Large` | `lg` |
9873

99-
>caption The built-in button sizes
74+
>caption Built-in Button Size Values
10075
10176
````RAZOR
102-
@{
103-
var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Size)
104-
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
105-
| System.Reflection.BindingFlags.FlattenHierarchy)
106-
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
107-
108-
foreach (var field in fields)
109-
{
110-
string size = field.GetValue(null).ToString();
111-
112-
<div style="float:left; margin: 20px;">
113-
<TelerikButton Size="@size">@size</TelerikButton>
114-
</div>
115-
}
116-
}
77+
<TelerikButton Size="@ThemeConstants.Button.Size.Large">Large</TelerikButton>
78+
<TelerikButton Size="@ThemeConstants.Button.Size.Medium">Medium (Default)</TelerikButton>
79+
<TelerikButton Size="@ThemeConstants.Button.Size.Small">Small</TelerikButton>
11780
````
11881

11982
## ThemeColor
12083

121-
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:
84+
The `ThemeColor` parameter controls the Button background, text, and border color. Set the parameter to a member of the static class `Telerik.Blazor.ThemeConstants.Button.ThemeColor`. When setting the `ThemeColor` parameter value inline, start with a `@` character, otherwise the predefined string constant cannot be resolved.
12285

123-
| Class members | Manual declarations |
124-
|------------|--------|
125-
|`Base` <br /> default value |`base`|
126-
|`Primary`|`primary`|
127-
|`Secondary`|`secondary`|
128-
|`Tertiary`|`tertiary`|
129-
|`Info`|`info`|
130-
|`Success`|`success`|
131-
|`Warning`|`warning`|
132-
|`Error`|`error`|
133-
|`Dark`|`dark`|
134-
|`Light`|`light`|
135-
|`Inverse`|`inverse`|
86+
| ThemeColor Class Member | Actual String Value |
87+
| --- | --- |
88+
| `Base` | `base` (default) |
89+
| `Primary` | `primary` |
90+
| `Secondary` | `secondary` |
91+
| `Tertiary` | `tertiary` |
92+
| `Info` | `info` |
93+
| `Success` | `success` |
94+
| `Warning` | `warning` |
95+
| `Error` | `error` |
96+
| `Dark` | `dark` |
97+
| `Light` | `light` |
98+
| `Inverse` | `inverse` |
13699

137100

138-
>caption The built-in ThemeColors
101+
>caption Built-in Button ThemeColor Values
139102
140103
````RAZOR
141-
@* The built-in button colors *@
142-
143-
@{
144-
var fields = typeof(Telerik.Blazor.ThemeConstants.Button.ThemeColor)
145-
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
146-
| System.Reflection.BindingFlags.FlattenHierarchy)
147-
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
148-
149-
foreach (var field in fields)
150-
{
151-
string themeColor = field.GetValue(null).ToString();
152-
153-
<div style="float:left; margin: 20px;">
154-
<TelerikToggleButton ThemeColor="@themeColor">@themeColor</TelerikToggleButton>
155-
</div>
156-
}
157-
}
104+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Base">Base (Default)</TelerikButton>
105+
106+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Primary</TelerikButton>
107+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Secondary">Secondary</TelerikButton>
108+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Tertiary">Tertiary</TelerikButton>
109+
110+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Info">Info</TelerikButton>
111+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Success">Success</TelerikButton>
112+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Warning">Warning</TelerikButton>
113+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Error">Error</TelerikButton>
114+
115+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Dark">Dark</TelerikButton>
116+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Light">Light</TelerikButton>
117+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Inverse">Inverse</TelerikButton>
158118
````
159119

160120
@[template](/_contentTemplates/common/themebuilder-section.md#appearance-themebuilder)

0 commit comments

Comments
 (0)