Skip to content

Commit 9371096

Browse files
dimodidimodi
committed
docs(ButtonGroup): Add more examples to Buttons page (#3021)
1 parent ab94578 commit 9371096

File tree

1 file changed

+95
-16
lines changed

1 file changed

+95
-16
lines changed

‎components/buttongroup/buttons.md

Lines changed: 95 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,85 @@ position: 5
1010

1111
# ButtonGroup Buttons
1212

13-
The ButtonGroup component supports two types of buttons that have different behavior:
13+
The ButtonGroup component supports two types of buttons that have different behaviors:
1414

15-
* [`ButtonGroupToggleButton`](#buttongroup-togglebutton)
1615
* [`ButtonGroupButton`](#buttongroup-button)
16+
* [`ButtonGroupToggleButton`](#buttongroup-togglebutton)
17+
18+
You can add the desired button instances by declaring the dedicated button tags. Additionally, you can individually configure their [appearance](slug:buttongroup-appearance), [enabled/disabled state](#disabled-state) and [visibility](#visibility) through the parameters of each button tag.
19+
20+
## ButtonGroup Button
21+
22+
The `ButtonGroupButton` does not change its visual state when clicked. It behaves as a regular button and does not support selection.
23+
24+
The `ButtonGroupButton` inherits the parameters and behavior of the [Telerik UI for Blazor Button](slug:components/button/overview) component.
25+
26+
>caption Using Buttons in a group
27+
28+
````RAZOR
29+
<TelerikButtonGroup>
30+
<ButtonGroupButton OnClick="@OnButton1Click">Button 1</ButtonGroupButton>
31+
<ButtonGroupButton OnClick="@OnButton2Click">Button 2</ButtonGroupButton>
32+
<ButtonGroupButton OnClick="@OnButton3Click">Button 3</ButtonGroupButton>
33+
</TelerikButtonGroup>
1734
18-
You can add the desired button instances by declaring the dedicated button tags. Additionally, you can individually configure their [appearance](slug:buttongroup-appearance), [enabled/disabled state](#disabled-state) and [visibility](#visibility) through the parameters each button tag exposes.
35+
@code {
36+
private void OnButton1Click()
37+
{
38+
// ...
39+
}
40+
41+
private void OnButton2Click()
42+
{
43+
// ...
44+
}
45+
46+
private void OnButton3Click()
47+
{
48+
// ...
49+
}
50+
}
51+
````
1952

2053
## ButtonGroup ToggleButton
2154

2255
The `ButtonGroupToggleButton` becomes selected when clicked and deselects when another one is clicked. If multiple selection is enabled, the user can select more than one `ButtonGroupToggleButton` at a time. Clicking on a selected button in this case will deselect it. Read more in the [Selection](slug:buttongroup-selection) article.
2356

2457
The `ButtonGroupToggleButton` inherits the parameters and behavior of the [`TelerikToggleButton`](slug:togglebutton-overview) component.
2558

26-
## ButtonGroup Button
59+
>caption Using ToogleButtons in a group
2760
28-
The `ButtonGroupButton` does not change its visual state when clicked. It behaves as a regular button and does not support selection.
61+
````RAZOR
62+
<TelerikButtonGroup>
63+
<ButtonGroupToggleButton OnClick="@OnToggleButton1Click"
64+
@bind-Selected="@ToggleButton1Selected">Toggle Button 1</ButtonGroupToggleButton>
65+
<ButtonGroupToggleButton OnClick="@OnToggleButton2Click"
66+
@bind-Selected="@ToggleButton2Selected">Toggle Button 2</ButtonGroupToggleButton>
67+
<ButtonGroupToggleButton OnClick="@OnToggleButton3Click"
68+
@bind-Selected="@ToggleButton3Selected">Toggle Button 3</ButtonGroupToggleButton>
69+
</TelerikButtonGroup>
2970
30-
The `ButtonGroupButton` inherits the parameters and behavior of the [Telerik UI for Blazor Button](slug:components/button/overview) component.
71+
@code {
72+
private bool ToggleButton1Selected { get; set; } = true;
73+
private bool ToggleButton2Selected { get; set; }
74+
private bool ToggleButton3Selected { get; set; }
75+
76+
private void OnToggleButton1Click()
77+
{
78+
// ...
79+
}
80+
81+
private void OnToggleButton2Click()
82+
{
83+
// ...
84+
}
85+
86+
private void OnToggleButton3Click()
87+
{
88+
// ...
89+
}
90+
}
91+
````
3192

3293
## Disabled State
3394

@@ -37,13 +98,18 @@ To disable a button, set its `Enabled` attribute to `false`.
3798
3899
````RAZOR
39100
<TelerikButtonGroup>
40-
<ButtonGroupButton>Enabled</ButtonGroupButton>
41-
<ButtonGroupButton Enabled="false">Disabled</ButtonGroupButton>
42-
<ButtonGroupToggleButton Selected="true">Enabled</ButtonGroupToggleButton>
43-
<ButtonGroupToggleButton Enabled="false">Disabled</ButtonGroupToggleButton>
101+
<ButtonGroupButton>Enabled Button</ButtonGroupButton>
102+
<ButtonGroupButton Enabled="false">Disabled Button</ButtonGroupButton>
103+
<ButtonGroupToggleButton @bind-Selected="@ToggleButton1Selected">Enabled ToggleButton</ButtonGroupToggleButton>
104+
<ButtonGroupToggleButton @bind-Selected="@ToggleButton2Selected">Enabled ToggleButton</ButtonGroupToggleButton>
105+
<ButtonGroupToggleButton Enabled="false">Disabled ToggleButton</ButtonGroupToggleButton>
44106
</TelerikButtonGroup>
45-
````
46107
108+
@code {
109+
private bool ToggleButton1Selected { get; set; } = true;
110+
private bool ToggleButton2Selected { get; set; }
111+
}
112+
````
47113

48114
## Visibility
49115

@@ -53,13 +119,26 @@ You can set the `Visible` parameter of individual buttons to `false` to hide the
53119
54120
````RAZOR
55121
<TelerikButtonGroup>
56-
<ButtonGroupButton>First</ButtonGroupButton>
57-
<ButtonGroupButton Visible="false">Hidden</ButtonGroupButton>
58-
<ButtonGroupToggleButton>Third</ButtonGroupToggleButton>
59-
<ButtonGroupToggleButton Visible="false">Fourth</ButtonGroupToggleButton>
122+
<ButtonGroupButton>Button</ButtonGroupButton>
123+
<ButtonGroupButton Visible="@ShowHiddenButtons">Button Hidden</ButtonGroupButton>
124+
<ButtonGroupToggleButton @bind-Selected="@ToggleButton1Selected">ToggleButton</ButtonGroupToggleButton>
125+
<ButtonGroupToggleButton @bind-Selected="@ToggleButton2Selected"
126+
Visible="@ShowHiddenButtons">ToggleButton Hidden</ButtonGroupToggleButton>
60127
</TelerikButtonGroup>
128+
129+
<br />
130+
<br />
131+
132+
<TelerikToggleButton @bind-Selected="@ShowHiddenButtons">Show Hidden Buttons</TelerikToggleButton>
133+
134+
@code {
135+
private bool ShowHiddenButtons { get; set; }
136+
137+
private bool ToggleButton1Selected { get; set; } = true;
138+
private bool ToggleButton2Selected { get; set; }
139+
}
61140
````
62141

63142
## See Also
64143

65-
* [Live Demo: Button Types](https://demos.telerik.com/blazor-ui/buttongroup/button-types)
144+
* [Live Demo: Button Types](https://demos.telerik.com/blazor-ui/buttongroup/button-types)

0 commit comments

Comments
 (0)